html布局-响应式布局

响应式布局

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用大势所趋来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式

示例

html

<div class="box">
<div class="box1">左边</div>
<div class="box2">中间</div>
<div class="box3">侧栏</div>
</div>

css

.box1{width:10%;height:300px;background:yellow;}
.box2{width:80%;height:300px;background:greenyellow;}
.box3{width:10%;height:300px;background:cornflowerblue;}

媒体查询

媒体查询通过不同的媒体类型和条件定义样式表规则

媒体查询概念

媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件

媒体查询的大部分媒体特性都接受 min和max用于表达”大于或等于”和”小于或等于”。

如：width会有min-width和max-width媒体查询可以被用在CSS中的 @media和@import规则上，也可以被用在HTML和XML

通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面，特别是移动设备，将会运用更加的广泛。

Media Query获取的值

设备的宽和高device-width，device-heigth显示屏幕/触觉设备

渲染窗口的宽和高width，heigth显示屏幕/触觉设备

设备的手持方向，横向还是竖向orientation(portrait|lanscape)和打印机等

画面比例aspect-ratio点阵打印机等

设备比例device-aspect-ratio-点阵打印机等

对象颜色或颜色列表color，color-index显示屏幕

设备的分辨率resolution

语法

@media 设备名 only (选取条件) not (选取条件) and(设备选取条件)，设备二{sRules}

在link中使用@media：

<link rel='stylesheet' type='type/css' media='only screen and (max-width: 480px),
only screen and (max-device-width: 480px)' href='link.css'/>

在样式表中内嵌@media：

@media screen and (min-width: 480px) {
body {
background-color: green;
}
}

一个简单的例子

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

上面的media语句表示的是：当页页宽度小于或等于600px,调用small.css样式表来渲染你的Web页面。首先来看media的语句中包含的内容：

• 1、screen：这个不用说大家都知道，指的是一种媒体类型；
• 2、and：被称为关键词，与其相似的还有not,only；
• 3、(max-width:600px)：这个就是媒体特性，说得通俗一点就是媒体条件

前面这个简单的实例引出两个概念性的东西，一个就是媒体类型(Media Type)和 媒体特性(Media Query)，首先一起来理解一下这两个概念

媒体类型(Media Type)：在css2中是一个常见的属性，也是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式，在css2中我们常碰到的就是all(全部),screen(屏幕),print(页面打印或打邱预览模式),其实在媒体类型不止这三种，w3c总共列出了10种媒体类型。

媒体特性Media Query看成Media Type(判断条件)+CSS(符合条件的样式规则),为了更能理解Media Query，我们在次回到前面的实例上：

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

转换成css中的写法为：

@media screen and (max-width: 600px) {
  选择器 {
      属性：属性值；
  }
}

其实就是把small.css文件中的样式放在了@media srceen and (max-width;600px){...}的大括号之中。在语句上面的语句结构中，可以看出Media query和css的属性集合很相似，主要区别在：

• 1.Media query只接受单个的逻辑表达式作为其值，或者没有值；
• 2. css属性用于声明如何表现页页的信息；而Media Query是一个用于判断输出设备是否满足某种条件的表达式；
• 3. Media Query其中的大部分接受min/max前缀，用来表示其逻辑关系，表示应用于大于等于或者小于等于某个值的情况；

CSS属性要求必须有属性值，Media Query可以没有值，因为其表达式返回的只有真或假两种.

常用的Media Query如下表所示：

属性	值	Min/Max	描述
color	整数	yes	每种色彩的字节数
color-index	整数	yes	色彩表中的色彩数
device-aspect-ratio	整数	yes	宽高比例
device-height	length	yes	设备屏幕的输出高度
device-width	length	yes	设备屏幕的输出宽度
grid	整数	no	是否是基于格栅的设备
height	length	yes	喧嚷界面的高度
monochrome	整数	yes	单色帧缓冲器中像素字节
resolution	分辨率	yes	分辨率
scan	Progressive interlaced	no	tv媒体类型的扫描方式
width	length	yes	渲染界面的宽度
orientation	Portrait/landscape	no	横屏或竖屏

Media Queries具体使用

Media Queries的具体使用方式

1.最大宽度Max Width

<link rel="stylesheet" media="screen and (max-width:600px)" href="small.css" type="text/css"
/>

上面表示的是：当屏幕小于或等于600px时，将采用small.css样式来渲染Web页面

2.最小宽度Min Width

<link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css"/>

3.多个Media Queries使用

<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)"
href="style.css" type="text/css"/>

Media Query可以结合多个媒体查询，换句话说，一个Media Query可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种Media Type。正如上面的其表示的是当屏幕在600px-900px之间时采用style.css样式来渲染web页面。

4.设备屏幕的输出宽度Device Width

<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css"
  type="text/css"/>

上面的代码指的是iphone.css样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的maxdevice-width所指的是设备的实际分辨率，也就是指可视面积分辨率

5.iPhone

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)"
type="text/css" href="iphone.css" />

上面的样式是专门针对iPhone的移动设备写的

6.iPad

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"
type="text/css" />
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"
type="text/css" />

在大数情况下，移动设备iPad上的Safari和在iPhone上的是相同的，只是他们不同之处是iPad声明了不同的方向，比如说上面的例子，在纵向（portrait）时采用portrait.css来渲染页面；在横向（landscape）时采用landscape.css来渲染页面

7.android

/*240px的宽度*/
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css"
type="text/css" />
/*360px的宽度*/
<link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-devicewidth:
360px)" href="android360.css" type="text/css" />
/*480px的宽度*/
<link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-devicewidth:
480px)" href="android480.css" type="text/css" />

我们可以使用media query为android手机在不同分辨率提供特定样式，这样就可以解决屏幕分辨率的不同给android手机的页面重构问题。

8.not关键字

<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css"
type="text/css" />

not关键字是用来排除某种制定的媒体类型，换句话来说就是用于排除符合表达式的设备

9.only关键字

<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css"
type="text/css" />

only用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器

其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。

其主要有：支持媒体特性（Media Queries）的设备，正常调用样式，此时就当only不存在；对于不支持媒体 特性(Media Queries)但又支持媒体类型(Media Type)的设备，这样就会不读了样式，因为其先读only而不是 screen；另外不支持Media Qqueries的浏览器，不论是否支持only，样式都不会被采用

10.其他

在Media Query中如果没有明确指定Media Type，那么其默认为all，如：

<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css"
type="text/css" />

另外还有使用逗号（，）被用来表示并列或者表示或，如下

<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px),
screen and (min-width:960px)" />

上面代码中style.css样式被用在宽度小于或等于480px的手持设备上，或者被用于屏幕宽度大于或等于960px的设备上

具体操作过程

准备工作1:设置meta标签

首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,userscalable=no" />

这段代码的几个参数解释：

• width = device-width：宽度等于当前设备的宽度
• initial-scale:初始的缩放比例（默认设置为1.0）
• minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
• maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
• user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

准备工作2：加载兼容文件js

因为IE8既不支持HTML5也不支持CSS3 Media，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果：

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

准备工作3：设置IE渲染方式默认为最高(可以选择添加或不添加)

现在有很多人的IE浏览器都升级到IE9以上了，所以这个时候就有又很多诡异的事情发生了，例如现在是IE9的浏览器，但是浏览器的文档模式却是IE8:

为了防止这种情况，我们需要下面这段代码来让IE的文档模式永远都是最新的

<meta http-equiv="X-UA-Compatible" content="IE=edge">

不过又有一个更给力的写法：

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

么这段代码后面加了一个chrome=1，这个Google Chrome Frame（谷歌内嵌浏览器框架GCF），如果有的用户电脑里面装了这个chrome的插件，就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算，无比给力，不过如果用户没装这个插件，那这段代码就会让IE以最高的文档模式展现效果。这段代码我还是建议你们用上，不过不用也是可以的

进入CSS3 Media

一般写法

@media screen and (max-width: 960px){
  body{
    background: #000;
  }
}

screen，他的意思是在告知设备在打印页面时使用衬线字体，在屏幕上显示时用无衬线字体。但是目前我发现很多网站都会直接省略screen,因为你的网站可能不需要考虑用户去打印时，你可以直接这样写

@media (max-width: 960px){
body{
  background: #000;
}
}

其中css2的媒体查询：

<link rel="stylesheet" type="text/css" media="screen" href="style.css">

我们想知道移动设备是不是纵向放置的显示屏，可以这样写：

<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="style.css">

我们把第一段的代码也用CSS2来实现，让它一样可以让页面宽度小于960的执行指定的样式文件：

<link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="style.css">

但是上面这个方法，最大的弊端是他会增加页面http的请求次数，增加了页面负担，我们用CSS3把样式都写在一个文件里面才是最佳的方法

移动设备显示尺寸段

@media screen and ( min-width: 212px){/*213px显示屏样式 LG Optimus One*/}
@media screen and ( min-width: 319px){/*320px显示屏样式 苹果4/4S/5C/5S黑莓Z30 */}
@media screen and ( min-width: 359px){/*360px显示屏样式 索尼Z1*/}
@media screen and ( min-width: 383px){/*384px显示屏样式 黑莓Z10 谷歌 Nexus 6 LG Optimus G*/}
@media screen and ( min-width: 399px){/*399px显示屏样式 三星galaxyNote*/}
@media screen and ( min-width: 414px){/*414px显示屏样式 苹果6plus*/}
@media screen and ( min-width: 423px){/*424px显示屏样式 LG 4X */}
@media screen and ( min-width: 479px){/*480px显示屏样式 索尼MT27i Xperia sola*/}
@media screen and ( min-width: 539px){/*640px显示屏样式 摩托罗拉Droid3/4/Razr Atrix 4g*/}
@media screen and ( min-width: 639px){/*640px显示屏样式*/}
@media screen and ( min-width: 640px){/*640px以上显示屏样式*/}

ps：一般用苹果的屏幕适配就不会有问题