HTML5学习总结-番外05 响应式布局

1. 响应式布局

　　响应式布局是2015年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。其目的是为用户提欧共更加舒适的界面和更好的用户体验。

2.优缺点

优点：

1) 面对不同分辨率设备灵活性强

2）能够快捷解决多设备显示适应问题

缺点：

1）兼容各种设备工作量大，效率低下

2）代码累赘，会出现隐藏无用的元素，加载时间长。

3 语法

CSS3 media queries的语法如下，

@media only screen and (max/min-width/height: 960px) {

  /* 样式定义 */

}

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">< ...

随机推荐

[Erlang 0107] Erlang实现文本截断
抽时间处理一下之前积压的一些笔记.前段时间有网友 @稻草人问字符串截断的问题"各位大侠 erlang截取字符串一般用哪个函数啊",有人支招用string:substr/3, ...
Write on ……… failed: 112(failed to retrieve text for this error. Reason: 15105)
早上检查数据库的备份邮件时,发现一台Microsoft SQL Server 2008 R2 (SP2)数据库的Maintenance Report有错误在SSMS里面执行Exec YourSQLD ...
【转】深入理解 Java 垃圾回收机制
深入理解 Java 垃圾回收机制一.垃圾回收机制的意义 Java语言中一个显著的特点就是引入了垃圾回收机制,使c++程序员最头疼的内存管理的问题迎刃而解,它使得Java程序员在编写程序的时候不再 ...
iOS 10 的坑：新机首次安装 app，请求网络权限“是否允许使用数据”(转)
症状 iOS 10 之后,陆陆续续地有用户联系我们,说新机第一次安装.第一次启动的时候,app 首屏一片空白,完全没数据.kill 掉重新打开就好了. 一开始以为是用户网络情况不好,但随着越来越多的用 ...
POJ1190生日蛋糕[DFS 剪枝]
生日蛋糕 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 18236 Accepted: 6497 Description ...
Python的列表推导式，字典推导式，集合推导式使用方法
推导式分为列表推导式(list),字典推导式(dict),集合推导式(set)三种 1.列表推导式也叫列表解析式.功能:是提供一种方便的列表创建方法,所以,列表解析式返回的是一个列表格式:用中括号括起 ...
Python-07-面向对象（进阶篇）
1.面向对象高级语法部分 1.1 静态方法通过 @staticmethod 装饰器即可把其装饰的方法变为一个静态方法,什么是静态方法呢?其实不难理解,普通的方法,可以在实例化后直接调用,并且在方法里 ...
mysql: Illegal mix of collations (utf8_unicode_ci,IMPLICIT) and (utf8_general_ci,IMPLICIT) for operation '= 的解决
昨天把mysql里所有table的varchar字段的字符集,批量换成了utf8mb4/utf8mb4_unicode_ci ,以便能保存一些emoji火星文 , 结果有一个sql语句执行时,报错如下 ...
orcle form 传数据乱码
在jsp顶部加入<%@ page contentType="text/html; charset=utf-8" language="java" impor ...
JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）
前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...