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

Document

* {

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;

}

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

在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的宽高的情况下,子级div就可以用百分比来表示了,截图如下

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

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

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

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

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

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

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

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

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

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

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

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

移动端页面使用rem布局

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

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

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

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

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

随机推荐

[转] struts.xml配置详解

转自:http://www.cnblogs.com/fmricky/archive/2010/05/20/1740479.html struts.xml是我们在开发中利用率最高的文件,也是Struts ...

使用pentaho工具将数据库数据导入导出为Excel

写在前面:本篇博客讲述的是如何使用pentaho工具快速的将数据库数据导出为Excel文件,以及如何将Excel文件数据导入数据库. 补充:使用此工具并不需要任何一句代码并能快速便捷解决实际问题,此工 ...

UVa 750 - 8 Queens Chess Problem

题目大意:八皇后问题,在一个8*8的棋盘上,放置8个皇后,使得任意两个皇后不在同一行上.不在同一列上.不在同一条对角线上,不过这道题预先给定了一个位置放置一个皇后,让你输出所有可能的答案. 经典的回溯 ...

LDA

2 Latent Dirichlet Allocation Introduction LDA是给文本建模的一种方法,它属于生成模型.生成模型是指该模型可以随机生成可观测的数据,LDA可以随机生成一篇由 ...

C#中连接MySQL数据

小结一下MySQL在C#中是如何连接的,并做一些简单的选择(SELECT).插入( INSERT).更新( UPDATE).删除(DELETE ) (一)连接 a) Firstly, you shou ...

搭建简单的FTP服务器

客户端部分主要使用C#提供的webclient类 (https://msdn.microsoft.com/library/system.net.webclient.aspx) 通过WebClient. ...

LOJ-10103(求删去割点后最多的连通分量)

题目链接:传送门 思路: (1)这道题的图可能不连通,所以需要多次Tarjan: (2)设置cut[i]=x数组表示第i个节点被删除后右多少个子图(这个只是在一个图中),如果是根节点就要-1,因为根节 ...

SPOJ 694 Distinct Substrings(不相同子串个数)

https://vjudge.net/problem/SPOJ-DISUBSTR 题意: 给定一个字符串,求不相同的子串的个数. 思路: #include #inclu ...

T分布(T-Distribution)

1.What is the T Distribution? T分布(也叫Student 's T分布)是一组与正态分布曲线几乎相同的分布,只是更短更胖一点.当有小样本时,使用t分布而不是正态分布.样本 ...

Access control configuration prevents your request from being allo

我发现在在XP环境下我输入网易的220.181.28.42也找不到网页,就跟在LINUX下一样 都揭示: 错误 您所请求的网址(URL)无法获取 --------------------------- ...