CSS学习笔记：rem实现移动端适配的原理——媒体查询

移动端适配

移动端即手机端，也称M端

移动端适配：同一套移动端页面在不同屏幕尺寸的手机上可以实现宽度和高度的自适应，也就是页面中元素的宽度和高度可以根据屏幕尺寸的变化等比缩放

rem配合媒体查询可实现移动端适配

rem单位

媒体查询

媒体查询能够检测视口的宽度，然后编写差异化的CSS 样式

当某个条件成立, 执行对应的CSS样式

媒体特征

解释说明：max-width:200px; 代表视口宽度小于200px时样式生效

目前rem布局方案中，习惯将网页等分成10份，HTML标签的字号为视口宽度的1/10

代码示例：

将设计稿的px单位转化为rem单位

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

例如设计稿中某个元素的宽度时68px，设计稿的参考设备宽度是375px，那么元素宽度转化为rem为：N = 68 / 37.5

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

移动适配框架——flexible.js

在实际代码书写中，我们不可能真的用媒体查询去实现移动端适配，以上只是让大家了解rem实现移动端适配的原理，因为面试时，知道原理，你和面试官才有话聊

在实际代码书写中，我们会使用flexible.js来实现移动端适配。flexible.js是手淘开发出的一个用来适配移动端的js框架。核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size

当然，这只是JS阶段的一个移动端适配的解决方案，到了Vue，还会有其他方案解决移动端适配