移动web开发之rem响应式设计

我是使用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- 481px){
    $base_fontSize:$base_fontSize*94%;
    html {
        font-size: 1rem!important;
    }
}
@media only screen and (min- 561px){
    $base_fontSize:$base_fontSize*109%;
    html {
        font-size: 1rem!important;
    }
}
@media only screen and (min- 641px){
    $base_fontSize:$base_fontSize*125%;
    html {
        font-size: 1rem!important;
    }
}

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