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

rem就是根元素(即:html)的字体大小。html中的所有标签样式凡是涉及到尺寸的(如: height,width,padding,margin,font-size。甚至,left,top等)你都可以放心大胆的用rem作单位。

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

  1. html{
  2. font-size:62.5%; /* 10÷16=62.5% */
  3. }
  4. body{
  5. font-size:12px;
  6. font-size:1.2rem ; /* 12÷10=1.2 */
  7. }
  8. p{
  9. font-size:14px;
  10. font-size:1.4rem;
  11. }

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

  1. html {
  2. font-size: 62.5%;
  3. }
  4. @media only screen and (min-width: 481px){
  5. html {
  6. font-size: 94%!important;
  7. }
  8. }
  9. @media only screen and (min-width: 561px){
  10. html {
  11. font-size: 109%!important;
  12. }
  13.  
  14. }
  15. @media only screen and (min-width: 641px){
  16. html {
  17. font-size: 125%!important;
  18. }
  19. }

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

  1. html {
  2. font-size: 62.5%; /* 10÷16=62.5% */
  3. }
  4. @media only screen and (min-width: 481px){
  5. html {
  6. font-size: 94%!important; /* 15.04÷16=94% */
  7. }
  8. }
  9. @media only screen and (min-width: 561px){
  10. html {
  11. font-size: 109%!important; /* 17.44÷16=109% */
  12. }
  13.  
  14. }
  15. @media only screen and (min-width: 641px){
  16. html {
  17. font-size: 125%!important; /* 20÷16=125% */
  18. }
  19. }

给margin padding 设置rem

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

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

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

给height width 设置rem

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

  1. height:100px; /* 100 ÷ 20 = 5rem;*/
  2. width:50px; /* 50 ÷ 20 = 2.5rem;*/

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

  1. 用rem来做响应式开发

    强烈推荐这篇文章:<web app 变革之rem> px转rem工具:<px转rem工具> 由于最近在做公司移动项目的重构,因为要实现响应式的开发,所以大量使用到了rem的单位 ...

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

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

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

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

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

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

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

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

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

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

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

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

  8. 借鉴bootstrap的方法,快速实现响应式开发

    响应式开发 注意:任何框架都是一个辅助手段,只需借鉴其中的核心思想,把其中核心的东西提炼出来即可.不要因为,提到响应式就想到只能够用bootstrap来实现,框架现有的东西是可以提高我们的效率,但是其 ...

  9. springboot 使用webflux响应式开发教程(二)

    本篇是对springboot 使用webflux响应式开发教程(一)的进一步学习. 分三个部分: 数据库操作webservicewebsocket 创建项目,artifactId = trading- ...

随机推荐

  1. Android里面安装windows系统

        安装前请确认以下条件:①:存储卡需要有大于302M的空间. 下载安装:1.下载文件并安装:①:下载地址:http://kuai.xunlei.com/d/hWIkAAIkJwAawgZUa3c ...

  2. 【Coursera】因子分析模型

    一.协方差矩阵 协方差矩阵为对称矩阵. 在高斯分布中,方差越大,数据分布越分散,方差越小发,数据分布越集中. 在协方差矩阵中,假设矩阵为二维,若第二维的方差大于第一维的方差,则在图像上的体现就是:高斯 ...

  3. 31_网络编程(Socket套接字编程)_讲义

    今日内容介绍 1.网络三要素及传输协议 2.实现UDP协议的发送端和接收端 3.实现TCP协议的客户端和服务器 4.TCP上传文件案例 01网络模型 *A:网络模型 TCP/IP协议中的四层分别是应用 ...

  4. 上传插件(WebUploader)

    官网:http://fex.baidu.com/webuploader/插件下载:https://github.com/fex-team/webuploader/releases/download/0 ...

  5. sql中Union和union all的使用

    该文转载自:http://www.cnblogs.com/chaobaojun/archive/2009/12/24/1631508.html 在MS-SQL如果将两个或更多查询的结果组合为单个结果集 ...

  6. beta阶段成果展示博客

    跟着我们一一点一点揭开蒙娜丽莎的微笑 - 本次beta阶段之前,我们团队,对其他组在事后诸葛亮期间对我们的评价进行深刻的审视,特别是缺点方面,开了好几次的站立会议,专门讨论beta的主要方向和任务.最 ...

  7. QTime的本质上是一个int,QDateTime本质上是一个qint64

    研究这个问题的起因发现使用<=比较时间的不准确,所以怀疑是一个浮点数(Delphi里的time就是一个浮点数).结果却发现是一个int class Q_CORE_EXPORT QTime { e ...

  8. 常见meta标签记录

    关于meta <meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. <meta> 标签位于文档的头部,不包含 ...

  9. springboot学习笔记-2 一些常用的配置以及整合mybatis

    一.一些常用的配置 1.1 使用没有父POM的springboot 通过添加scope=import的依赖,仍然能获取到依赖管理的好处: <dependencyManagement> &l ...

  10. 绿色计算大赛决赛 第二阶段 消息传递(斯坦纳树 状压dp+spfa)

    传送门 Description 作为公司老板的你手下有N个员工,其中有M个特殊员工.现在,你有一个消息需要传递给你的特殊员工.因为你的公司业务非常紧张,所以你和员工之间以及员工之间传递消息会造成损失. ...