移动web开发之rem响应式设计 - 放羊的星星bky_H5之家

我是使用sass来写css的，具体如下：

1、variable.scss

在variable.scss文件中定义一个变量$base_fontSize来设置基本字体大小（我使用的是百分比，即根据浏览器字体默认值再乘以这个百分比）。

//font-size $base_fontSize:62.5%;

2、base.scss

在base.scss中引入上面那个变量文件（sass语法请自行百度），然后设置html字体的初始值为$base_fontSize，接下来通过媒体查询根据移动设备屏幕大小对变$base_fontSize重新赋值，并对html字体大小重新赋值为1rem。这样就能很好的兼容超小手机至pad的所有屏幕。当然，每次对$base_fontSize进行重新赋值的百分比可以自己根据需要而定。

@import 'variable.scss'; html { font-size: $base_fontSize; } @media only screen and (min-width: 481px){ $base_fontSize:$base_fontSize*94%; html { font-size: 1rem!important; } } @media only screen and (min-width: 561px){ $base_fontSize:$base_fontSize*109%; html { font-size: 1rem!important; } } @media only screen and (min-width: 641px){ $base_fontSize:$base_fontSize*125%; html { font-size: 1rem!important; } }

3、在html页里引用base.scss生成的base.css文件即可