使用CSS3的rem属性制作响应式页面布局的要点解析

其实rem不只是能应用到字体上面，还可以应用到长度和宽度上面，接下来看下我做的一个项目的首页吧。
Demo
    由于这个项目我设置了最大的宽度限制是640px,最小限制是320px,大家可以改变浏览器的分辨率或者通过手机访问看看效果。基本上在不同分辨率下都是差不多的展示效果，而且在手机移动终端下都是100%的撑开。这种响应式的效果，我想应该是最符合现在移动终端多样化的需求的，如果只是做几个特别适应的尺寸，例如320、480、340、600这种特定的尺寸，那真是要累死前端开发的同学了。但是如果用rem来实现就可以不用考虑上诉的问题也可以达到自适应了。
    这个效果对设计师的要求也是非常严格的，例如你需要指定一个规范的宽度进行设计，我们的设计师是按照640的宽度去设计的，实际设计图的宽度是640*2这样做的目的是为了在移动端能高清显示。小图标是采用CSS3的图标字体，不得不说这是个非常好的东西。

设置对应的响应式的html rem比例
    我们平常在使用长度单位都会使用px，但是在做上面的响应式的时候，需要用rem或者百分比的单位，大家可以看我的Demo代码。在上篇文章介绍了rem的字体设置计算方法：

CSS Code复制内容到剪贴板

html{   

    font-size:62.5%; /* 10÷16=62.5% */  

}   

body{   

    font-size:12px;   

    font-size:1.2rem ; /* 12÷10=1.2 */  

}   

p{   

    font-size:14px;   

    font-size:1.4rem;   

}  

通过设置html的font-size值来控制全局的rem输出，这段代码其实是这个rem的精髓所在，我在我的页面中设置了如下的代码来控制不同设备下的字体大小显示使其达到自适应：

CSS Code复制内容到剪贴板

html {   

    font-size: 62.5%;   

}   

@media only screen and (min-width: 481px){   

    html {   

        font-size: 94%!important;   

    }   

}   

@media only screen and (min-width: 561px){   

    html {   

        font-size: 109%!important;   

    }   

}   

@media only screen and (min-width: 641px){   

    html {   

        font-size: 125%!important;   

    }   

}  

看上面的代码，可能大家会觉得为什么要这样设置呢，其实这个是根据许多测试推算出来的，上面代码如果要转换城px会变成这样：

CSS Code复制内容到剪贴板

html {   

    font-size: 62.5%; /* 10÷16=62.5% */  

}   

@media only screen and (min-width: 481px){   

    html {   

        font-size: 94%!important; /* 15.04÷16=94% */  

    }   

}   

@media only screen and (min-width: 561px){   

    html {   

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!