移動端適配方案（待續）

weixin_34337265發表於2018-08-19

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

相關文章