在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的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

1 <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的深入理解我就不多解释了

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

 
  1 <!DOCTYPE html>

  2 <html lang="en">

  3

  4 <head>

  5     <meta charset="UTF-8">

  6     <title>Document</title>

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

  8     <script>

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

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

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

 12     </script>

 13     <style>

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

 15

 16         * {

 17             padding: 0;

 18             margin: 0;

 19         }

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

 21         div {

 22             margin: 0.833333333rem 0;

 23         }

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

 25         a {

 26             text-decoration: none;

 27         }

 28

 29         .one {

 30             width: 30rem;

 31             /*100/720*30*/

 32             height: 4.166666667rem;

 33             /*图片宽750,高100*/

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

 35             background-size: contain;

 36         }

 37

 38         .two {

 39             width: 30rem;

 40             /*400/720*30*/

 41             height: 16.6666667rem;

 42             /*图片宽750,高400*/

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

 44             background-size: contain;

 45         }

 46

 47         .three {

 48             width: 30rem;

 49             height: 5.875rem;

 50             /*图片宽750,高141*/

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

 52             background-size: contain;

 53         }

 54

 55         .four {

 56             width: 28.33333333rem;

 57             height: 13.16666667rem;

 58             /*图片宽750,高316*/

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

 60             background-size: contain;

 61             margin-left: 0.833333333rem;

 62             position: relative;

 63         }

 64

 65         span {

 66             position: absolute;

 67             display: block;

 68             width: 8.33333333rem;

 69             height: 2rem;

 70             line-height: 2rem;

 71             text-align: center;

 72             background: #fff;

 73             right: 0.833333333rem;

 74             bottom: 0.833333333rem;

 75             font-size: 0.95833333rem;

 76             color: red;

 77             cursor: pointer;

 78         }

 79

 80         .five {

 81             width: 28.33333333rem;

 82             height: 13.16666667rem;

 83             /*图片宽750,高316*/

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

 85             background-size: contain;

 86             margin-left: 0.833333333rem;

 87         }

 88     </style>

 89

 90 </head>

 91

 92 <body>

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

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

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

 96     <div class="four">

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

 98     </div>

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

100 </body>

101

102 </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. 移动端(手机端)页面自适应解决方案1（rem布局）---750设计稿

    设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作流程一般分为下面两种: 网易做法: 页面开头处引入下面这段代码,用于 ...

  4. Android开发之线性布局详解（布局权重）

    布局权重 线性布局支持给个别的子视图设定权重,通过android:layout_weight属性.就一个视图在屏幕上占多大的空间而言,这个属性给其设 定了一个重要的值.一个大的权重值,允许它扩大到填充 ...

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

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

  6. Android布局详解之一：FrameLayout

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

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

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

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

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

  9. 【翻译】Anatomy of a Program in Memory—剖析内存中的一个程序（进程的虚拟存储器映像布局详解）

    [翻译]Anatomy of a Program in Memory—剖析内存中的一个程序(进程的虚拟存储器映像布局详解) . . .

随机推荐

  1. CSS3——制作图片翻页的小动画

    觉得还挺有意思的嘻嘻~ 这里有一个问题要注意一下,图片反转过程中可能会遇到一种如下所示的跳变bug: 这玩意一出来吓我一大跳,显然这种用户体验是很不好的,解决方法: 在.pic, .info{...} ...

  2. linux运维、架构之路-Kubernetes离线、二进制部署集群

    一.Kubernetes对应Docker的版本支持列表 Kubernetes 1.9 <--Docker 1.11.2 to 1.13.1 and 17.03.x Kubernetes 1.8 ...

  3. 弹性盒子FlexBox简介（一）

    一.理解弹性盒子 弹性盒子是CSS3的一种新的布局模式. CSS3弹性盒子(Flexible Box或flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时,确保元素拥有恰当的行为的布局方 ...

  4. springboot + 注解 + 拦截器 + JWT 实现角色权限控制

    1.关于JWT,参考: (1)10分钟了解JSON Web令牌(JWT) (2)认识JWT (3)基于jwt的token验证 2.JWT的JAVA实现 Java中对JWT的支持可以考虑使用JJWT开源 ...

  5. Navicat 出现的[Err] 1146 - Table 'performance_schema.session_status' doesn't exist已解决

    [Err] 1146 - Table 'performance_schema.session_status' doesn't exist已解决   刚刚接触MySQL,就往数据库添加数据,就遇到这个问 ...

  6. php array_shift()函数 语法

    php array_shift()函数 语法 作用:删除数组中第一个元素,并返回被删除元素的值.富瑞联华 语法:array_shift(array) 参数: 参数 描述 array 必需.规定数组. ...

  7. tarjan相关模板

    感性理解: o(*￣︶￣*)o  ^_^ \(^o^)/~ 1. 当根节点有大于两个儿子时,割掉它,剩下的点必然不联通(有两个强连通分量),则他为割点. 那么对于非根节点,在无向图G中,刚且仅当点u存 ...

  8. 【bzoj3162】独钓寒江雪

    *题目描述: *题解: 树哈希+组合数学.对于树的形态相同的子树就一起考虑. *代码: #include <cstdio> #include <cstring> #includ ...

  9. 手动写Makefile编译Android NDK的so

    之所以摒弃NDK,是因为NDK编译出来的so太大,而且导出表总有一些没用的符号.而且手动编译的话,可以得到编译过程中间的.i和.s文件,可以删除一些没用的汇编代码.现在代码列出来:我的NDK C的代码 ...

  10. 20160520—JS打分控件

    效果预览: 可实现功能:鼠标在滑动条内左右滑动,文本框内分数变动:文本框输入数字,滑动条长度自动改变. JavaScript代码: $(function () { scoreFun($("# ...