移动web开发（rem布局）

em 相对于父元素字体大小 1em = 父元素字体大小
rem 是相对于html元素的字体大小

rem 优点 可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制

 

一. 媒体查询

 注意：为了防止混乱，媒体查询要按照从小到大来写 这样代码更简洁

 

引入资源语法

<link rel="stylesheet" type="text/css" href="style320.css" media="screen and (min-width:320px)"/>

　　

二. less基础

less是一门css预处理语言，它扩展了css的动态特性。

 http://lesscss.cn

 

1. less安装

① 安装node.js
② 检查是否安装成功，使用cmd命令 输入 "node -v" 查看版本即可
③ 基于node.js在线安装less，使用cmd命"npm install -g less"即可
④ 检查是否安装成功，使用cmd命令 "lessc -v" 查看版本即可

 

2. less变量

@变量名：值;

@color:pink;
body{
        background-color: @color;
    }

 

3. less 编译

vocode Less 插件

Easy LESS插件用来把less文件编译为css文件
安装完毕插件，重新加载下vscode。只要保存一下less文件，会自动生成
css文件

 

4. less嵌套

子元素的样式直接写到父元素里面就好了

.nav{
    .logo{
      color:pink;  
    }    
}

如果遇见（交集|伪类|伪元素选择器）
· 内层选择器的前面没有&符号，则它被解析为父选择器的后代;
· 如果有&符号，它就被解析为父元素自身或父元素的伪类。

a{
    color: red;
    &:hover{
        color: blue;
    }
}

 

5.less运算

 

① 运算符左右两侧必须加一个空格隔开
② 两个数参与运算，如果只有一个数有单位，则最后的结果就以这个单位为准
③ 两个数参与运算，如果两个数都有单位，而且不一样的单位，最后结果以第一个单位为准

 

6. rem适配方案

① less + 媒体查询 + rem

② flexible.js + rem

 

 7. 设计稿常见尺寸宽度

 

现在基本以750为准

 

7.2 动态设置html标签font-size大小

① 假设设计稿是750px
② 假设我们把整个屏幕划分为15等分（划分标准不一 可以是20份 也可以 是10等份）
③ 每一份作为html字体大小，这里就是50px
④ 那么在320px设备的时候，字体大小为320/15就是21.33px
⑤ 用我们页面元素的大小 除以不同的html字体大小会发现他们比例还是相同的
⑥ 比如以750为标准设计稿
⑦ 一个100*100像素的页面元素在750屏幕下，就是100/50 转换为rem 是2rem * 2rem 比例是1比1
⑧ 320屏幕下，html字体大小为21.33 则 2rem = 42.66px 此时宽和高都是 42.66 但是宽和高的比例还是1比1
⑨ 但是已经能实现不同屏幕下 页面元素盒子等比例缩放的效果

 

7.3 元素大小取值方法

① 最后的公式：页面元素的rem值 = 页面元素值（px）/（屏幕宽度 / 划分的份数）

② 屏幕宽度 / 划分的份数 就是html font-size的大小
③ 或者：页面元素的rem值 = 页面元素值（px）/ html font-size 字体大小

关心的尺寸 320px、360px、375px、384px、400px、414px、424px、480px 、540px、720px、750px

 

7.4 在less文件里面引入别的less文件 语法

//在 index.less中导入 common.less文件
@import "common";

 

8. 简洁高效rem适配方案flexible.js

① flexible.js 把当前设备划分为10等份
② 比如当前设计稿是750px，那么只需要把html文字大小设置为75px （750px / 10）就可以
③ 里面页面元素rem值：页面元素的px值 / 75
④ 剩余的 让flexible.js去算

github地址：http://github.com/amfe/lib-flexible

 

8.2 VSCode px转换rem插件 cssrem