按百分比布局,精度肯定不会有rem精确

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

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

     <title>Document</title>

     <style>

         * {

             padding: 0;

             margin: 0;

         }

         .one {

             width: 20%;

             height: 100px;

             float: left;

             background: red;

         }

         .two {

             width: 30%;

             height: 100px;

             float: left;

             background: blue;

         }

         .three {

             width: 50%;

             height: 100px;

             float: left;

             background: green;

         }

         .four {

             width: 50%;

             height: 50%;

             background: #fff;

         }

     </style>

 </head>

 <body>

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

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

     <div class="three">

         <div class="four"></div>

     </div>

 </body>

 </html>

meta就不多说了,同样在meta标签内

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

在body下面有三个div,其中第一个div样式如下,

.one {
width: 20%;
height: 100px;
float: left;
background: red;
}

在样式里面,可以看到width我设置为20%,在以容器body为父级

占据body的width的20%

但是height无法被设置为百分比,为什么?因为无法确定父级容器body的height

总之一句话，要想设置当前容器的高度或宽度百分比，必须“明确”知道父容器的高度或宽度

所以height只能用px来表示

可以看到在上面的例子中截取的代码

 .three {

             width: 50%;

             height: 100px;

             float: left;

             background: green;

         }

         .four {

             width: 50%;

             height: 50%;

             background: #fff;

         }

 <div class="three">

         <div class="four"></div>

 </div>

在已经确定父级div的宽高的情况下,子级div就可以用百分比来表示了,截图如下

Html5移动端页面自适应百分比布局的更多相关文章

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

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

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

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

  3. html5移动端页面分辨率设置及相应字体大小设置的靠谱使用方式

    对于html5移动端网页编写CSS网上有很多介绍的文章,但在实际使用过程中还是会纠结. 网上的资料太多,且大多都是技术介绍型,特别是针对android上,网上写的各种麻烦,各种复杂,各种不接地气儿.. ...

  4. Html5移动端页面布局通用模板暨移动端问题总结

    最近的移动端项目终于告一段落了,其中遇到了不少问题,在此和大家总结分享. 首先,说一下结构.一般的手机页面大致可以分为五块:head, content, foot,solidbar,dialog. 针 ...

  5. Swift - 使用Auto Layout和Size Classes实现页面自适应弹性布局

    在过去只有iphone4的时候,可以在代码里将一个可视单元的位置写死,这样是没问题的,但随着iPhone5,6的发布,屏幕尺寸有了越来越多种可能.这就要求App的UI控件具有在不同屏幕尺寸的设备上具有 ...

  6. 移动端web自适应适配布局解决方案

    100%还原设计图,要注意: 看布局,分析结构. 感觉难点在于: 1.测量精度(ps测量数据): 2.文字的行高. 前段时间写个移动端适配的页面(刚接触这方面),查了一些资料,用以下方法能实现: 1. ...

  7. 移动端页面使用rem布局

    阿里团队的高清布局方案代码 所谓高清方案就是根据设备屏幕的DPR(设备像素比,又称DPPX,比如dpr=2时,表示1个CSS像素由4个物理像素点组成) 动态设置 html 的font-size, 同时 ...

  8. 用css3解决移动端页面自适应横屏竖屏的思考

    之前对于横屏的webapp做过一些尝试,可是始终不是非常好的解决方式,前段时间又接触了类似的需求,尝试了感觉更好的解决方式. 之前的方法写的博客:移动网页横竖屏兼容适应的一些体会 这里举的样例还是平时 ...

  9. HTML5 移动页面自适应手机屏幕四类方法

    1.使用meta标签:viewport H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统. ...

随机推荐

  1. centos安装及配置

    centos安装 从网上下载最新的版本,用ultraiso做好系统盘,启动.安装过程没有什么可以说的,与其他发行版有点不同的是需要将安装包放到u盘根目录下(u盘容量最好大点,8~16G最好).开始没注 ...

  2. Java菜鸟学习笔记--面向对象篇(十八):对象转型&多态

    Polymorphism[多态] 简述: 面向对象多态性指的是:发送消息给某个对象,让该对象自行决定响应何种行为. 通过将子类对象引用赋值给超类对象引用变量来实现动态方法调用 多态的三个前提条件: 多 ...

  3. SET IDENTITY_INSERT详解

    声明:本博文摘自http://www.lmwlove.com/ac/ID500 自增列默认是不能插入显式值的,当我们试图给自增列插入值时,会报以下错误:当 IDENTITY_INSERT 设置为 OF ...

  4. 读写ini文件

    C# 使用文件流来读写ini文件 背景 之前采用ini文件作为程序的配置文件,觉得这种结构简单明了,配置起来也挺方便.然后操作方式是通过WindowsAPI,然后再网上找到一个基于WindowsAPI ...

  5. c语言：最长对称子串（3种解决方案）

    问题描述: 输入一个字符串,输出该字符串中最大对称子串的长度.例如输入字符串:“avvbeeb”,该字符串中最长的子字符串是“beeb”,长度为4,因而输出为4. 解决方法:中序遍历 一,全遍历的方法 ...

  6. RTB撕开黑盒子 Part 1: Datacratic's RTB Algorithms

    这篇文章是讨论Datacratic所用的统计和经济理论的一些内容.我们开发了real time bidding算法s.为了实现广告主的目标,我们的算法自动地利用其它广告主的次优策略,并再查看广告的底价 ...

  7. Windows应用商店API

    Windows应用商店API 动手实验 实验 8: Windows应用商店API 2012年9月 简介 编写Windows应用商店应用最令人瞩目的理由之一是您可以方便地将它们发布到Windows应用商 ...

  8. Android本地化资源目录详解

    我们可以设想,有两个不同分辨率的手机(320*480和480*800)要使用一些图像资源,为了使图像不失真,就需要为不同分辨率的手机指定不同的图像,为此就需要建立不同的资源目录. 在res目录中建立了 ...

  9. mybatis使用@param后掉的坑

    项目里面的一个分页拦截器内某段代码需要判断传入的参数是否属于摸个特定的类,如果不是就直接执行下面的流程,坑爹的@param,在DAO里传入的参数前面加上了这个注解,mabaits内部将传入的参数变成了 ...

  10. mysql数据库 触发器简单实例

    触发器(trigger):监视某种情况,并触发某种操作. 触发器创建语法四要素:1.监视地点(table) 2.监视事件(insert/update/delete) 3.触发时间(after/befo ...