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">< ...
随机推荐
- GConf error:Failed to contact configuration server
Linux系统运行一直正常,但是图形界面使用root账号登录时遇到下面错误,第一次遇到这么怪异的状况 具体错误信息如下所示: GConf error:Failed to contact configu ...
- Oracle Listener 动态注册 与 静态注册
http://blog.csdn.net/tianlesoftware/article/details/5543166
- CentOS系统 yum 安装 iftop实时流量监控工具
一. 不多说其他的无用话题.直接看步骤: 1.要安装某个工具,首先得知道这个工具需要依赖包. eg:iftop 就依赖 以下这几个依赖包(不清楚工具依赖什么包“Google.百度”). flex ...
- kobject.c 添加注释
最近结合<Linux Device Drivers>对kobject的理解,对kobject.c文件添加注释,仅供参考! 1 /** 2 * populate_dir - pop ...
- HTTP状态管理机制之Cookie
一.cookie 起源 cookie 最早是网景公司的雇员 Lou Montulli 在1993年3月发明,后被 W3C 采纳,目前 cookie 已经成为标准,所有的主流浏览器如 IE.Chrome ...
- 【小白的CFD之旅】15 四种境界
天气不错,小白一大早就起床了,吃过早餐就往奔实验室而去.路上碰到了同去实验室的小牛师兄. "小白,这么早啊",小牛师兄老远就发现了小白,打招呼道. "早啊,牛师兄,刚吃完 ...
- OpenStack 企业私有云的若干需求（5）：主流硬件支持、云快速交付 和 SLA 保证
本系列会介绍OpenStack 企业私有云的几个需求: 自动扩展(Auto-scaling)支持 多租户和租户隔离 (multi-tenancy and tenancy isolation) 混合云( ...
- 多个不同的app应用间应该如何进行消息推送呢？
现在很多公司做app应用都会用到推送,推送这个不多说了,怎么做网上一堆,用的比较多的还数极光推送(Jpush)以及百度推送,目前我们使用Jpush,文档方面质量是差了点..这个先不吐槽,主要现在的ap ...
- POJ3928Ping pong[树状数组 仿逆序对]
Ping pong Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 3109 Accepted: 1148 Descrip ...
- Map接口，Map.Entry，hashMap类,TreeMap类，WeakHashMap。
Collection接口之前接触过,每次保存的对象是一个对象,但是在map中保存的是一对对象,是以key->value形式保存的. 定义: public interface Map<K,V ...