响应式和移动端、响应式原理（媒体查询）

响应式和移动端、响应式原理（媒体查询）

一、响应式

概念： 任何尺寸的屏幕都会有一个适当的显示

移动端实现响应式：

1. 用百分比
2. 用rem配合js实现

rem：基于html字体大小

rem = 量取的宽度*100/750

实现步骤：

1. 引入js文件

<script src='js文件路径'></script>

2. js文件里的最后两个数字改成设计稿的宽度
3. 实现的时候，计算成对应的rem值即可

利用插件完成px转rem：

vscode： 插件搜索pxtorem

文件→首选项→设置→搜索→ pxtorem，将默认文字大小改为100px

选中需要转换的代码，alt+z一键转换。

webstorm： 插件搜索px2rem

文件→设置→最下面px2rem→root fontsize改为100px 快捷键alt+d单行转换alt+ctrl+d全部转换

4. 使用vm和vh

任意屏幕宽 = 100vw

vw = 量取的宽度*100/设计图的宽度

移动端必须设置的视口

   <meta name="viewport" content="width=device-width, initial-scale=1.0">