1.先说说几个前端常用的几个单位的概论:

  • 1、px (pixel,像素)是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时一般都有DPI可选。Windows系统默认是96dpi,Apple系统默认是72dpi。
  • 2、em(相对长度单位,相对于当前对象内文本的字体尺寸)是一个相对长度单位,最初是指字母M的宽度,故名em。现指的是字符宽度的倍数,用法类似百分比,如:0.8em, 1.2em,2em等。通常1em=16px。
  • 3、pt (point,磅)是一个物理长度单位,指的是72分之一英寸。pt=1/72(英寸), px=1/dpi(英寸)
  • 4、rem(root em,根em):是CSS3新增的一个相对单位,这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,相对大小对比的是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

2.开始进入rem教程

1.先设置header里面的meta标签:

 <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

2.在header写上<script>标签

 <script type="text/javascript">
  document.documentElement.style.fontSize = document.documentElement.clientWidth / *100 + 'px';
</script>

问题:为什么要设置Html的font-size?

答:这里是设置html标签的font-size,上面概论红色字写的很清晰,页面元素使用rem单位时,是相对于这个html标签的font-size的大小为基础的。

问题:为什么是clientWidth/640?为什么要乘以100?

答:

1.是因为这里是作为一个基础数值,换个方向去想,这里先不乘以100以免产生误解。

例如:设计稿宽度是640px,有一个元素设计稿上的宽度是50px,设备物理宽度是320px,那么我们在页面上应该设置宽度为 width:50rem,相当于宽度是:50*(320/640)=25px;这里能正确算出在320px的设备上刚好占一半,其实可以想象为 rem=(320/640)。

2.一般浏览器的最小字体是12px,如果html的font-size=(320/640)px,相当于font-size=0.5px,那么这个数值就小于12px,会造成一些计算的错误,和一些奇怪的问题,*100后,font-size是50px,就可以解决这种字体小于12px的问题。

3. 为了计算方便   我们后面把比率乘以了100,(320/640)*100,那么相对应这个元素在设置数值的时候就需要除以100了(50/100),这样可以保证最后出来的数值不变.

3.设置好html的font-size,那么我们下面就可以开始编写根据设计稿的例子了。

设计稿是640px,有一个红色盒子宽高都是320px,里面的文字是32px,那么下面是这个例子的代码。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1">
<script type="text/javascript">
document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + 'px';
</script>
</head>
<body style="margin: 0 ;padding: 0;font-size: 0.32rem">
<div style="width: 3.2rem;height: 3.2rem ;background: red">
<span>danny.xie</span>
</div>
</body>
</html>

1.在iphone5下的情况,设备的物理像素是320px

1.在iphone6下的情况,设备的物理像素是375px

可以看到字体的大小和红色盒子的宽高跟设计稿上面的比例是保持一致的,这样就是rem适配不同设备的的基本用法,如上文有错误,欢迎指出和讨论,十分感谢。

一步步教你使用rem适配不同屏幕的移动设备的更多相关文章

  1. 了解真实的『REM』手机屏幕适配

    rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The ...

  2. 移动端使用rem适配及相关问题

    移动端适配方案,说多也很多.可以使用百分比布局,但百分比与em都是基于父元素进行计算的,在实际应用中不是很方便.使用rem不仅可以设置字体大小,块大小也可以设置.而且可以良好的适配各种终端,所以这方案 ...

  3. web app变革之rem(手机屏幕实现全适配)

    以往web移动适配,常规写法是:media only screen @media only screen and (min-device-width: 320px){ //针对iPhone 3 } @ ...

  4. 一步步教你搭建VS环境下用C#写WebDriver脚本

    一步步教你搭建VS环境下用C#写WebDriver脚本http://www.automationqa.com/forum.php?mod=viewthread&tid=3529&fro ...

  5. rem适配

    //REM适配new function() { var _self = this; _self.width = 640; // 设置默认最大宽度 _self.fontSize = 100; // 默认 ...

  6. 我写了个教程《一步步教你把ubuntu安装到U盘》

    一步步教你把ubuntu安装到U盘 作者 Val 2452013147@qq.com 原因: 由于某些原因(学生党),需要把ubuntu安装到U盘到处走,百度了一下,教程都不是很好,要么很复杂,要么不 ...

  7. webapp思路和rem适配极其viewport

    webapp在制作时候,页面上要加入viewport标签,用来进行适配; viewport的meta标签,指的是在移动端显示的时候,viewport是多大?移动端的浏览器是屏幕宽,viewport一般 ...

  8. 一步步教你读懂NET中IL(附带图)

    一步步教你读懂NET中IL(附带图) 接触NET也有1年左右的时间了,NET的内部实现对我产生了很大的吸引力,在msdn上找到一篇关于NET的IL代码的图解说明,写的挺不错的.个人觉得:能对这些底部的 ...

  9. 谈谈我的移动端rem适配方案

    最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...

随机推荐

  1. C语言一维数组复制

    /* * 通过自定义的函数memcpy实现复制功能,优点是不需要引用库函数 * 在windows平台下,通过sizeof测试发现: int 4字节 float 4字节 double 8字节 */ #i ...

  2. 矢量切片(Vector tile)番外一:Proj4js

    说明:番外篇是对正篇矢量切片(Vector tile)中提到的一些值得继续延伸的关注点继续进行探索和学习,所涉及的内容以解决实际问题为主要导向. 一.新的需求? 在完成了矢量切片的工作后,新的需求出现 ...

  3. angularJS+requireJS实现controller及directive的按需加载

    最近因为项目的比较大,需要加载的js文件较多,为了提高首屏页面的加载速度,需要对js文件进行按需加载,然后网上参考了一些资料,自己也深入研究一番之后,实现了按需加载控制器js文件及指令js文件的效果: ...

  4. ZooKeeper的不同类型的Znodes

    在ZooKeeper中有3个不同类型的znodes:persistent, ephemeral, sequential Persistent Znodes(默认)在ZooKeeper中,这是默认的zn ...

  5. 安卓的UI界面开发(初学者推荐)

    一  随便扯扯 用户界面设计是程序开发的一项重要内容.在界面设计的过程中,需要考虑如何制作出UI界面,怎么样控制UI界面两大块. 任何有编程常识的人都知道:软件界面是开发者添加控件,编写控件控制逻辑, ...

  6. VUE2.0实现购物车和地址选配功能学习第三节

    第三节 使用v-for渲染商品列表 1.使用vue-resource插件引入json数据 (注:在谷歌中调试打断点-- ,console还可以输出vm,res等属性列表,或者productList等一 ...

  7. 使用multer搭建一个图片接收服务器

    为了测试图片上传插件的上传功能是否好用,最近尝试搭建了一个接收图片的服务器,因为图片上传的编码格式是form-data,所以我选择使用express+multer,实现过程中发现有几个需要注意的地方, ...

  8. for循环与foreach的区别

    for循环与foreach的区别 foreach 依赖 IEnumerable. 第一次 var a in GetList() 时 调用 GetEnumerator 返回第一个对象 并 赋给a, 以后 ...

  9. c风格字符串,字符串字面值,c++字符串

    C风格字符串:本质上就是以空字符null为结束符的数组 可以简单的理解为:有'\0'的是c风格字符串,无'\0'的是普通字符数组 字符串字面值:是一串常量字符,字符串字面值常量用双引号括起来的零个或多 ...

  10. jquery 日期获取

    来自:http://blog.csdn.NET/liujun198773/article/details/7554628  感谢 $(function(){ var mydate = new Date ...