我的常用mixin 之 px

$unit: .667px; @function px($value){ @return $unit * $value; } $unit: 1px; 时 px(1) 就是 1px 一般情况下,设计师给的 psd 是 720px,为了切图时方便调试,就把 $unit 默认设置为 .667px,即 2/3 等上线时,如果要按实际大小显示,再定义 init-scale,就把 $unit 改成 1 如果要用 rem ,可以定义 $unit: .05rem:比例随意…

前端常用长度单位（px，em，rem，pt）介绍

CSS中有不少属性是以长度作为值的.盒模型的属性就是一些很明显的值属性:width.height.margin.padding.border.除此之外还有很多其他的CSS属性的值同样也是长度值,像偏移量(offset).box-shadow的大小或者字体的大小.间距等.CSS中有哪些长度单位可以作为属性的值呢?这样的单位有很多. 绝对长度单位 px .wrap { width: 400px; } 像素或许被认为是最好的“设备像素”,而这种像素长度和你在显示器上看到的文字屏幕像素无关.px实际…

我的常用mixin 之 lines

/** * 最多显示 $lineCount 行 * lines * * example: * @include lines; * @include lines(3); */ @mixin lines($lineCount: 2){ display: -webkit-box; -webkit-line-clamp: $lineCount; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }…

Android中常用单位dp,px,sp之间的相互转换

MainActivity如下: package cc.testunitswitch; import android.os.Bundle; import android.util.DisplayMetrics; import android.app.Activity; /** * Demo描述: * 利用代码实现dp,px,sp之间的相互转换 * * 参考资料: * 1 http://blog.csdn.net/fx_sky/article/details/8588703 * 2 http://b…

sass中常用mixin

//设置字体大小 @mixin font($s:14px,$h:1.5,$f:microsoft yahei){ font:$s/#{$h} $f; } //参数(方向,大小,颜色),默认:向下,10px,红色 %arrow{ width:; height:; line-height:; font-size:; overflow:hidden; display: inline-block; } @mixin arrow($dir:bottom,$size:10px,$color:red){ @e…

Sass预定义一些常用的样式

一.编写sass文件时, 目录不能有中文, 如: E:\\CPC手机, 会报错exception while processing events: incompatible character encodings: GBK and UTF-8? 二.检测sass目录 $ sass --watch sass:styles 三.引入外部的scss.使用变量, 如index.scss文件引入base.scss文件, 使用es6 import语法 @import "./base.scss";…

less 经典范例 bootstrap 的 less 版本常用 less 代码

1. bootstrap 的 less 版本 2.less 文件分布 /*! * Bootstrap v3.3.7 (http://getbootstrap.com) * Copyright 2011-2016 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ // Core variables and mixins // 引入变量和mixin函数 @impo…

Android开发之获取设备的屏幕信息和px dp之间的转换

DisplayMetrics metric = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(metric); int width = metric.widthPixels; // 屏幕宽度(像素) int height = metric.heightPixels; // 屏幕高度(像素) float density = metric.density; // 屏幕密度(0.75 / 1.0 / 1.…

Rem与Px的转换[转载]

原文:http://www.w3cplus.com/preprocessor/sass-px-to-rem-with-mixin-and-function.html rem是CSS3中新增加的一个单位值,他和em单位一样,都是一个相对单位.不同的是em是相对于元素的父元素的font-size进行计算:rem是相对于根元素html的font-size进行计算.这样一来rem就绕开了复杂的层级关系,实现了类似于em单位的功能. Rem的使用前面说了em是相对于其父元素来设置字体大小的,这样就会存在…

CSS 常用语法与盒模型分析

CSS基础知识 CSS规则由两个主要的部分构成:选择器,以及一条或者多条声明 selector { property: value; property: value; ... property: value } h1 {color:red; font-size:14px;} 在上面的CSS代码中 h1 是选择器 {color:red;front-size:14px;} 是声明 color是属性名称 red是属性值 color:red; 被称为一个声明每个声明由一个属性和一个值组成.select…

Sass基础——Rem与Px的转换

rem是CSS3中新增加的一个单位值,他和em单位一样,都是一个相对单位.不同的是em是相对于元素的父元素的font-size进行计算:rem是相对于根元素html的font-size进行计算.这样一来rem就绕开了复杂的层级关系,实现了类似于em单位的功能. Rem的使用前面说了em是相对于其父元素来设置字体大小的,这样就会存在一个问题,进行任何元素设置,都有可能需要知道他父元素的大小,在我们多次使用时,就会带来无法预知的错误风险.而rem是相对于根元素<html>,这样就意味着,我们只需…

HTML+CSS常用代码（笔记）

注释标签:对代码进行说明  常用格式标签 <b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除线</s> <p>段落标签</p> <hr>:分割线 <br>:换行 <sup>上标</sup> <sub>下标</sub> <pre…

css单位介绍em ex ch rem vw vh vm cm mm in pt pc px

长度单位主要有以下几种em ex ch rem vw vh vm cm mm in pt pc px %,大概可以分为几种"绝对单位"和"相对单位"和"百分比单位". 绝对单位:px in cm mm 相对单位:em rem pt pc ex ch 百分比单位:vw vh vm % 下面主要说几个常用的单位 px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体…

移动端常用单位——rem

移动端常用单位: ①px:像素大小,固定值 ②%:百分比 ③em(不常用,但是在首行缩进时可以使用):相对自身的font大小(当自身的字体大小也是em做单位时,才会以父元素的字体大小为基准单位) ④rem(移动端主流):相对根节点(html)的font大小 ⑤vw(视口宽度):相对视口宽度比例,1vw相当于视口宽度的百分之一 ⑥vh(视口高度):相对视口高度比例,1vh相当于视口高度的百分之一视口宽度(clientWidth)用JS获取,修改html{ font-size : ?rem } 从…

将sass快速引入到移动端项目中加速开发

本文以上图为例子: 首先在根目录创建一个sass文件,在sass文件中分别创建4个文件夹bsae,pages,libs,style; base下存放:样式重置_normalize.scss; 自己定义的scss代码块:_help.scss(如果项目大可以再细分为funiton,mixin,variable等): 通用部分_common.scss;(如上图中的头部,如需要可再细分为common-header , common-nav等部分) pages下存放每个对应的html需要的scss文件,如…

vue2.0 flexible.js + rem 进行自适应开发

1.在页面中引入flexible.js base.js /** * flexible.js 阿里前端自适应解决方案 */ ;(function(win, lib) { var doc = win.document; var docEl = doc.documentElement; var metaEl = doc.querySelector('meta[name="viewport"]'); var flexibleEl = doc.querySelector('meta[name=&…

PHP笔记（CSS篇）

HTML常用于在网页中显示内容,当然,还可以是布局,但是比较不方便,所以,引进了CSS CSS全称Cascading Style Sheets,中文名:层叠样式表帮助文档:CSS.chm 作用:布局和美化网页特点: 和HTML一样,是一种标记语言,可以由浏览器直接执行大小写不敏感 CSS文件是一个文本文件,后缀名为css 嵌套在HTML中使用 Css规则语法 CSS定义由选择器(selector).属性(property)及属性值(value)组成: 格式:selector{proper…

浅淡HTML5移动Web开发

说实话,我们这次开发移动端的项目,整个项目组的人都是第一次,最初立项的时候为是选择native app和web app还争论了一番,最后综合考虑,我们选择了web(我们选择了h5)开发.但从这两种开发模式的特点来说,从它们诞生之日起就开始了不断的争论,孰好孰坏,本文不作探讨,只是简单罗列下本人开发遇到的问题和最终的解决方案. 1. 响应式web设计说到这个,移动开发面对的屏幕尺寸那叫一个丰富,其中安卓阵营就够让人头痛的.我们在PC端常用的两种布局方式就是固定布局和弹性布局,前者设置一个绝大多数…

html css一些记录

1.忽略将页面中的数字识别为电话号码 <meta content="telephone=no" name="format-detection" /> 2.去掉点击元素会出现蓝框 * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } 3.事件问题移动端的常用事件:touchstart,touchmove,touchend. 很多时候我们需要在浏览器里测试.所以兼容的写法是: isTouch = !!na…

关于CSS中的字体尺寸设置 em rem等

常用单位在CSS中可以用很多不同的方式来设定字体的尺寸.一般来说,这些单位被分成两大类:绝对单位(absolute)和相对单位(relative). 绝对单位在大多数情况下是相对于某些实际量度而言的固定值,即是说它们一旦设定,就不会因为其他元素的字体尺寸变化而变化. 相对单位没有一个固定的度量值,而是由父元素尺寸来决定的相对值,它们的尺寸会根据与其相关的元素改变而改变. 下面是对这些单位的一个简单整理: 单位类型描述 px Absolute 1个Viewport像素 pt Absolute…

font-size的探究

整理网上的资料 font字体,用px,em,100%,rem?分什么情况考虑? 我们逐渐意识到,我们用px作为文字大小的单位,已经出现很多问题.最主要是体现在用户不能灵活的控制文字的大小. 对于大多数用户来说或许这并无不妥,但对于年龄稍大及眼力不佳的访客来说,他们不能按他们的意愿,通过浏览器来改变文字的大小.我们以“用户至上”为原则,我们应该采取一种策略,不要求通过px为单位获得100%的精确性,我们需要获得更大的浏览器的可伸缩性与易用性,灵活的满足访客的需要. 一.长度单位长度单位分为两种,…

css基础和心得（三）

OK!接下来我们分别说这些元素的意义.首先,什么是块级元素?在html中<div>,<p>,<h1>,<form>,<ul>和<li>就是块级元素.(ul标签和li标签还记得是什么意思吧?)设置display:block就是将元素显示为块级元素.如:a{display:block;}这里就是将内联元素a转换为块状元素,从而使a元素具有块状元素的特点.那么它有哪些特点呢?1.每个块级元素都从新的一行开始,并且其后的元素也另起一行.(真特…

css基础和心得（四）

现在来说相对定位: 如果想为元素设置层模型中的相对定位,需要设置position:relaive(表示相对定位),它通过left.right.top.bottom属性确定元素在正常文档流中便宜位置.相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left.right. top.bottom属性确定,偏移前的位置保留不动.那么,什么叫"偏移前的位置保留不动呢?"就是div元素相对于以…

CSS2--字体样式

## CSS2 字体样式 ##### font-family 字体族 - 规定元素的字体系列 - 把多个字体作为一个"回退"系统保存.保证浏览器的支持 - ````Microsoft YaHei, tahoma, arial, Hiragino Sans GB, sans-serif```` ##### font 字体类型 - 衬线字体(serif):在字的笔划开始及结束的地方有额外的装饰 - 非衬线字体(sans-serif) : 没有额外的装饰,笔划粗细大致差不多.用于严肃场景 -…

[置顶] xamarin android 布局尺寸了解

为了使UI界面在不同大小的移动端显示器上能够正常显示,大家可能都知道使用sp作为字体大小的单位,dp作为其他元素长度的单位. 前几天看了一篇文章关于 App设计规范的,文章用心写的非常好,这里是链接 http://www.25xt.com/appdesign/10821.html .但是费解的是所有的长度单位都是用px.好吧,""原谅"这位UI设计师良心ps的一张app设计规范图.在UI布局的时候有必要了解一下android设备的适应了. 先来问大家几个问题, 1.andro…

从零开始学习前端开发 — 2、CSS基础

一.CSS简介 1.CSS是什么 CSS是Cascading Style Sheets的简称,中文称为层叠样式表.特点:实现了表现与结构相分离 2.css基础语法 css是由选择符和声明两大部分组成,声明由属性和值组成. 语法: 选择符{ 属性:值; 属性:值; } 注: (1)属性和值用冒号连接 (2) 一条声明结束要添加分号 (3)属性和属性不分先后顺序 3.样式表的创建 1.内联样式(行间样式,行内样式) 语法:<标记 style="属性:值;"></标记&g…

CSS 权威指南 CSS实战手册第四版（阅读笔记）

前言: 对于程序员,学习是无止境的,知识淘换非常快,能够快速稳固掌握一门新技术,是一个程序员应该具备的素质.这里将分析本人一点点不成熟的心得. 了解一门语言,了解它的概念非常重要,但是一些优秀的设计思想需要细心和大量实践才能慢慢参悟,在这之前需要做的是能够运用它来开发,那么了解一些基础特性非常有必要,通常这些特性是需要经验积累,从各种坑中累计出来,但是还有一种看似很笨却很有效的学习方法.那就是将别人的经验记录下来,有事没事都拿出来看看,集合开发中的经验,这会非常有效. 流式布局 http://b…

sass重构响应式unofficial‘s博客轻松适应移动端

前言: 刚刚玩博客园几天时间,发现挺不错的,对于我这个懒人又是一个爱折腾的人来说挺不错的,对于上班玩电脑,下班玩手机的用户来说,博客园中我的博客有一点给我的感觉不是很友好,电脑端看起来很美观的一个页面,移动端竟然也是原模原样的“美观”,由于工作主要是从事移动端开发,看着博客可以禁用模板样式,于是乎就决定把博客样式重构一下,分享是一种美德,不喜勿喷.本文原创博客地址:http://www.cnblogs.com/unofficial官网地址:www.pushself.com) 准备工作: 编辑工具…

微信小程序开发 [06] 一些补充的知识点

0.写在前面的话前几章的内容串联起来,基本上已经能写比较基础的小程序页面逻辑了,当然,wxml和wxss的我并没有写,因为前端我也并不擅长.这个章节,准备随便叨叨,然后补充一些之前没有提到的基础知识,这部分我会从我慕课网的学习笔记上搬过来,不过说实话,慕课网的笔记不能导出,还是很麻烦的,笔记记录的体验还行,但是查阅的体验可实在不怎么样. 1.rpx 在HTML中我们常用的是px这个单位,而在微信小程序中,官方提供了rpx单位,也是用得最多的单位,因为可以自适应屏幕,先看下官方的解释吧: rpx…

css 手机适配

手淘H5移动端适配方案flexible源码分析移动端适配一直是一个值得探讨的问题,在业余时间我找了一些页面,查看了一些厂商对于移动端H5页面的适配方案,看到了几个典型的例子,今天就来记录一下我看到的第一个典型的例子,也是我们公司目前普通H5项目正在使用的适配方案. 这个适配方案是lib-flexible,在看这个源码的同时,我想先来回顾一下几个概念: 1. viewport 在移动设备上,viewport是设备屏幕用来显示我们网页的那一块区域,或者说是浏览器(或者Hybird App内的…

【我的常用mixin 之 px】的更多相关文章