移动端布局rem

移动端布局和PC端布局相差很多,因为要考虑用户体验流畅等原因,移动端所用的样式越简洁越好,所需的样式也不多。这次就简单扯一扯如何移动端布局。

1、单位的选择

css单位有3种:

px:绝对单位

em:相对父元素的单位

rem:相对根元素(页面的html)的单位

在选择单位上,目前的常见单位有px,em,百分比,rem。前3种都比较常见,最后一种是CSS3的布局单位,它是基于整个页面设定的单位,em是相对于父元素本身,当字体本身发生变化,em就会发生变化,这样就会有许多问题。而rem是相对于整个页面的单位,即使内部再变化,rem的单位也是统一的。所以移动端布局我们选择的单位优先选择rem。

2、使用方法

我们用一下js,RT我们正常的页面是640的,除16后,rem的数值为40,我个人比较推荐40因为这个数值整数较多,而且也处于比较中间的位置,rem的数值相对于页面过小多大都会有影响,如果对基础不是很了解的可以看一下这位小伙伴的文章http://www.jianshu.com/p/b00cd3506782

引入后,我们就可以直接计算了,例如整个页面的宽度是640px我们转换后就是,16rem。

3、默认样式的清除


以上,只要我们涉及到曾经用px的部分我们就可以用rem来代替,同时百分比在这里面也是可以用的,剩下就靠耐心,毕竟遇到某些算数真的是要费脑子的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,809评论 1 92
  • 终于可以做点纯前端的工作了=。=之前不用rem的时候,我遇到了怎样的问题?设计师交给我的设计图(暂定尺寸为640x...
    stois阅读 834评论 0 1
  • 下面介绍两种方法:1.淘宝移动端:取 1/10 的屏宽 为1rem。然后全部转成rem为单位来布局。引入这个js就...
    索哥来了阅读 883评论 0 0
  • 刚开始做移动端web开发的同学应该都碰到过页面适配问题,为什么我在开发手机上调试好的页面在其他手机会有这样或那样的...
    留七七阅读 19,529评论 5 80
  • 对自己总是很宽容,没有安排过多的事情做让肉体劳累,后来才发现,反而让思想有了更多空闲挣扎。身体的懈怠使精神也变...
    白鹿与酒阅读 278评论 0 0