meta标签

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

在HTML文件里添加meta标签,就是为了告诉浏览器,当前宽度就是设备的宽度,并且不允许用户缩放

媒体查询

通过媒体查询根据不同的屏幕分辨率来进行适配

@media (max-width:320px){
  body{
    background: green;
  }
}

rem

当我们指定一个元素font-size:2rem;,意思就是说这个元素的字体大小是根元素html字体大小的两倍,默认html的font-size:16px; 那么该元素字体小是32px. 所以,只要我们根据不同屏幕设置根元素html的font-size,那么rem就会自适应显示相对应的尺寸.

em和rem的区别

rem计算

<!--通过js来设置rem -->`
<script>
    var pageWidth = window.innerWidth
    document.write(
    '<style>
    html{
    	fontsize:'+pageWidth/10+'px;
    }
    </style>')
 </script>`

mixin

输入:

.element {
@include rem('padding',10px 0 2px 5px);
}

输出:

.element {
  padding: 10px 0 2px 5px;
  padding: 1rem 0 0.2rem 0.5rem;
}