【rem】什么是rem，如何使用rem

 rem基础

1.  em相对于父元素的字体大小来说的
2.  rem相对于html元素字体大小来说的
3.  rem的优点是可以通过修改html里面的文字大小来改变页面中元素的大小   可以整体控制

媒体查询

语法规范

@media mediatype and|not|only (media feature) {
    }
用@media开头
mediatype 是媒体类型
关键字 and / not / only
media feature媒体特性必须有小括号()包含

1. mediatype 查询类型

    all 用于所有设备

    print 用于打印机和打印预览

    scree 用于电脑屏幕、平板电脑、智能手机等

2. 关键字

    and 且

    not 非，可以省略

    only 指定某个特定的媒体类型，可以省略

3. 媒体特性

    width

    min-width 最小宽度

    max-width 最大宽度

注意！！屏幕尺寸要从小到大书写！

引入css文件资源

针对不同的屏幕尺寸，调用不同的css文件

针对不同的媒体使用不同css文件

从小到大 引用

语法规范

    <link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

rem适配方案

1. 让一些不能 等比 自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备

2. 使用媒体查询，根据不同设备设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化，元素尺寸也会发生变化，从而达到等比缩放的效果

实际开发适配方案

1. 按照设计稿于设备宽度比例，动态计算并设置html字体大小

2. css中，设计稿元素的宽高，相对位置等取值，按照同等比例换算为rem的单位的值

rem实际开发方案

1. 设计稿与实际尺寸

2. 动态设置html标签的fontsize大小

    可以划分为10-20等份

    不同屏幕下，页面比例相同