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

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

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

发表评论 共有条评论 用户名: 密码: 验证码: 匿名发表