03 rem适配布局

# 1.rem基础 #
>rem单位

-是一个相对单位。类似em,em是父元素字体大小

-不同的是rem的基准是相对于html元素的字体大小

-比如 根元素（html）设置font-size = 12px ;非根元素设置2rem 则换算成px就是24px

优点就是可以通过修改html里面的文字大小来改变页面中元素大小

# 2.媒体查询 #
## 2.1 媒体查询介绍 ##

媒体查询是css3新语法

- 使用@media查询，针对不同的媒体类型定义不同的样式

- @media可以针对不同的屏幕尺寸设置不同的样式

- 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面

- 目前针对很多苹果手机、安卓手机、平板手机都用得到

## 2.2 语法规范 ##

    @media mediatype and | not | only (media feature){
    css-code;    
    }

- 用@media 开头 注意 @ 符号

- mediatype 媒体类型

- 关键字and | not | only

-media feature 媒体特性 必须有小括号包含


1.mediatype

将不同的终端设备划分成不同的类型，称为媒体类型
    
    属性值    解释说明
    all        用于所有设备
    print    用于打印机和打印预览
    scree    用于电脑屏幕，平板电脑、智能手机

2.关键字
    
关键字将媒体类型或多个媒体特性链接到一起作为媒体查询的条件

    属性值    解释说明
    and        将多个媒体特性连接到一起 且的意思
    not        排除某个媒体类型， 相当于非的意思，可以省略
    only    指定某个特定的媒体类型，可以省略

3.媒体特性
各种媒体类型都有不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格

    属性值        解释说明
    width        定义输出设备中页面可见区域的宽度
    min-width    定义输出设备中页面最小可见区域宽度
    max-width    定义输出设备中页面最大可见区域宽度


css

     

<style>
        /* 在我们的屏幕上 最大的宽度是800像素 设置我们想要的样式*/
        
        @media screen and (max- 800px) {
            body {
                background-color: pink;
            }
        }
    </style>

## 2.3 媒体查询 + rem 实现元素动态大小变化 ##

rem单位跟着html来走的，有了rem页面元素可以设置不同大小尺寸

媒体查询可以根据不同设备宽度来修改样式

媒体查询+rem就可以实现不同设备宽度，实现页面元素大小变化

## 2.4 引入资源 ##

当样式比较繁多的时候，可以针对不同的媒体使用不同stylesheets（样式表）

原理，就是直接在link中判断设备的尺寸，引用不同的css文件  

## 3.less基础 ##
## 3.1 维护css的弊端 ##

css是一门非程序式语言，没有变量、函数、scope（作用域）等概念

- css需要书写大量看似没有逻辑的代码，冗余度太高

- 不方便维护以及扩展，不利于复用

- css没有很好的计算能力

- 非前端开发工程师经常会因为缺少css编写经验而很难写出组织良好且易于维护的css代码项目

## 3.2 less介绍 ##

css的扩展语言，css的预处理器
在css的语法上为css加入程序式语言特性
它在css的语言基础上引入变量，mixin(混入)，运算以及函数等功能，大大简化css的编写速度，降低css的维护成本。

## 3.3 less安装 ##
安装nodejs,可选择版本（8.0） 网址是：http://nodejs.cn.download/
检查是否安装成功 cmd(window + r 打开输入cmd) 输入"node-v"
基于nodejs在线安装less cmd 输入 "npm install -g less"
检查是否安装成功 cmd 输入"lessc-v"


## 3.4 less变量 ##

变量指没有固定的值

    @变量名:值;

> 变量名命名规范

- 必须有@为前缀

- 不能以数字开头

- 大小写敏感

## 3.5 less编译 ##

less包含一套自定义的语法及解析器，根据自己所写的样式规则，通过解析器，编译生成对应的css文件

使用vscode 中的 Easy LESS插件 less保存自动生成css文件

## 3.6 less嵌套 ##

如果遇见（交集|伪类|伪元素选择器）

- 内层选择器的前面没有&符号，则它被解析为父选择器的后代

- 如果有&符号，它就被解析为父元素自身或父元素的伪类交集选择器、伪元素选择器

## 3.7 运算 ##

+ - * / 加减乘除

// 1.我们运算符的左右两侧必须敲一个空格隔开
// 2.两个数参与运算   如果只有一个数有单位，最后就以这个单位作为单位
// 3.两个数参与运算   如果2个数都有单位，而且不一样的单位  最后的结果以第一个单位为准

less

    @baseFont:50px;
    html {
        font-size: @baseFont;
    }
    @border:5px + 5;
    div {
         200px - 50;
        height: 200px * 2;
        border: @border solid red;
    }
    img {
        82 / 50rem;
        height: 82rem / @baseFont;
    }

# 4. rem适配方案 #

1.让一些不能等比自适应的元素，达到当设备尺寸发送改变的时候，等比例适配当前设备
2.使用媒体查询根据不同设备按比例html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配

## 4.1 rem实际开发适配方案 ##

1.按照设计稿与设备宽度的比例，动态计算并设置html跟标签的font-size 大小（媒体查询）
2.css中，设计稿的元素宽和高、相对位置等取值，按照同比例换算为rem单位的值



技术方案1
less
媒体查询
rem

技术方案2（推荐）
flexble.js
rem


## 4.2 技术方案1 ##

rem + 媒体查询 + less 技术

1.设计稿常见尺寸

    设备            常见宽度
    iphone4.5    640px
    iphone678    750px
    安卓            常见320px、360px、375px、384px、400px、414px、500px、720px大部分4.7-5寸的安卓设备为720px

一般情况下，以一套或者两套效果图适应大部分的屏幕，放弃极端屏或对其优雅降级，牺牲一些效果

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

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

3.元素取值大小办法

    最后的公式：页面元素的rem值 = 页面元素值（px）/ (屏幕宽度/划分份数)
    屏幕宽度/划分的份数就是html font-size 的大小
    

## 4.3 技术方案2 ##

flexble.js + rem

不需要去写媒体查询
原理是把当前设备划分为10等份，但是不同设备下，比例一致的
只需确定当前设备的html文字大小就可以了

剩余的，让flexible.js来去算

github地址：https://github.com/amfe/lib-flexible](https://link.jianshu.com/?t=https://github.com/amfe/lib-flexible

总结：

因为flexible是默认将屏幕分为10等分

但是当屏幕大于750的时候希望不要再去重置html字体了

所以要自己通过媒体查询设置一下

并且要把权重提到最高

VSCode  px 转换rem 插件 cssrem 

因为cssrem中css自动转化为rem是参照默认插件的16转换的所以需要自己配置