what is rem ？

　　）css3中的计量元素大小的单位，类似px、pt、em。

　　）一种相对根元素font-size的计算方式。1rem = <html>'s font-size px (你懂就好)

　　）使用场景：每个元素的宽高、文字大小、行距、补白等一切可以使用长度单位的地方。

　　4）使用范例:

html{font-size:37.5px;}/*根元素的基础font-size被设置为37.5px，则1rem=37.5px*/

#box1{width:10rem;height:2rem;font-size:0.5rem;}/*box1的宽度10rem则被计算成宽度为375px，高度为75px，文字大小为18.25px；*/

#box1 .title{width:2rem;}/*title的宽度依旧相对于根元素计算，结果为75px*/

　rem在移动端的适配

　　由上面的例子可以看出，使用rem进行布局的网站，我们只需要修改根元素的font-size大小，则整个网页的元素均可以按照预期进行等比例的计算和适配。

　　比如，在上面的例子中，我们将html的font-size改为32px，那么box1的样式则变成了宽320px,高64px,文字大小则变为16px;

　　也就是说，在开发过程中，我们只要基于一种宽度的设备使用rem进行布局。然后使用js或css的media来根据宽度改变html的基础font-size。就可以适配各种移动端设备了。

　　

　　步骤如下：

　　　　）假设我们拿到了一张750px宽度的设计图。并且准备在iPhone6上进行调试，iphone6的屏幕宽度为375px，他们的比例是2：1；

　　　　　　初始过程：

　　　　　　　　设置<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"/>

　　　　　　　　设置html{font-size:37.5px} 　　

　　　　　　　　　　//为什么设置为37.5px？ 你也可以设置为其它的值。但为了易于换算和记忆，我们默认为每种屏幕设置他的基础font-size=（屏幕宽度/10px）;

　　　　　　开发过程：将每个元素设置的单位使用rem（任何原本使用px，em，pt的地方），数量为（设计图上的元素的实际px/2/37.5）rem；

　　　　　　...

　　　　　　好了，我们的页面已经开发完成了。

　　　　）此时，我们的页面，在iPhone6下面，已经是妥妥的了。那么如何兼容其它不同宽度的移动设备呢？

　　　　　　思路：改变每种不同宽度的设备的根元素的css属性，使其font-size值都为设备宽度/10px。

　　　　　　方案1：在页面头部插入一段JS。  //为什么是头部？--防止页面闪烁

(function() {

    var newRem = function() {

        var html = document.documentElement;

        html.style.fontSize = html.getBoundingClientRect().width / 10 + 'px';

    };

    window.addEventListener('resize', newRem, false);

    newRem();

})();

　　　　　　方案2：在css文件中增加媒体查询

@media (min-width: 320px){html{font-size: 32px;} }

@media (min-width: 360px){html{font-size: 36px;} }

@media (min-width: 375px){html{font-size: 37.5px;} }

@media (min-width: 384px){html{font-size: 38.5px;} }

@media (min-width: 414px){html{font-size: 41.4px;} }

@media (min-width: 448px){html{font-size: 44.8px;} }

@media (min-width: 480px){html{font-size: 48px;} }

@media (min-width: 512px){html{font-size: 51.2px;} }

@media (min-width: 544px){html{font-size: 54.4px;} }

@media (min-width: 576px){html{font-size: 57.6px;} }

@media (min-width: 608px){html{font-size: 60.8px;} }

@media (min-width: 640px){html{font-size: 64px;} }

@media (min-width: 750px){html{font-size: 75px;} }

@media (min-width: 800px){html{font-size: 80px;} }

@media (min-width: 1024px){html{font-size: 102.4px;} }

　　　　哪种方案更好些？

　　　　　　css适配了大部分主流的屏幕，并且轻量一些，不需要进行计算。

　　　　　　js根据具体的屏幕宽度进行精确的计算，可以适配全部的设备，

　　　　　　还是需要根据自己的使用场景进行选择。

rem的兼容性如何？

参考下图：

可以看到，一片飘绿，结果喜人。

rem进行适配的一些优点：

　　）相对改变viewport，rem的方式不变形，不模糊。

　　）相对于em，rem不相对于父级，所以不会导致混乱。

　　）相对于px，无需多说了。

　　）相对各种媒体查询进行自适应，rem的方式可以一键更改，省了无数代码，且维护方便。

rem的一些不适用场景

　　）想要在ipad or pc or 超级大屏设备 上使用。（好大一堆字&&图片和视频被拉模糊了）。

　　）想不出来了。

综上所述，rem可以在移动端开发过程中带来强大的便利性，他或许也有些许缺点，但瑕不掩玉，远远被它的众多优点的光芒覆盖，也将是未来的趋势。

使用rem来开发你的移动端网站的更多相关文章

  1. 手机移动端网站开发流程HTML5

    手机移动端网站开发流程HTML5 最近一直在研究移动手机网站的开发,发现做手机网站没有想象中的那么难.为什么会这么说呢?我们试想下:我们连传统的PC网站都会做,难道连一个小小的手机网站难道都搞不定吗? ...

  2. 移动端网站如何开发(电脑端网站到手机端网站我们需要在html代码中添加哪个meta标签)

    移动端网站如何开发(电脑端网站到手机端网站我们需要在html代码中添加哪个meta标签) 一.总结 一句话总结: 添加viewport标签:meta name="viewport" ...

  3. 九、响应式发：rem和less（适配移动端）

    一.响应式开发 响应式开发优先适配移动端又兼容到pc端 官网:https://less.bootcss.com/usage/ 教程:https://www.w3cschool.cn/less/ rem ...

  4. ubuntu下安装 gSOAP 用于C/C++开发web service服务端与客户端

    昨天在ubuntu下进行安装gSOAP,费了很多时间,没成功,今天又来找了大量教程资料,终于一次成功,这里写下自己的安装步骤和方法,供大家参考. 首先下载gsoap,我下载的是gsoap-2.8.1. ...

  5. 转: 基于netty+ protobuf +spring + hibernate + jgroups开发的游戏服务端

    from: http://ybak.iteye.com/blog/1853335 基于netty+ protobuf +spring + hibernate + jgroups开发的游戏服务端 游戏服 ...

  6. 适合新手：从零开发一个IM服务端（基于Netty，有完整源码）

    本文由“yuanrw”分享,博客:juejin.im/user/5cefab8451882510eb758606,收录时内容有改动和修订. 0.引言 站长提示:本文适合IM新手阅读,但最好有一定的网络 ...

  7. 4.2 万 Star！开发 Web 和移动端应用的全栈平台

    [导语]:Meteor 是一个用 JS 开发现代 Web 应用程序的平台.它是开源的,在 GitHub 上有 4.2 万 Star. Meteor 是什么? 官方文档是这样描述 Meteor 的:Me ...

  8. 网络编程之TCP客户端开发和TCP服务端开发

    开发 TCP 客户端程序开发步骤 创建客户端套接字对象 和服务端套接字建立连接 发送数据 接收数据 关闭客户端套接字 import socket if __name__ == '__main__': ...

  9. 移动端网站优化指南-WAP篇

    转载:http://seofangfa.com/mobile-seo/mobile-seo-guide.html 1.域名优化:启用短域名,例如:m.abc.com,便于用户记忆,方便搜索蜘蛛查找,减 ...

随机推荐

  1. c++的构造函数

    我刚学的知识:c++的构造函数.在在此之前一直都处于迷惑之中,现在怕忘.所以赶紧把他写下来,用来以后复习,可能有错误的地方,请大牛们指出来.c++知识相对与c来说更加抽象,但真明白了,也就那一回事.这 ...

  2. LinQ 组合查询与分页

    1.以开头查 public List<Car> Select1(string a){ return con.Car.Where(r => r.Name.StartsWith(a)). ...

  3. Android驱动开发前的准备

    最近看了一些Android驱动开发前需要知道的资料,收获很多,接下来就谈谈我自己的一些心得体会. Android在近几年时间发展迅速,已经成为智能手机操作系统的老大.不过,因为Android原生的代码 ...

  4. h5动画效果总结

    一些常用的h5效果,自己总结的,用的时候直接拿,方便快捷! 1.悬浮时放大: .one{transition:All 0.4s ease-in-out;-webkit-transition:All 0 ...

  5. 虚拟机安装Centos7 , 没有可用的网络设备【ifconfig 只有lo而没有eth0的解决办法】

    今天尝试再一次安装CentOS的时候,搞了半天不知何故上不了网络,网上的以下方式试了 也不管用,原因就是我下载的是CentOS7 64版本,从而导致了这个问题,具体如下描述: 第一次安装的时候,没有可 ...

  6. Ubuntu 16.04应用布署小记

    本系列文章记录了升级Ubuntu 16.04的布署过程 回到目录 10. Dokuwiki 将虚拟目录配置文件链接到Apache2的可用的配置文件库中 sudo ln -s /opt/dokuwiki ...

  7. [比较老的文章]三维渲染引擎 OGRE 与 OSG 的比较综述

    1 .引言随着计算机可视化.虚拟现实技术的飞速发展,人们对实时真实感渲染以及场景复杂度提出了更高的要求.传统的直接使用底层图形接口如OpenGL.DirectX开发图形应用的模式越来越暴露出开发复杂性 ...

  8. SQL 语句调优 where 条件 数据类型 临时表 索引

    基本原则 避免全表扫描 建立索引 尽量避免向客户端返回大数据量,若数据量过大,应该考虑相应需求是否合理 尽量避免大事务操作,提高系统并发能力 使用基于游标的方法或临时表方法之前,应先寻找基于集的解决方 ...

  9. ShowDoc部署手册

    ShowDoc介绍 关于ShowDoc的介绍,请访问:http://blog.star7th.com/2015/11/1816.html 环境依赖 1.必需环境 PHP5.3以上版本.php-gd库 ...

  10. Nginx与Lua利用fpm打成rpm包

    1.下载相关软件 需要软件有:Nginx,LuaJIT,ngx_devel_kit,ngx_lua等安装文件 安装Lua或者LuaJIT都是可以的,但是出于效率的考虑,推荐安装LuaJITshell& ...