meta viewport
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
媒体查询
根据查询结果选择不同的css样式
<style>
@media (max-width: 500px) {
......
}
</style>
动态rem
通过根元素的字体大小来设置元素的宽高的,以此来达在不同屏幕尺寸中等比例缩放达到展现效果。
@function px( $px ){
@return $px/$designWidth*10 + rem;
}
$designWidth: 320px;
其中1rem = 根元素字体大小
