一个H5适配方案 使用方法如下
- 在元素内添加
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
目的在于定义viewport的宽度等于屏幕的宽度 - 引入flexible.js,在元素内添加
<script src="fexible.js"> </script>
, 如果HTML中没有添加过<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
,fexible.js会在文档中动态添加 - 编写CSS时元素的width/height、margin、padding等使用rem作为单位,属性的数值 = 设计稿上标注的数值 / 设计稿的宽度 可以使用sass函数减少px转化为rem的工作量:
@function rem($pixels, $design_draft_width: ?) {
@return $pixels / $design_draft_width + rem;
}
将?
改为设计稿的宽度