响应式布局

第一步：设置视口（viewport）

在html文件的head中写入以下代码：

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

快捷键是：

输入meta：vp，然后按Tab键。

作用：将html的宽度调整到与设备屏幕宽度相等。

第二步：根据设计稿设置根元素字体大小

在html文件的head中写入以下代码：

~(function(n){
    document.documentElement.style.fontSize=document.documentElement.clientWidth/n*100+'px';
})(n)

• n为设计稿的宽度，此段代码将根元素字体设置为100px。
• 之后再写设计稿元素尺寸时，表达为：设计稿尺寸/100rem

例：

img：宽100px,长200px.

img{
    width:1rem;
    height:2rem;
}

• 除了以上这种布局，还可以用百分比加媒体查询做出响应式布局，只是比较麻烦。
• 还可以用flex布局，细节不好处理。

各有所长吧，看场景需要，用哪一个自己定。