第一步:设置视口(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布局,细节不好处理。