1.rem基础
rem 是一种相对单位,类似于em,em是父元素字体大小,rem是html元素的字体大小。
rem优势:可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制
2.媒体查询@media
媒体查询是CSS3新语法 @media可以针对不同的屏幕尺寸设置不同的样式。
语法:
@media modiatype and|not| only (media feature){
CSS-Code;
}
- 用@media开头注意@符号
- mediatype 媒体类型
值 解释说明 all 用于所有设备 print 用于打印机和打印浏览 screen 用于电脑屏幕,平板电脑,智能手机等 - 关键字 and not only
值 解释说明 and 可以将多个媒体特性连接在一起,相当于“且”的意思 not 排除某个媒体类型,相当于“非”的意思,可以省略 only 置顶某个特定的媒体类型,可以省略 - media feature 媒体特性,必须有小括号包含
值 解释说明 width 定义输出设备中可见区域的宽度 min-width 定义输出设备中最小可见区域的宽度 max-width 定义输出设备中最大区域的宽度
引入资源
当样式比较多的时候,可以针对不同的媒体使用不用的stylesheets(样式表)
媒体查询最好从小到大
语法:
<link rel="stylesheeets" media="mediatype and|not|only (media a feature)" href="mystylesheet.css">
3.less基础
less是一门css扩展语言,也成为css预处理器,它在CSS语法基础上,引入了变量,Mixin(混入),运算以及函数等功能,大大简化了css的编写。并且降低了CSS维护成本。
less中文网址 http://lesscss.cn/
less 使用 :新建一个后缀名为less的文件,在这个less文件里面书写CSS语句。
- less变量: @变量名:值;
命名规范:1.必须有@在前面
2.不能包含特殊字符
3.不能以数字开头
4.大小写敏感
- less编译
需要用到vscode less插件 下载 easy less 插件 自动生成css文件
- less嵌套
1.less嵌套 子元素的样式直接写在父元素里
2.伪类,伪元素,交集选择器内层选择器前加&符号
- less运算
任何数字,颜色或者变量都可以参与运算,就是less提供了+ - * / 算数运算。
可以直接在数值后面+ - * /
注意:1.乘号(*)和除号(/)的写法
2.运算符中间左右有个空格隔开 1px + 5
3.对于两个不同的单位的值之间的运算,运算结果的值取第一个值的单位
4.如果两个值之间只有一个值有单位,则运算结果就取该单位
4.rem适配方案
1.rem适配方案技术使用(市场主流)
技术方案1 :less+媒体查询+rem
*设计稿基本以750为准
元素大小取值方法:
最后公式:页面元素的rem值=页面元素值(px)/(屏幕宽度/划分的份数)
屏幕宽度/划分的份数就是html font-size 的大小
或页面元素的rem值=页面元素值(px)/ html font-size 字体大小
技术方案2(推荐):flexible.js +rem
flexible.js把当前设备划分为10等份
flexible.js下载地址 http://github.com/amfe/lib-flexible