移动端web开发（三）rem布局
一、rem适配布局
rem（root em）是一个相对单位，类似em，不同的是rem是相对于html元素的字体大小。如：html设置font-size=12px；非根元素设置width：2rem，换成px则表示24px
二、媒体查询（Media Query）
- 使用@media查询，可以针对不同的媒体类型定义不同的样式
- @media可以针对不同的屏幕尺寸设置不同的样式
- 重置浏览器大小时，页面也会根据浏览器的宽度和高度重新渲染页面
2.1 语法：
@meida mediatype and|not|only (media feature) {
css-code;
}
- 用@media开头，注意@符号
- mediatype 媒体类型
- 关键字 and not only
- media feature 媒体特性必须有小括号包含
2.1.1 mediatype类型
2.1.2 关键字
关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件
- and：将多个媒体查询连接到一起，”且“的意思
- not：排除某个媒体类型，”非“，可以省略
- only：指定某个特定的媒体类型，可省略
2.1.3 媒体特性
每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的风格
2.2 引入资源
当样式繁多时，我们可以针对不同的媒体使用不同stylesheets（样式表）。就是直接在link中判断设备的尺寸，然后引用不同的css文件。
2.2.1 语法
<link rel="stylesheet"
media="mediatype and|not|only (media feature)"
href="mystylesheet.css">
2.2.2 媒体查询+rem实现元素动态大小变化
- 有rem页面元素可以设置不同大小尺寸
- 媒体查询可以根据不同设备宽度来修改样式
- 媒体查询+rem 可实现不同设备宽度，实现页面元素大小的动态变化
三、Less
Less（Leaner Style Sheets 的缩写）是CSS扩展语言，也称CSS预处理器。作为CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有CSS语法上，为CSS加入程序时语言的特性。
它在CSS语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了CSS的编写，且降低了CSS的维护成本，就像其名称一样，Less可以让我们用更少的代码做更多的事情
Less中文网址：http://lesscss.cn/
常见的CSS预处理器：Sass、Less、Stylus
3.1 Less的使用
3.1.1 Less 变量
颜色和一些数值经常使用
@变量名：值;
变量命名规范
- 必须以@为前缀
- 不能包含特殊字符
- 不能以数字开头
- 大小写敏感
3.1.2 Less 编译
本质上，Less包含着一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件。所以需要将less文件编译成css文件，html页面才能使用
3.1.3 Less 嵌套
#header .logo {
width:300px;
}
3.1.4 Less运算
/*Less 里面写*/
@width:10px + 5;
div {
border:@width solid red;
}
/*生成css*/
div {
border:15px solid red;
}
/*less 还可这样写*/
width:(@width + 5) * 2;
注意：
- 运算符左右有空格隔开 如：1px + 5
- 对于两个不同单位的值之间的运算，运算的结果取第一个值的单位
- 如果两个值之间只有一个值有单位，则运算结果就取该单位
3.1.5 Less中引入Less文件
/*在 index.less 中导入 common.less文件*/
@import "common"
- @import导入的意思是可以把一个样式文件导入到另外一个样式文件里面
- link是把一个样式文件引入html页面里面
四、rem的适配目标
4.1 rem适配方案
- 让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备
- 使用媒体查询根据不同设备按比例设置html的字体大小
（一） 方案1
A、设计稿常见尺寸宽度
现在基本以450px为准
B、动态设计html标签font-size大小
- 假设设计稿是750px
- 假设我们把整个屏幕划分为15等份（划分标准不一，可以为10份也可以为20份）
- 每一份作为html字体大小，这里就是50px
- 那在320px设备的时候，字体大小为320/15 就是21.33px
- 用页面元素的大小除以不同的html字体大小是会发现他们比例还是相同的
如：一个100×100像素的页面元素在750屏幕下，就是100/50转换为rem 是2rem*2rem 比例是1比1。 320屏幕下，html字体大小为21.33，则2rem=42.66px 此时宽高都为42.66 .但是宽高比例还是1比1。已经能够实现不同屏幕下，页面元素盒子等比例缩放的效果
C、元素大小取值方法
- 重要公式：页面元素的rem值 = 页面元素值（px）/ (屏幕宽度 / 划分的份数)
- 屏幕宽度 / 划分的份数 就是html font-size的大小
（二） 方案2 flexiable.js
不需要再写不同屏幕的媒体查询，js里做了处理。原理是将当前设备划分为10等份，但在不同的设备下，比例还是一致的。我们要做的就是确定好当前设备的html文字大小。剩余的让flexiable.js去算
如：当前设计稿是750px，那我们只需要把html文字大小设置为75px（750px/10）就可以。页面元素rem值：页面元素的px值/75。
github地址：https://github.com/amfe/lib-flexble
vscode px转换rem插件cssrem
这个插件默认的文字大小是16px，设置完后需要重启vscode
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/150443.html
