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执行:

<link rel=”stylesheet” href=”css路径” media=”screen and  (min-width:320px)”>

宽度大于640px时，调用这个CSS执行：

<link rel=”stylesheet” href=”css路径” media=”screen and  (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嵌套：

<div class="header"> <a href="#">***</a> </div>

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

1. 首先选取一套标准尺寸 750 为准
2. 我们用屏幕尺寸 除以我们划分的份数 得到了html里面的文字大小，但是我们知道不同屏幕下得到的文字大小是不一样的
3. 页面元素的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 提权*/
    }
}