在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport,通读网上的各种对于viewport的解释之后

大概viewport可以理解为三种

1。layout viewport ,也就是这个浏览器默认的viewport

2。visual viewport  , 浏览器可视区域viewport

3。 ideal viewport  ,移动设备的理想viewport

通俗点讲，pc端css中的1px并不会等于移动端，原理很简单，举个例子说

通过chrome浏览器可以知道，一个Iphone 6 plus是414*736，而pc端的页面动辄几千px以上，所以css中的1px并不等于设备的1px

这也就意味着设备的1px等于多个csspx，也就是1px:Npx的关系

具体的解释我就不多说了，想要深入理解，可以跳转移动前端开发之viewport的深入理解

下面讲怎么设置viewport

<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=0">

为了达到理想移动设备viewport，可以用meta标签对viewport进行控制

而meta标签内可以有很多的属性，具体如下

width 设置layout viewport  的宽度，为一个正整数，或字符串"width-device"
initial-scale 设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数
height 设置layout viewport  的高度，这个属性对我们并不重要，很少使用
user-scalable 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

那么要得到ideal viewport就必须把默认的layout viewport的宽度设为移动设备的屏幕宽度。因为meta viewport中的width能控制layout viewport的宽度，所以我们只需要把width设为width-device这个特殊的值就行了

那么通过各大网友的测试，宽度都是竖屏时ideal viewport的宽度

但是这句话并不是所有浏览器都兼容的，那么为了使浏览器都有一个ideal viewport，content="initial-scale=1通过这句话使缩放比例为1

ideal viewport的效果就能正常实现了，这里我也是知其然而不知其所以然，具体的内容也可以通过跳转移动前端开发之viewport的深入理解我就不多解释了

下面上一个简单的移动端布局

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=0">

     <script>

         //通过window.screen.width获取屏幕的宽度

         var offWidth = window.screen.width / 30; //这里用宽度/30表示1rem取得的px

         document.getElementsByTagName("html")[0].style.fontSize = offWidth + 'px'; //把rem的值复制给顶级标签html的font-size

     </script>

     <style>

         /*偷个懒就直接全局初始化了*/

         * {

             padding: 0;

             margin: 0;

         }

         /* 布局需求,上下都间隔*/

         div {

             margin: 0.833333333rem 0;

         }

         /* 去处a标签的下划线*/

         a {

             text-decoration: none;

         }

         .one {

             width: 30rem;

             /*100/720*30*/

             height: 4.166666667rem;

             /*图片宽750,高100*/

             background: url("./img/head.png");

             background-size: contain;

         }

         .two {

             width: 30rem;

             /*400/720*30*/

             height: 16.6666667rem;

             /*图片宽750,高400*/

             background: url("./img/top1.jpg");

             background-size: contain;

         }

         .three {

             width: 30rem;

             height: 5.875rem;

             /*图片宽750,高141*/

             background: url("./img/top2.jpg");

             background-size: contain;

         }

         .four {

             width: 28.33333333rem;

             height: 13.16666667rem;

             /*图片宽750,高316*/

             background: url("./img/top3.jpg") no-repeat;

             background-size: contain;

             margin-left: 0.833333333rem;

             position: relative;

         }

         span {

             position: absolute;

             display: block;

             width: 8.33333333rem;

             height: 2rem;

             line-height: 2rem;

             text-align: center;

             background: #fff;

             right: 0.833333333rem;

             bottom: 0.833333333rem;

             font-size: 0.95833333rem;

             color: red;

             cursor: pointer;

         }

         .five {

             width: 28.33333333rem;

             height: 13.16666667rem;

             /*图片宽750,高316*/

             background: url("./img/top4.jpg") no-repeat;

             background-size: contain;

             margin-left: 0.833333333rem;

         }

     </style>

 </head>

 <body>

     <div class="one"></div>

     <div class="two"></div>

     <div class="three"></div>

     <div class="four">

         <a href=""><span>25元起</span></a>

     </div>

     <div class="five"></div>

 </body>

 </html>

可以看到，我每个div里面都使用的rem这个代替了px单位

没错就是用这两句句话来进行改变的

 var offWidth = window.screen.width / 30;

document.getElementsByTagName("html")[0].style.fontSize = offWidth + 'px';

就拿第一个div里的height和width来举例

width: 30rem;
100/720*30
height: 4.166666667rem;
图片宽750,高100

由于给的图里面第一块是720px宽，100px的高，web端我可以直接这么写，但是手机上肯定不行啊，因为屏幕只有这么宽

缩放比例必须是正好才行

通过window.screen.width，就已经获取了屏幕宽，那么/30就是宽度分成30份，既然我宽度是满屏，那么width=30rem

宽度有了，720是30rem，那么100是多少rem很好求了，完全是数学问题，100/720*30得到4.1666666667无限循环小数

本着小数越多就越精确的原则，我们取到小数点后面的9位，当然你喜欢20位也可以，不过好像浏览器并不支持

其他的div里的width和height也是以此类推，就不再重复说明了

还有一个图片显示的问题，要想图片按比例缩放，就要用到background-size:contain

效果如下

我们可以翻转以下，看看宽度是不是满屏的，如图

更新一下咯。真机测试发现横屏是不能铺满的，具体原因，最近没时间，等有空的时候再找一下原因

Html5移动端页面自适应布局详解(阿里rem布局)的更多相关文章

  1. Html5移动端页面自适应布局详解(rem布局)

    在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport,通读网上的各种对于viewport的解释之后 大概viewport可以理解为三种 1.layout viewport  ...

  2. Html5移动端页面自适应百分比布局

    按百分比布局,精度肯定不会有rem精确 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  3. Android 布局详解 -三表格布局（TableLayout）以及重要属性

              TableLayout跟TableRow 是一组搭配应用的布局,TableLayout置底,TableRow在TableLayout的上方,而Button.TextView等控件就 ...

  4. Android 布局详解

    Android 布局详解 1.重用布局 当一个布局文件被多处使用时,最好<include>标签来重用布局. 例如:workspace_screen.xml的布局文件,在另一个布局文件中被重 ...

  5. Grid 网格布局详解

    Grid网格布局详解: Grid布局与Flex布局有着一定的相似性,Grid布局是将容器划分成行和列,产生单元格,可以看做是二维布局. 基本概念: 采用网格布局的区域,称为"容器" ...

  6. Android开发重点难点1：RelativeLayout(相对布局)详解

    前言 啦啦啦~博主又推出了一个新的系列啦~ 之前的Android开发系列主要以完成实验的过程为主,经常会综合许多知识来写,所以难免会有知识点的交杂,给人一种混乱的感觉. 所以博主推出“重点难点”系列, ...

  7. Android布局详解之一：FrameLayout

      原创文章,如有转载,请注明出处:http://blog.csdn.net/yihui823/article/details/6702273 FrameLayout是最简单的布局了.所有放在布局里的 ...

  8. 弹性盒布局详解(display: flex;)

    弹性盒布局详解 弹性盒介绍 弹性盒的CSS属性 开启弹性盒 弹性容器的CSS属性 flex-direction设置弹性元素在弹性容器中的排列方向 主轴与侧轴(副轴) flex-wrap设置弹性容器空间 ...

  9. ASP.NT运行原理和页面生命周期详解及其应用

    ASP.NT运行原理和页面生命周期详解及其应用 1. 下面是我画的一张关于asp.net运行原理和页面生命周期的一张详解图.如果你对具体不太了解,请参照博客园其他帖子.在这里我主要讲解它的实际应用.  ...

随机推荐

  1. linux下的中文编码问题

    很多linux的初学者都会碰到这样一个问题:把windows下的文档拷到linux系统,会出现乱码!其实这涉及到中文编码的问题.linux系统默认的是统一码(utf8).而如果你的文件是big5,显然 ...

  2. twobin博客样式

    twobin博客样式—“蓝白之风”   自暑假以来,囫囵吞枣一般蒙头栽入前端自学中,且不说是否窥探其道,却不自觉中提高了对网页版面设计的要求,乃至挑剔.一个设计清爽美观的网页能让读者心旷神怡,甚至没有 ...

  3. C#串口通信程序详解

    C#串口通信程序详解 摘要:创建C#串口通信程序需要注意什么呢?创建C#串口通信程序的步骤是什么?那么本文就向你详细介绍创建C#串口通信程序集体的内容. 在.NET平台下创建C#串口通信程序,.NET ...

  4. 使用WCF扩展记录服务调用时间

    随笔- 64  文章- 0  评论- 549  真实世界:使用WCF扩展记录服务调用时间   WCF 可扩展性 WCF 提供了许多扩展点供开发人员自定义运行时行为. WCF 在 Channel Lay ...

  5. php面试题中的约瑟夫环

    最近忙着做面试题,看到一道题感觉比较有兴趣,查阅相关资料后发现这是一个约瑟夫环的问题. 一群猴子围成一圈,按1,2,3,4,....n一次编号.然后从第1值开始数,数到第m只,把它踢出圈,从它后面再开 ...

  6. ie7,8下__flash__addCallback报错原因及解决方案

    首先附张图,以直观说明错误的现象:(ie7.8)

  7. 通过xib自定义UITableViewCell

    通过xib自定义UITableViewCell 一.新建iOS Application工程,选择Single View Application,不要选中Use Storyboard.假设指定的是pro ...

  8. Profession ASP.NET MVC 2.0 NerdDinner示例可运行源码

    最近一段时间在看JonGalloway等著作的<Profession ASP.NET MVC 2.0>.本书并没有按照常规的大部头书籍那样,按部就班的介绍MVC的概念等,而是在第一章直接引 ...

  9. Asp.net Mvc4默认权限详细（上）

    Asp.net Mvc4默认权限详细(上) 前言 上篇的菜鸟去重复之Sql的问题还没有得到满意的答案.如果哪位大哥有相关的资料解释,能够分享给我,那就太谢谢了. 以后每发表一篇博文我都会将以前遗留的问 ...

  10. shell脚本作为保证PHP脚本不挂掉的守护进程实例

    前几天开始跑一份数据名单,名单需要提供用户名.是否有手机号.是否有邮箱,用户名单我轻易的获取到了,但是,用户名单有2000w之多,并且去检测用户是否有手机号.是否有邮箱必须得通过一个对外开放的安全接口 ...