rem认知

rem

目标：能够使用rem单位设置网页元素的尺寸

• rem单位

1. 相对单位。
2. rem单位是相对于HTML标签的字号计算结果。
3. 1rem = 1HTML字号大小。

rem移动适配

目标：能够使用rem单位设置网页元素的尺寸

• 思考

1. 手机屏幕大小不同，分辨率不同，如何设置不同的HTML标签字号？
2. 设备宽度不同，HTML标签字号设置多少合适？

• 解决方法：媒体查询能够检测视口的宽度，然后编写差异化的css样式
• 使用媒体查询设置差异化css样式
• 写法

@media (width:320px) {
    html {
        font-size:32px;
    }
}

@media (媒体特性) {
    选择器 {
        css属性
    }
}

• 思考
• 1. 手机屏幕大小不同，分辨率不同，如何设置不同的HTML标签字号？
• 2. 设备宽度不同，HTML标签字号设置多少合适？
• 目前rem布局方案中，将网页等分成10份，HTML标签的字号为视口宽度的1/10

/* 视口宽度320px，根字号为32px */
@media (width:320px) {
    html {
        font-size:32px;
    }
}


/* 视口宽度375px，根字号为37.5px */
@media (width:375px) {
    html {
        font-size:37.5px;
    }
}


/* 视口宽度414px，根字号为41.4px */
@media (width:414px) {
    html {
        font-size:41.4px;
    }
}

rem适配原理

目标：是现在不同宽度的设备中，网页元素尺寸等比缩放效果

• 目标：计算68px是多少个rem？（假定设计稿适配375px视口）
• N*37.5=68 _ N=68/37.5
• rem单位尺寸

1. 确定设计稿对应的设备的HTML标签字号

• 查看设计稿宽度--确定参考设备宽度(视口宽度) --确定基准根字号（1/10视口宽度）

2. rem单位的尺寸

• rem单位的尺寸=px单位数值/基准根字号

flexible

目标：使用flexible js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果

• flexible.js是手淘开发出的一个用来适配移动端的js框架。
• 核心原理就是根据不同的视口宽度给网页中HTMl根节点设置不同的font-size。