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">< ...
随机推荐
- Mac入门教程之: Command键5个隐藏功能
Mac 电脑的 Command 键位于空格边上,是 OS X 系统很多快捷键组合的一部分.不过,Command 自己也能完成很多操作,帮助用户更好的在 OS X 中完成各项任务,下面是 Command ...
- Spark快速入门 - Spark 1.6.0
Spark快速入门 - Spark 1.6.0 转载请注明出处:http://www.cnblogs.com/BYRans/ 快速入门(Quick Start) 本文简单介绍了Spark的使用方式.首 ...
- Migrate Instance 操作详解 - 每天5分钟玩转 OpenStack（40）
Migrate 操作的作用是将 instance 从当前的计算节点迁移到其他节点上. Migrate 不要求源和目标节点必须共享存储,当然共享存储也是可以的. Migrate 前必须满足一个条件:计算 ...
- 关于PB调用Microsoft Web Browser控件的一些问题
Microsoft Web Browser控件是WINDOWS系统自带的控件,一般不需要单独安装,由于工作的需要,把使用中遇到的问题记录一下,以便查阅. 插入控件: 环境为PB12.0,insert- ...
- C库函数使用与总结之字符串处理函数
1. memcpy(拷贝内存内容) [头文件]#include <string.h> [函数原型]void *memcpy(void *dest, const void *src, siz ...
- oh-my-zsh主题
什么是ZSH Zsh和bash一样,是一种Unix shell,但大多数Linux发行版本都默认使用bash shell.但Zsh有强大的自动补全参数.文件名.等功能和强大的自定义配置功能. 一.安装 ...
- linux 文件系统结构及命令
1.linux 文件系统结构 / 根目录 root |--mnt/ | |--sdcard/ 挂载点 | |--usb0 | |--cdrom |--home | |--soft01 <- 用 ...
- pacemaker+corosync/heartbeat对比及资源代理RA脚本
一.Pacemaker概念 (1)Pacemaker(心脏起搏器),是一个高可用的群集资源管理器.它实现最大可用性资源管理的节点和资源级故障检测和恢复,通过使用首选集群基础设施(Corosync或He ...
- java设计模式之状态模式
状态模式 允许一个对象在其内部状态改变时改变它的行为,对象看起来似乎修改了它的类. 状态模式UML图 上下文环境(Context):它定义了客户程序需要的接口并维护一个具体状态角色的实例,将与状态相关 ...
- 【转载】Web移动端Fixed布局的解决方案
特别声明:本文转载于EFE的<Web移动端Fixed布局的解决方案>.如需转载,烦请注明原文出处:http://efe.baidu.com/blog/mobile-fixed-layout ...