版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
移动WEB开发_rem布局
01-rem单位
rem (root em)是一个相对单位
- em：相对于父元素的字体大小
- rem：相对于html元素的字体大小
- 优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小
02-媒体查询
- 媒体查询（Media Query）是CSS3新语法
- 从小往大写，具有：“向上兼容，向下覆盖”
- @media 可以针对不同的屏幕尺寸设置不同的样式
- 语法规范
- 用
@media开头 - mediatype：媒体查询类型
- all：所有设备
- print：打印机和打印预览
- screen：电脑屏幕、平板电脑、智能手机等
and|not|only：关键字- and：且
- not：非
- only：仅仅
media feature： 媒体特性，必须用小括号包含- width：宽度
- min-width：最小宽度
- max-width：最大宽度
- 用
- 示范：
@media mediatype and|not|only (media feature) {
CSS-Code;
}
@media screen and (max-width:640px) {
html {
font-size:18px;
}
}
- 注：媒体查询书写规则
- 从小到大书写，易于观察代码
03-媒体查询引入资源
- 当样式复杂时，可以针对不同的屏幕引入不同的css文件
- 原理：直接在
link标签中判断设备尺寸 - 示范：
/*当屏幕大于320px，引入1.css文件*/
<link rel="stylesheet" href="1.css" media="screen and (min-width:320px)">
/*当屏幕大于640px，引入2.css文件*/
<link rel="stylesheet" href="2.css" media="screen and (min-width:640px)">
04-维护CSS时的弊端
- CSS 是一门非编程式语言，没有变量、函数、SCOPE（作用域）等概念。
- 冗余代码多
- 没有计算能力
- 组织结构差，不方便维护、扩展，不利于复用
05-less简介以及使用变量
-
less（LeanerStyle Sheets 的缩写）
- 让我们用更少的代码做更多的事情
- less是一门 CSS 预处理语言，扩展了CSS的动态特性
- 在CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS的维护成本
-
变量，指没有固定的值，可以改变的量
- 语法：
@变量名: 值; - 命名规范：
- 不能有特殊字符
- 不能以数字开头
- 区分大小写
- 语法：
-
示范：
@color: pink;/* 定义 */ body { background-color: @color;/* 调用 */ } div { color: @color; } -
常见的CSS预处理器：Sass、Less、Stylus
06-less嵌套
- css写法：
div {
width: 100px;
}
div:hover {
width: 200px;
}
div p {
color: red;
}
div p:hover {
color: yellow;
}
- less写法：
div {
width: 100px;
&:hover {
width: 200px;
}
> p {
color: red;
&:hover {
color: yellow;
}
}
}
07-less运算
- 加+ 减- 乘* 除/
- 运算符的左右必须敲一个空格
- 如果只有一个数有单位，最后的结果就以这个单位为准
- 如果都有单位，最后的结果以第一个为准
08-rem适配方案
- 使用媒体查询根据不同的设备来设置html元素的
font-size大小，然后页面其他元素全部采用rem单位，当html的font-size变化时，其他元素也会跟着变化，从而达到等比缩放的适配
09-rem最终适配方案
- 媒体查询 + Less + rem
- Easy LESS 插件：保存自动生成出 css 文件。
- 首先我们选一套标准尺寸 750为准。
- 我们用屏幕尺寸（750） 除以 我们划分的份数（15） 得到了 html 里面的文字大小 （50）这个文字大小其实也就是1rem的大小。
- 再根据设计稿里的元素尺寸计算出元素的rem值。
- 然后在用媒体查询根据不同屏幕尺寸得到相应的html的font-size值，因为屏幕大小不一样，但是划分的份数一样，所以最后html的文字大小也就不一样，那么1rem在不同的屏幕下也就不一样。
- flexible.js + rem (推荐)
- flexible.js 库，根据当前屏幕尺寸划分为10份，动态计算并设置html的font-size值。
- cssrem：px 转 rem 的插件，注意：默认是16px，我们要手动修改，改完之后注意要重启VS Code。
10-在less文件导入另一个less文件
/*可以不加.less后缀名*/
@import "less文件名"