如何做响应式布局开发?

只要当前页面需要在移动端访问，必然加

    
    复制代码

• 不加VP，不管手机设备有多宽，我们HTML页面的宽度都是980（如果在320的手机上观看HTML页面，为了保证保证把页面呈现全，需要HTML缩小大概三倍左右，所有内容都变小了），为了不让页面缩放，我们需要保证手机的宽度和HTML的宽度一致

width=device-width：让HTML的宽度和设备宽度保持一致

user-scalable=no:禁止手动缩放

• 2、在js里面添加vp

//=>JS中动态设置vpvar 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）