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">< ...
随机推荐
- .Net Collection的一些理解——记录一次向实习生的答疑
公司最近进了个实习生,每天下班前我都会花一些时间来解答一下实习生的一些疑问.今天问起了关于集合排序方法Sort的一些疑问,这让我一下回到自己刚刚入行的时候.那个时候也遇到了集合排序的问题,为发现接口I ...
- Sql--order by、desc降序、top
---------通过order by 语句进行排序: --1.降序order by 列名desc --2.升序order by 列名 或order by 列名asc --3.order by语句 ...
- redis 集群配置实战
文章转载自:http://hot66hot.iteye.com/blog/2050676 最近研究Redis-cluster,正好搭建了一个环境,遇到了很多坑,系统的总结下,等到redis3 rele ...
- 从零自学Hadoop(07)：Eclipse插件
阅读目录 序 Eclipse Eclipse插件 新建插件项目 系列索引 本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 文章是哥(mephisto)写 ...
- SQL Server 2008 R2——用CTE进行递归计算求解累计值
=================================版权声明================================= 版权声明:原创文章 谢绝转载 请通过右侧公告中的“联系邮 ...
- Unity在Android和iOS中如何调用Native API
本文主要是对unity中如何在Android和iOS中调用Native API进行介绍. 首先unity支持在C#中调用C++ dll,这样可以在Android和iOS中提供C++接口在unity中调 ...
- Chrome浏览器设置默认编码
设置-->高级设置-->网络内容-->自定义字体(滚动条拉到最底部)-->编码
- python学习笔记-python程序运行
小白初学python,写下自己的一些想法.大神请忽略. 安装python编辑器,并配置环境(见http://www.cnblogs.com/lynn-li/p/5885001.html中 python ...
- 【2016-11-3】【坚持学习】【Day18】【ADO.NET 】
使用Connection创建数据库连接 使用Command创建命令 使用ExecuteScalar,ExecuteNonQuery,ExecuteReader方法来执行命令 使用DataReader来 ...
- 2016.11.6 night NOIP模拟赛 考试整理
题目+数据:链接:http://pan.baidu.com/s/1hssN8GG 密码:bjw8总结: 总分:300分,仅仅拿了120份. 这次所犯的失误:对于2,3题目,我刚刚看就想到了正确思路,急 ...