HTML5学习总结-番外05 响应式布局
1. 响应式布局
响应式布局是2015年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。其目的是为用户提欧共更加舒适的界面和更好的用户体验。
2.优缺点
优点：
1) 面对不同分辨率设备灵活性强
2）能够快捷解决多设备显示适应问题
缺点：
1）兼容各种设备工作量大，效率低下
2）代码累赘，会出现隐藏无用的元素，加载时间长。
3 语法
CSS3 media queries的语法如下，
@media only screen and (max/min-width/height: 960px) {
/* 样式定义 */
}
其中 “only screen” 参数表示限定当访问环境（媒体类型）为彩色屏幕设备时才生效。该参数可选值为 all | aural | braille | handheld | print | projection | screen | tty | tv | embossed除非该参数数值为all，否则可以在前面加个only限定类型。对于移动端和PC端，我们只需设为 "screen" 或 "only screen" 即可，建议使用后者，其语义更为严谨。
另一个参数 “max/min - width/height” 表示当屏幕的宽度/高度超过或者小于某个值时则生效，具体可以看下面的示例：
1）Max Width
@media only screen and (max-width:500px){
.outDiv {
margin: auto;
width: %;
height: %;
background: red;
}
}
该代码段表示只有当屏幕宽度小于500px时才生效。
2） Min Width
@media only screen and (min-width:500px){
.outDiv {
margin: auto;
width: %;
height: %;
background: red;
}
}
该代码段表示只有当屏幕宽度大于500px时才生效。
3） Max/Min Height
同 max/min-width ，表示当屏幕高度小于/大于设定值时样式才生效。
4） Multiple Media Queries
如果需要定义样式是在某个分辨率区间（比如500px-900px）才生效，就可以叠加使用 max/min-width/height 。
@media only screen and (mix-width:500px) and (max-width:900px){
.outDiv {
margin: auto;
width: %;
height: %;
background: red;
}
}
4 例子
1）PC端响应式布局例子参考bootstrap学习总结-02 网格布局
2）移动端响应式布局例子
<!doctype html><!--声明当前文档为html文档-->
<html lang="en">
<head><!--头部-->
<meta charset="UTF-8"><!--字符编码：utf-8国际编码 gb2312中文编码-->
<meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale = 1.0,minimum-scale = 1.0,maximum-scale=1.0">
<title>Document</title>
<style>
*{margin:0px;padding:0px;}
@media all and (orientation:portrait){
#box{width:300px;height:500px;background:red;}
}
@media all and (orientation:landscape){
#box{width:300px;height:200px;background:blue;}
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
尝试使用手机浏览器打开此页面，当旋转手机时可以看到效果。
HTML5学习总结-番外05 响应式布局的更多相关文章
- HTML5学习总结-番外05 移动终端适配
一 viewport 在使用移动端设备浏览网页时,移动端浏览器是直接把整个页面放到一个虚拟的视图里来显示的,通常来说这个虚拟的视图大小会比手机屏幕大,用户可以通过手势操作来平移.缩放这个视图. 如果不 ...
- HTML5学习总结-番外05 http 状态码
所有状态码汇总: 1xx(临时响应)表示临时响应并需要请求者继续执行操作的状态代码. 代码 说明100 (继续) 请求者应当继续提出请求. 服务器返回此代码表示已收到请求的第一部分,正在等待其 ...
- HTML5学习总结-番外03 Angular Ionic
一 Angular Angular使用了MVVC设计模式,MVVC在概念上是真正将页面与数据逻辑分离的模式,它把数据绑定工作放到一个JS里去实现,而这个JS文件的主要功能是完成数据的绑定,即把mode ...
- HTML5学习总结-番外04 Cordova/PhoneGap
一 PhoneGap 1 PhoneGap简绍 http://www.cnblogs.com/JustRun1983/p/3819433.html 2 环境安装 http://cordova.apac ...
- css3media响应式布局
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的 普及,用"大势所趋"来形容也不为过.随着越来越多的设计师采用这个技术,我们不仅看到很 ...
- [html5] 学习笔记-响应式布局
1.响应式布局介绍 响应式布局是2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是每一个终端做一个特定的版本.这个概念是为了兼容移动互联网浏览而诞生的,其目的是为用户提供 ...
- html5+css3+jquery完成响应式布局
响应式布局,流体布局,自适应布局,静态布局等等,这是移动设备的飞速发展,前端人员不得不跟上潮流的一个方向.实际上各种设备尺寸,分辨率大都不同,真的适应各种设备依旧是不现实的,首先是浏览器差异化,让我们 ...
- CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- html5 + css3 + jQuery + 响应式布局设计
1. [代码][HTML]代码 <!DOCTYPE html><html dir="ltr" lang="zh-CN">< ...
随机推荐
- ORA-14450: attempt to access a transactional temp table already in use
在ORACLE数据中修改会话级临时表时,有可能会遇到ORA-14550错误,那么为什么会话级全局临时表会报ORA-14450错误呢,如下所示,我们先从一个小小案例入手: 案例1: SQL> CR ...
- SQL Server 2008 R2——CROSS APPLY 根据数据出现的次数和时间来给新字段赋值
=================================版权声明================================= 版权声明:原创文章 禁止转载 请通过右侧公告中的“联系邮 ...
- python基础(七)函数
作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 函数最重要的目的是方便我们重复使用相同的一段程序. 将一些操作隶属于一个函数,以后 ...
- charles 抓取eclipse中的请求
charles抓取eclipse中的请求 有时候,想要监测eclipse中发送get获取post请求,一样可以使用代理方式: 1.eclipse代码设置 代码中添加,可以就写在主函数中,然后再调用请求 ...
- 廖雪峰python教程的第一个疑问
函数的参数一节中提到: def add_end(L = []); L.append('END') return L 正常调用add_end时(也就是有参数传入时): >>> add_ ...
- JavaScript根据文件名判断文件类型
//JavaScript根据文件名判断文件类型 var imgExt = new Array(".png",".jpg",".jpeg",& ...
- linux中的权限对于文件和目录的重要性
对于文件 r 可以读取文件的实际内容 w 可以编辑文件的内容 x 文件可以被系统执行 对于目录 r 具有读取目录的结构列表,也就是说你可以用ls命令查看目录下的内容列表 w 可以建立新的文件,删除文件 ...
- PL/SQL入门理解（一）
1.PL/SQL概述 1)概念 pl/sql(procedural language)是Oracle在标准sql语言的基础上的扩展,可以实现定义变量.使用逻辑控制语句等 作用:默认oracle一次只能 ...
- JS中误用/g导致的正则test()无法正确重复执行
一个简单的利用正则判断输入是否为数字: input1 = '0281234567';input2 = '0282345678';var reg = /^\d+$/g; reg.test(input1) ...
- Unity新功能｜全息模拟器
http://forum.china.unity3d.com/thread-21539-1-1.html