004 rem布局 --- 移动WEB开发
rem适配布局
1 rem基础
rem 单位;是一个相对单位，类似于em,em是父元素的字体大小（font-size）
rem相对于html元素的字体大小rem优点就是通过修改html里面的为大小来改变页面中元素的大小进行整体控制
html {
font-size:12px;
}
P {
height：10rem；
width: 10rem;
}
p盒子就变成了120*120px的盒子
2媒体查询 Media Query
媒体查询是 CSS3新语法
可以针对不同屏幕尺寸设置不同的样式
语法规范：
@media mediatype and|not|only (media feature) {
CSS-Code;
}
@media mediatype and|not|only (media feature) and|not|only (media feature) {
CSS-Code;
}
- 用
@media开头，注意@ mediatype类型：all（所有）、print、scree（用于电脑屏幕）
all:用于所有设备
print:用于打印机和打印预览
screen:用于电脑屏幕、平板电脑、智能手机等- 关键字 ：关键字将媒体类型或多媒体特性连接到一起作为媒体查询条件
and、not、only
and:可以将多个媒体特性连接到一起，相当于“且”的意思。
not:排除某个媒体类型，相当于“非”的意思，可以省略。
only:指定某个特定的媒体类型，可以省略。 - 媒体特性
每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。width、min-width、max-width
注意他们要加小括号包含
width: 定义输出设备中页面可见区域的宽度
min-width:定义输出设备中页面最小可见区域宽度
max-width: 定义输出设备中页面最大可见区域宽度
例如：
// 在我们屏幕上 并且 最大宽度是 800px 设置我们想要的样式
@media screen and （max-width:800px）{
body {
background-color:pink; //屏幕宽度小于等于800px,背景颜色为pink
}
}
screen and 必须要带上不能省略
数字后面必须要跟单位，800px ,px不能省略
3 媒体查询+rem实现动态大小变化
可以实现不同设备宽度，实现页面元素大小的动态变化
4 引入资源（理解）
当样式比较繁多的时候，我们可以针对不同的媒体使用不同的css文件（样式表）
原理： 直接在link中判断不同的尺寸，从而调用不同的css文件
宽度为320px-640px时，调用这个CSS执行:
(min-width:320px)”>
宽度大于640px时，调用这个CSS执行：
(min-width:640px)”>
5 less基础
Less中文网址：http://lesscss.cn/
css:是一门非程序语言，没有变量，函数，SCOPE(作用域)概念。冗余高；不好维护，不利于复用；不能很好的计算
Less: 是CSS扩展语言，也称为CSS预处理器。 [CSS常见预处理器：sass、less、stylus]
加入了程序式语言特性。在CSS语法基础上，引入了变量、混入（mixin）、运算以及函数等功能
less安装：
①安装node: 网址：http://nodejs.cn/download/
②检测node是否安装正确；cmd --输入 node -v 查看版本即可
③基于nodejs在线安装less,使用cmd “npm install -g less”即可(等待…安装成功)
④ 检测less是否安装成功，cmd ==>输入”lessc -v”即可
Less使用：
新建后缀名为.less的文件：在这个less文件里面书写less语句
less变量、less编译、 less嵌套、 less运算
Less变量：
语法：@变量名: 值; 例如：
less文件中：
@color: pink; //上面定义
body {
//下面使用
background-color: @color;
}
变量名规范：①必须有@为前缀 ②不能包含特殊字符 ③不能以数字开头 ④大小写敏感，区分大小写
错误：@1color @color~@#
less编译:
把我们的less文件，编译生成css文件，才能让html使用：
利用插件：vocode less插件： Easy less插件
每次写完less文件Ctrl+S保存就会自动编译成css文件
html中引用编译后的css文件less嵌套：
"header"> "#">***
less文件：
1. 子元素的样式直接写到父元素里面
.header {
//header样式
a {
//a样式
}
}
如果遇见：（交集选择器|伪类选择器|伪元素选择器）：
内层选择器的前面没有&符号，则它被解析为父选择器的后代；
如果有&符号，它就被解析为父元素自身或父元素的伪类
2. 交集选择器、伪类选择器、伪元素选择器，我们要在前面加&
a {
:hover {
}
} ===> a :hover {
} //变成了a的后代，生成a和:hover有空格
a {
&:hover {
}
} ==> a:hover{
}
less运算：
任何数字、颜色或者变量都可以参与运算。就是less提供了加(+)、减(-)、乘(*)、除(/)算术运算符
@border: 5px;
加法运算： @border: 5px + 5;
div {
width: 200px - 50;
height: (200px + 49px) * 2;
background-color: #666 - #222;
}
Img {
Width: 82 / 50rem;
}
注意：
1 运算符之间有空格隔开；
2 两个数参与运算，如果只有一个数有单位，最后结果以这个单位为准
3 两个数参与单位，如果两个数都有不一样的单位，最后的结果以第一个单位为准。
在一个less文件中导入另外一个less文件
语法： @import “less文件名”
@import： 导入意思 可以把一个样式文件导入到另外一个样式文件里面
link： 是把一个 样式文件引入到html页面里面
6 rem适配方案
适配目标使高度等比例变换
适配目标是让页面元素等比例缩放
6.1 技术方案1
less
媒体查询
rem
- 首先选取一套标准尺寸 750 为准
- 我们用屏幕尺寸 除以我们划分的份数 得到了html里面的文字大小，但是我们知道不同屏幕下得到的文字大小是不一样的
- 页面元素的rem值 = 页面元素在 750像素下的px 值 / htm 里面的文字大小l
元素大小取值法
①最后的公式：页面元素的rem值 = 页面元素值(px) / (屏幕宽度 / 划分的份数)
②屏幕宽度 / 划分的份数 就是html font-size 的大小
③或者：页面元素的rem值 = 页面元素值 （px） / html font-size字体大小
6.2 技术方案2 (更简单)
flexible.js
rem
github地址：https://github.com/amfe/lib-flexible 下载js文件
安装插件：VSCode px转换rem 插件cssrem (可以不需要less就自动转换)
插件默认的html文字大小 cssroot 16px 需要修改字体大小的值。设置里面输入cssroot来进行修改字体的大小
- 不需要写不同屏幕的媒体查询
- 原理是把当前的设备换份为10等份
- 确定好当前设备的html文字大小就可以了
- rem值：页面元素的px值 / 75
/* 如果我们屏幕超过了750px 那么我们就按照750px设计稿来走，不会让我们页面超过750px */
@media screen and (min-width:750px) {
html {
font-size: 75px!important; /*!important 提权*/
}
}