移动端适配方案（待续）

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 = 根元素字体大小