Html5移动端页面自适应百分比布局
按百分比布局,精度肯定不会有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移动端页面自适应百分比布局的更多相关文章
- 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移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统. ...
随机推荐
- 朴素贝页斯分类法 c++实现
朴素贝叶斯法是基于贝叶斯定理与特征条件独立假设的分类方法.对于搞机器学习的同学们来说,这是相对简单但效果较好的模型. 朴素贝叶斯方法的理论 设输入为n维特征向量X={x1,x2,...,xn},输出为 ...
- 欧几里德算法及其扩展（推导&&模板）
有关欧几里德算法整理: 1.一些相关概念: <1>.整除性与约数: ①一个整数可以被另外一个整数整除即为d|a(表示d整除a,通俗的说是a可以被d整除),其含义也可以说成,存在某个整数k, ...
- LigerUI+MVC的应用1
[项目开发]LigerUI+MVC的应用(一) 近期因为稍微空闲有点时间,就晚上回家自己在随便写写代码,也就边写边记,中间主要采用了微软的MVC4.0框架.虽然目前公司也是使用的MVC的模式,但是因为 ...
- 关于在Java EE 下开发web，出现项目中的外部包没有tomcat的包的原因
在新建的项目的时候,要设置目标服务器运行环境,把那个设置成tomcat,这样,项目中就会有tomca的api
- linux 原生系统发送电子邮件 （在本地与因特网）
有用的资料在 Linux mail 命令 http://www.cnblogs.com/JemBai/archive/2012/01/24/2329136.html 还有这里 Linux系统下mail ...
- Java-继承的应用
class array { private int[] temp; private int foot; public array(int len) //为temp数组规定大小,并开辟空间,申 ...
- 深入浅出Mybatis-sql自动生成
本文提供了一种自动生成sql语句的方法,它针对的对象是有主键或唯一索引的单表,提供的操作有增.删.改.查4种.理解本文和本文的提供的代码需要有java注解的知识,因为本文是基于注解生成sql的.本文适 ...
- Dreamer 框架 比Struts2 更加灵活
winter 改名为Dreamer. 这次发布第二个版本. 这次修复了很多BUG 和完善了部分功能. 1.改进用户服务层 以后在服务层中只需要继承BaseSupport 泛型类 就可以实现对对象进行增 ...
- classnull100 - The 3n + 1 problem
新手发帖,很多方面都是刚入门,有错误的地方请大家见谅,欢迎批评指正 The 3n + 1 problem Background Problems in Computer Science are o ...
- HashMap 死循环的探究
大家都知道,HashMap采用链表解决Hash冲突,具体的HashMap的分析可以参考一下http://zhangshixi.iteye.com/blog/672697 的分析.因为是链表结构,那么就 ...