强烈推荐这篇文章:《web app 变革之rem》

px转rem工具:《px转rem工具》

由于最近在做公司移动项目的重构,因为要实现响应式的开发,所以大量使用到了rem的单位,觉得这个单位有点意思。但是现在貌似用他的人很少。上一篇文章我分享了淘宝写的一篇rem的介绍,介绍的非常全面,但是他们似乎都把关注点放在了字体单位上了,其实rem不只是能应用到字体上面,还可以应用到长度和宽度上面,接下来看下我做的一个项目的首页吧。

Demo

由于这个项目我设置了最大的宽度限制是640px,最小限制是320px,大家可以改变浏览器的分辨率或者通过手机访问看看效果。基本上在不同分辨率下都是差不多的展示效果,而且在手机移动终端下都是100%的撑开。这种响应式的效果,我想应该是最符合现在移动终端多样化的需求的,如果只是做几个特别适应的尺寸,例如320、480、340、600这种特定的尺寸,那真是要累死前端开发的同学了。但是如果用rem来实现就可以不用考虑上诉的问题也可以达到自适应了。

这个效果对设计师的要求也是非常严格的,例如你需要指定一个规范的宽度进行设计,我们的设计师是按照640的宽度去设计的,实际设计图的宽度是640*2这样做的目的是为了在移动端能高清显示。小图标是采用CSS3的图标字体,不得不说这是个非常好的东西。

设置对应的响应式的html rem比例

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

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的精髓所在,我在我的页面中设置了如下的代码来控制不同设备下的字体大小显示使其达到自适应:

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会变成这样:

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 {
        font-size: 109%!important; /* 17.44÷16=109% */
    }

}
@media only screen and (min-width: 641px){
    html {
        font-size: 125%!important; /* 20÷16=125% */
    }
}

给margin padding 设置rem

上面展示的是怎么通过计算获取到不同分辨率下的html font-site百分比的值。实际开发如果设计师是按照640的宽度去设计的,我们就按照最大的640去切图,切图的时候如果我们要设置margin怎么banner,设计图的值加入是10px的间距,我们通过640的比例去计算:

margin-top:.5rem; /*10 ÷ 20 = 0.5*/
padding-top:1rem /* 20 ÷ 20 =1 */

上面分别是设计图上的间距10px和20px计算成rem的方法,大家可以以此类推,如果你的设计图是640设计的就可以用上面的方法,反正每次以最大的值来计算就可以了。

给height width 设置rem

实际开发中大家最常设置的估计就是height width值了,为了做到各个设备下长度自己相应,许多开发人员会用百分比来做,这个是没有问题,但是其实很多场景下用rem比百分比更加灵活,在我实际开发中,一般我只在大块的div布局里面用百分比,元素的设置一般都用rem来。例如:

height:100px; /* 100 ÷ 20 = 5rem;*/
width:50px; /* 50 ÷ 20 = 2.5rem;*/
给border 设置rem

其实就连border我们也可以用rem来做,但是貌似现在的安卓手机对border用rem单位有一小部分不支持,在我开发测试发现了,高版本的安卓浏览器支持,但是低版本的有许多都不支持,具体要不要使用就看你们自己的情况。

border:.2rem solid #cccccc;

总结

rem的使用其实我可能是只是总结了大家比较常用的一些属性,其实他的范围肯定不止是这么多,实际的项目开发中我相信大家在使用他的过程会发现许多惊喜的,非常希望大家留言讨论这一章的内容。有什么问题我会第一时间反馈。

最后在看下我的 Demo  

 

强烈推荐这篇文章:《web app 变革之rem》

px转rem工具:《px转rem工具》

转载请注明来自 520UED http://www.520ued.com/article/53e98eafbb16a74c41b5de77

 

用rem来做响应式开发的更多相关文章

  1. 用rem来做响应式开发(转)

    由于最近在做公司移动项目的重构,因为要实现响应式的开发,所以大量使用到了rem的单位,觉得这个单位有点意思.但是现在貌似用他的人很少.上一篇文章我分享了淘宝写的一篇rem的介绍,介绍的非常全面,但是他 ...

  2. 用rem做响应式开发

    设置对应的响应式的html rem比例 rem就是根元素(即:html)的字体大小.html中的所有标签样式凡是涉及到尺寸的(如: height,width,padding,margin,font-s ...

  3. rem布局完成响应式开发,通俗且详细的原理解析和代码实现

    一.rem布局基本原理 原理:rem可以理解为一个长度单位,单位rem的值等于网页font-size的值.如果网页的字体大小为默认值16px,那么1rem就等于16px,0.5rem等于8px. 根据 ...

  4. 使用rem来做响应式布局(js动态加载)

    <script> ;(function (doc,win) { var htmlEle=doc.documentElement; var reload="orientationc ...

  5. 移动端使用rem同时适应安卓ios手机原理解析,移动端响应式开发

    rem单位大家可能已经很熟悉,rem是随着html的字体大小来显示代表宽度的方法,我们怎样进行移动端响应式开发呢 浏览器默认的字体大小为16px 及1rem 等于 16px 如果我们想要使1rem等于 ...

  6. 《微信小程序七日谈》- 第二天:你可能要抛弃原来的响应式开发思维

    <微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩 上篇文 ...

  7. 基于screen.width的伪响应式开发

    一.站在用户的角度看问题 一个用户,访问一个web页面的真实场景是怎样的呢? 下面是某用户访问某站点的一个场景: 1. 小明打开了自己的电脑,访问了鑫空间-鑫生活: 2. 小明体内洪荒之力无法控制,疯 ...

  8. 带你玩转JavaWeb开发之五-如何完成响应式开发页面

    响应式页面开发 使用BootStrap开发一个响应式的页面出来 响应式开发就是同一个页面在PC端与手机端Pad端显示不同的效果,以给用户更好的体验 需求分析 开发一套页面,让用户能够在PC端, Pad ...

  9. BootStrap常用组件及响应式开发

    BootStrap常用组件 PS:所有的代码必须写在<class="container/container-fluid">容器当中 常用组件包含内容: 字体图标 下拉菜 ...

随机推荐

  1. PHP换行符详解 PHP_EOL,<br />

    1.PHP_EOL:用于文本的换行符,经常用于日志文件记录.可以解决: 在windows中\r\n是换行在Mac中\r是换行在Liunx中\n是换行 不统一的问题. 2. <br /> : ...

  2. econ

    1) If Ep > 1, Demand is elastic. 2) If Ep < 1, Demand is inelastic 3) If Ep = 1, Demand has un ...

  3. Octopus系列之系统中的价格

    系统中的价格 产品原价格  计算=Round(数据库数值[默认USD]*汇率)[Round的意思说:对价格做小数位的截取]产品原价格  展示=Currency(产品原价格  计算)[给大家说明一下什么 ...

  4. [Js]无缝滚动

    效果: 1.默认缓慢往左滚动 2.放到左箭头上还是向左滚动,放到右箭头上向右滚动 3.放到图片上停止滚动,移出继续滚动 思路: 1.计算图片列表ul的宽度 2.开启定时器,使其向左边距不断增大,造成向 ...

  5. "QQ尾巴病毒"核心技术的实现原理分析

    声明:本文旨在探讨技术,请读者不要使用文章中的方法进行任何破坏. 2003这一年里,QQ尾巴病毒可以算是风光了一阵子.它利用IE的邮件头漏洞在QQ上疯狂传播.中毒者在给别人发信息时,病毒会自动在信息文 ...

  6. Zabbix源码包安装

    Zabbix源码包安装 Cenos5.3 Basic server 安装顺序 Libxml2 Libmcrypt Zlib Libpng Jpeg:需要创建目录jpeg  /bin  /lib   / ...

  7. [开发笔记]-多线程异步操作如何访问HttpContext?

    如何获取文件绝对路径? 在定时器回调或者Cache的移除通知中,有时确实需要访问文件,然而对于开发人员来说, 他们并不知道网站会被部署在哪个目录下,因此不可能写出绝对路径, 他们只知道相对于网站根目录 ...

  8. 分布式一致性原理—BASE

    定义 BASE是BasicallyAvailable(基本可用).Soft state(软状态)和Eventually consistent(最终一致性)三个短语的简写,是由来自eBay的架构师Dan ...

  9. cvWaitKey

    OpenCV中的一个函数 函数原型为: C++: int waitKey(int delay=0) Python: cv2.waitKey([delay]) → retval C: int cvWai ...

  10. Ubuntu 14.10 下sed命令详解

    简介 sed 是一种在线编辑器,它一次处理一行内容.处理时,把当前处理的行存储在临时缓冲区中,称为“模式空间”(pattern space),接着用sed命令处理缓冲区中的内容,处理完成后,把缓冲区的 ...