web移动布局之rem

流式布局和flex布局主要针对于宽度布局，那高度如何设置？

1.rem

rem(root em )一个相对单位，类似于em，em是相对于父元素的字体大小，而rem是相对于html元素的字体大小来说的。
rem的优点是可以通过修改html里面的文字大小font-size来改变页面元素的大小，可以实现整体控制

2.媒体查询

如果给html加了font-size：12px的话就固定死了，并不会随着页面的缩放来改变内容的大小，那就要引入媒体查询了
媒体查询（Media Query）是css3的新语法
1.使用@media可以针对不同的屏幕尺寸来设置不同的样式

语法规范：
@media mediatype and|not|only (media feature){
css_code;
}
1.用@media开头
2.media媒体类型  也就是终端设备
|值| 说明 |
|--|--|
|all  | 用于所有的设备|
|print  | 用于打印机和打印预览 |
| screen | 用于电脑屏幕，平板电脑，手机 |
3.关键字and not only

 - and就是将多个媒体特性连接到一起
 - not排除某个媒体类型
 - only指定某个特定的媒体类型

4.media fuature 媒体特性必需有小括号包含，其实就是大小

|值|  说明|
|--|--|
|  with| 宽度 |
| min-with |最小宽度  |
| max-with | 最大宽度 |

案例：根据页面的宽度来改变页面的颜色
注意的是一定要带单位px

案例：媒体查询＋rem

引入资源
也就是说将css写成多套，每一套都利用引用的方式将css引入进来

less基础

less是一门css扩展语言，也称为css预处理器，它在css的基础上增加了运算以及函数等功能，可以大大的简化css代码量
Less的中文网：http://lesscss.cn/
常见的css预处理器：sass less stylus
less的安装（百度）
1.安装node.js（百度)
2.先新建一个后缀为.less的文件，在这个文件里面书写less语句
less变量
变量是指没有固定的值可以改变的

语法：
@变量名：值；
1.首先必须@为前缀
2.变量名不能包含特殊字符
3.不能以数字开头
4.大小写敏感

less编译
要将后缀为less的编译为后缀为css的，需要通过一个解析器来编译生成css文件，这样才能为我们的html所用
1.用vscode插件 Easy LESS
2.装完后只需要保存一下less文件就能自动生成css文件
3.然后引用即可

less嵌套

less运算

rem适配方案
就是当设备尺寸发生变化的时候页面元素能够等比的适应当前的设备宽度
1.不同的设备尺寸就要使用媒体查询来设置html大小，要想适配的话就必须使用rem
技术方案有两种
1.less+媒体查询+rem
2.flexible.js+rem（代码简单但是原理比较复杂）

现在使用适配方案1
1.设计稿常见的尺寸宽度

设备	常见的尺寸
iphone4.5	640px
iphone678	750px
Android	320px 360px 375px 384px 400px 414px 500px 720px

2.动态的设置html标签的font-size大小

• 假设设计稿是750px，将整个屏幕划分为15等分，（也可以是10或20等分）
• 将每一份作为html字体的大小为50px
  
  案例：苏宁移动端首页
  技术选型：rem适配布局（rem+ less +媒体查询）

有一个神奇的插件可以将px值直接转换为rem

插件cssrem
要配置cssroot 根字体 配置好后要重启才能生效，根字体就是1rem=多少px，比如你设置了根字体为100，则1rem=100px，可以应用在，比如说当你设计稿是750px时，划分为15等份，那么1rem=750/15=50px。此时就可以将根文字设置为50了。