如何做响应式布局开发?
只要当前页面需要在移动端访问，必然加
<!--meta:vp [tab]-->
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
- 不加VP，不管手机设备有多宽，我们HTML页面的宽度都是980（如果在320的手机上观看HTML页面，为了保证保证把页面呈现全，需要HTML缩小大概三倍左右，所有内容都变小了），为了不让页面缩放，我们需要保证手机的宽度和HTML的宽度一致
width=device-width：让HTML的宽度和设备宽度保持一致
user-scalable=no:禁止手动缩放
- 2、在js里面添加vp
//=>JS中动态设置vp
var vp=document.createElement('meta');
vp.name='viewport';
vp.content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0';
document.head.appendChild(vp);
REM响应式布局开发
和px像素一样，它是一个CSS样式单位 PX：固定单位 REM：相对单位（相对于页面根元素[HTML]字体大小设定的单位）
真实项目中如何利用REM的这个特性实现响应式呢？
-
1、严格按照设计稿中提供的尺寸进行样式编写（不管是宽高、还是MARGIN、还是字体等），例如：设计稿是7501336的，设计稿中有一个300150的图片，我们布局的时候依然按照300*150布局...
-
2、我们在编写样式的时候，不要使用PX单位，所有的单位都统一换算为REM（此时我们需要让HTML的FONT-SIZE=100PX）
- 3、上述完成后，在750的手机上是没有任何问题的，但是在375的手机上肯定存在问题了（页面太大了），此时我们需要让页面中的所有样式，都整体缩小，才能达到响应式适配的目的
此时只需要把HTML的字体大小修改，那么之前所有以REM为单位的样式自动会跟着重新计算：
- 750设计稿：1REM=100PX
- 375的手机：375/750*100
- 就是最新HTML的字体大小，也是最新REM和PX的换算比例
当前设备的宽度/设计稿宽度*100=“当前手机下REM和PX的换算比例[HTML的字体大小]”`
REM等比缩放响应式布局：目前市场上，如果单独做移动端项目（项目只在移动端访问，PC端有单独的项目），我们选择响应式适配的最佳方案就是REM布局（当然细节处理可能会用到flex或者@media）
