rem+vw+媒体查询 响应式开发

理解

1. 如标题所示，rem相信大家都不陌生，vw也不陌生，近年来用vw的人也是越来越多，那么我觉得rem+vw布局是非常不错的响应式选择（不考虑兼容性），那么单单用rem布局不行吗？？ 或者使用rem+js 来动态改变根元素字体大小，不行吗？？ 答案肯定是可以的，但是不够优雅，其实vw这个单位可以满足我么要求，来 一起算下公式：

    
    此时我们要用rem 假如 我们在1920设计稿下，定为1rem=20px（这个是自己定的，方便计算而已）
    
    1vw=整个屏幕视口的宽度1%
    假如我们设计师给我们的图是1920宽
    那么 100vw=整个屏幕视口的宽度=1920px (这个可以理解吧！)
         1px =1920/100 vw
         20px=1920/100*20 vw

vw 兼容性

这里为浏览器兼容性查询网站

设置

2. 此时 得到公式的我们 在html 根元素设置

        html {
            font-size: calc(100vw/1920*20); //此时在1920屏幕宽度下，html字体是20px，其他设计图同理
        }

字体

3. 现在在元素中已经可以使用rem来设置宽高了，但是字体太大了，这是我们可以给body增加字体样式

        html {
            font-size: calc(100vw/1920*100);
        }

        body {
            font-size: 16px;
        }

字体变化

4. 字体也设置完了，但是字体始终是16px，不会变，那么此时我们就要使用媒体查询，使用媒体查询之前请设置 Meta 标签

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

        @media screen and (max-width: 1280px) {
            body {
                font-size: 15px;
            }
        }
        @media screen and (max-width: 960px) {
            body {
                font-size: 14px;
            }
        }

在css中设置了媒体查询，屏幕<=1280px下，字体为15px, 屏幕<=960px下，字体为14px，这里自由发挥，视实际开发而定

自定义布局

5. 那么，现在的我们字体大小和元素宽高也自适应了，但是还有一个问题，比如我们版心是1280宽度居中的，1920-1280屏幕宽度下，我们的版心宽度不动，两边缩放，可以用媒体查询设置区间 1920-1280 版心宽度设为1280px固定宽度，等宽度小于1280，我们在设置为rem，自适应，其他布局类似，配合媒体查询调整。

小提示

6. 小tips，如果你用vscode，推荐使用 easy less 插件，在vscode中可以设置根元素字体大小。如有错误，请指出，欢迎大家交流！

"cssrem.rootFontSize": 20,