属于CSS3的新特性(三)

悠悠 2022-06-06 09:15 295阅读 0赞

## 布局样式相关 ##

### CSS3 多列布局——Columns ###

为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个 **多列布局模块**（CSS Multi Column Layout Module）。它主要应用在文本的 **多列布局方面**，这种布局在报纸和杂志上都使用了几十年了，但要在Web页面上实现这样的效果还是有相当大的难度，庆幸的是，CSS3的多列布局可以轻松实现。接下来咱们一起学习多列布局相关的知识。  
  
**语法：**

columns：<column-width> || <column-count>

多列布局columns属性参数主要就两个属性参数：列宽和列数。

举例：要显示2栏显示，每栏宽度为200px，代码为：

columns: 200px 2;

到目前为止大部分主流浏览器都对其支持：

[![5360c43c00010efd05080132.jpg][]][5360c43c00010efd05080132.jpg]

### CSS3 多列布局——column-width ###

column-width的使用和CSS中的width属性一样，不过不同的是，column-width属性在定义元素列宽的时候，既可以单独使用，也可以和多列属性中其他属性配合使用。其基本语法如下所示 ；

column-width: auto | <length>

取值说明

### CSS3 多列布局——column-count ###

column-count属性主要用来给元素指定想要的列数和允许的最大列数。其语法规则：

column-count：auto | <integer>

**取值说明：**

例如：将列分成四列显示，代码如下：

column-count:4;

### CSS3 列间距column-gap ###

column-gap主要用来设置列与列之间的间距，其语法规则如下：

column-gap: normal || <length>

**取值说明**

例如：将内容分三列显列，列与列之间的间距为2em，实现代码为：

column-count: 3;
    column-gap: 2em;

### CSS3 列表边框column-rule ###

column-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。简单点说，就有点类似于常用的border属性。但column-rule是不占用任何空间位置的，在列与列之间改变其宽度不会改变任何列的位置。  
  
**语法规则：**

column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>

**取值说明：**

例如：为了能有效区分栏目列之间的关系，可以为其设置一个列边框，代码为：

column-rule: 2px dotted green;

### CSS3 跨列设置column-span ###

column-span主要用来定义一个分列元素中的子元素能跨列多少。column-width、column-count等属性能让一元素分成多列，不管里面元素如何排放顺序，他们都是从左向右的放置内容，但有时我们需要基中一段内容或一个标题不进行分列，也就是横跨所有列，此时column-span就可以轻松实现，此属性的语法如下。

column-span: none | all

**取值说明**

例如：将第一个标题跨越所有列，代码：

column-span:all;

**效果如下：**

[![5365d594000190af09240316.jpg][]][5365d594000190af09240316.jpg]

### CSS3 盒子模型 ###

CSS中有一种基础设计模式叫盒模型，盒模型定义了Web页面中的元素中如何来解析。CSS中每一个元素都是一个盒模型，包括html和body标签元素。在盒模型中主要包括width、height、border、background、padding和margin这些属性，而且他们之间的层次关系可以相互影响，来看一张盒模型的3D展示图：

[![5365d7b10001e8d506350529.jpg][]][5365d7b10001e8d506350529.jpg]

单击可放大）  
  
从图中可以看出padding属性和content属性层叠background-image属性，层叠background-color属性，这个是存在的，它们四者之间构成了Ｚ轴（垂直屏幕的坐标）多重层叠关系。但是border属性与margin属性、padding属性三者之间应该是平面上的并级关系，并不能构成Ｚ轴的层叠关系。  
  
**box-sizing：**  
  
在CSS中盒模型被分为两种，第一种是w3c的标准模型，另一种是IE的传统模型，它们相同之处都是对元素计算尺寸的模型，具体说不是对元素的width、height、padding和border以及元素实际尺寸的计算关系，它们不同之处是两者的计算方法不一致，原则上来说盒模型是分得很细的，这里所看到的主要是外盒模型和内盒模型，如下面计算公式所示：

** 1. W3C标准盒模型**

外盒尺寸计算（元素空间尺寸）
    
    element空间高度＝内容高度＋内距＋边框＋外距
    
    element空间宽度＝内容宽度＋内距＋边框＋外距
    
    内盒尺寸计算（元素大小）
    
    element高度＝内容高度＋内距＋边框（height为内容高度）
    
    element宽度＝内容宽度＋内距＋边框（width为内容宽度）

**2.IE传统下盒模型（IE6以下，不包含IE6版本或”QuirksMode下IE5.5+”）**

外盒尺寸计算（元素空间尺寸）
    
    element空间高度＝内容高度＋外距（height包含了元素内容宽度、边框、内距）
    
    element宽间宽度＝内容宽度＋外距（width包含了元素内容宽度、边框、内距）
    
    内盒尺寸计算（元素大小）
    
    element高度＝内容高度（height包含了元素内容宽度、边框、内距）
    
    element宽度＝内容宽度（width包含了元素内容宽度、边框、内距）

在CSS3中新增加了**box-sizing**属性，能够事先定义盒模型的尺寸解析方式，其语法规则如下：

box-sizing: content-box | border-box | inherit

**取值说明**

其中最为关键的是box-sizing中content-box和border-box两者的区别，他们之间的区别可以通过下图来展示，其对盒模型的不同解析：

[![5365d98000018fa606460416.jpg][]][5365d98000018fa606460416.jpg]

### CSS3 伸缩布局（一） ###

CSS3引入了一种新的布局模式—— **Flexbox布局**，即 **伸缩布局盒模型**（Flexible Box），用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的，这里简称为 **Flex**。  
  
Flexbox布局常用于设计比较复杂的页面，可以轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变，同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小。  
  
Flexbox布局在定义伸缩项目大小时伸缩容器会预留一些可用空间，让你可以调节伸缩项目的相对大小和位置。例如，你可以确保伸缩容器中的多余空间平均分配多个伸缩项目，当然，如果你的伸缩容器没有足够大的空间放置伸缩项目时，浏览器会根据一定的比例减少伸缩项目的大小，使其不溢出伸缩容器。综合而言，Flexbox布局功能主要具有以下几点：

第一，屏幕和浏览器窗口大小发生改变也可以灵活调整布局；  
第二，可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大小；  
第三，可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间；  
第四，可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；  
第五，可以控制元素在页面上的布局方向；  
第六，可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。  
  
Flexbox规范版本众多，浏览器对此语法支持度也各有不同，接下来的内容以最新语法版本为例向大家展示：  
  
**1.创建一个flex容器**  
  
任何一个flexbox布局的第一步是需要创建一个flex容器。为此给元素设置display属性的值为flex。在Safari浏览器中，你依然需要添加前缀-webkit，

.flexcontainer\{ display: -webkit-flex; display: flex; \}

**2.Flex项目显示**  
  
Flex项目是Flex容器的子元素。他们沿着主要轴和横轴定位。默认的是沿着水平轴排列一行。你可以通过flex-direction来改变主轴方向修改为column，其默认值是row。

[![5365e24300018b8005570159.jpg][]][5365e24300018b8005570159.jpg]

**3.Flex项目列显示**

.flexcontainer\{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; \}

[![5365e2b300016b2405570509.jpg][]][5365e2b300016b2405570509.jpg]

**4.Flex项目移动到顶部**

如何将flex项目移动到顶部，取决于主轴的方向。如果它是垂直的方向通过**align-items**设置；如果它是水平的方向通过**justify-content**设置。

.flexcontainer\{ -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: flex-start; justify-content: flex-start; \}

[![5365e694000180fd05570538.jpg][]][5365e694000180fd05570538.jpg]

.flexcontainer\{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: flex-start; align-items: flex-start; \}

[![5365e7160001b9e405570203.jpg][]][5365e7160001b9e405570203.jpg]

### CSS3 伸缩布局（二） ###

Flexbox规范版本众多，浏览器对此语法支持度也各有不同，接下来的内容以最新语法版本为例向大家展示：（接上一节）

5.Flex项目移到左边

flex项目称动到左边或右边也取决于主轴的方向。如果flex-direction设置为row，设置justify-content控制方向；如果设置为column，设置align-items控制方向。

.flexcontainer\{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-start; justify-content: flex-start; \}

[![5365e8f700012f8a05570207.jpg][]][5365e8f700012f8a05570207.jpg]

.flexcontainer\{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-start; align-items: flex-start; \}

[![5365e9e00001fd9305570449.jpg][]][5365e9e00001fd9305570449.jpg]

6.Flex项目移动右边

.flexcontainer\{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-end; justify-content: flex-end; \}

[![5365ea440001835305570196.jpg][]][5365ea440001835305570196.jpg]

.flexcontainer\{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-end; align-items: flex-end; \}

[![5365ebe9000199b107620445.jpg][]][5365ebe9000199b107620445.jpg]

7.水平垂直居中

在Flexbox容器中制作水平垂直居中是微不足道的。设置justify-content或者align-items为center。另外根据主轴的方向设置flex-direction为row或column。

.flexcontainer\{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; \}

[![5365ec680001868c07620314.jpg][]][5365ec680001868c07620314.jpg]

.flexcontainer\{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; \}

[![5365ecee00016b0107630450.jpg][]][5365ecee00016b0107630450.jpg]

8.Flex项目实现自动伸缩

您可以定义一个flex项目，如何相对于flex容器实现自动的伸缩。需要给每个flex项目设置flex属性设置需要伸缩的值。

.bigitem\{ -webkit-flex:200; flex:200; \}  .smallitem\{ -webkit-flex:100; flex:100; \}

[![5365ed860001a8a907620321.jpg][]][5365ed860001a8a907620321.jpg]

## Media Queries 与Responsive 设计  ##

### 媒体类型（一） ###

随着科学技术不断的向前发展，网页的浏览终端越来越多样化，用户可以通过： 宽屏电视、台式电脑、笔记本电脑、平板电脑和 智能手机来访问你的网站。尽管你无法保证一个网站在不同屏幕尺寸和不同设备上看起来完全一模一样，但至少要让你的Web页面能适配用户的终端，让他更好的呈现在你的用户面前。在本节中，将会学到如何使用CSS3中的Media Queries模块来让一个页面适应不同的终端（或屏幕尺寸），从而让你的页面让用户有一个更好的体验。  
  
**Media Queries**  
  
Media Queries是CSS3新增加的一个模块功能，其最大的特色就是通过CSS3来查询媒体，然后调用对应的样式。其实这个功能在CSS2.1中就有出现过，只不过那个时候此功能并不强大，我们最常见的就是给打印设备添加打印样式。随着时代的变化，这个模块功能越来越强大。  
  
在彻底的了解Media Queries我们需要了解其中的两个重要部分，第一个是媒体类型，第二个是媒体特性。下面的内容我们简单的来了解这两个部分：  
  
**一、媒体类型**  
  
媒体类型（Media Type）在CSS2中是一个常见的属性，也是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式。  
在CSS2中常碰到的就是 all(全部)、screen(屏幕)、print(页面打印或打印预览模式)，其实媒体类型远不止这三种，W3C总共列出了10种媒体类型。如下表所示：

<table style="border-collapse:collapse; border-spacing:0px; color:rgb(20,25,30); font-family:&quot;PingFang SC&quot;,微软雅黑,&quot;Microsoft YaHei&quot;,Helvetica,&quot;Helvetica Neue&quot;,Tahoma,Arial,sans-serif; font-size:14px; background-color:rgb(237,241,242)"> 
 <tbody> 
  <tr> 
   <td style="margin:0px; padding:0px; width:246px"> <p style="margin-top:0.5em; margin-bottom:0.5em; padding-top:5px; padding-bottom:5px; line-height:1.6; color:rgb(31,36,38); text-align:center"> <span style="font-weight:700">值</span></p> </td> 
   <td style="margin:0px; padding:0px; width:321px"> <p style="margin-top:0.5em; margin-bottom:0.5em; padding-top:5px; padding-bottom:5px; line-height:1.6; color:rgb(31,36,38); text-align:center"> <span style="font-weight:700">设备类型</span></p> </td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:0px; width:246px"> <p style="margin-top:0.5em; margin-bottom:0.5em; padding-top:5px; padding-bottom:5px; line-height:1.6; color:rgb(31,36,38); text-align:center"> All</p> </td> 
   <td style="margin:0px; padding:0px; width:321px"> <p style="margin-top:0.5em; margin-bottom:0.5em; padding-top:5px; padding-bottom:5px; line-height:1.6; color:rgb(31,36,38); text-align:center"> 所有设备</p> </td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:0px; width:246px"> <p style="margin-top:0.5em; margin-bottom:0.5em; padding-top:5px; padding-bottom:5px; line-height:1.6; color:rgb(31,36,38); text-align:center"> Braille</p> </td> 
   <td style="margin:0px; padding:0px; width:321px"> <p style="margin-top:0.5em; margin-bottom:0.5em; padding-top:5px; padding-bottom:5px; line-height:1.6; color:rgb(31,36,38); text-align:center"> 盲人用点字法触觉回馈设备</p> </td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:0px; width:246px"> <p style="margin-top:0.5em; margin-bottom:0.5em; padding-top:5px; padding-bottom:5px; line-height:1.6; color:rgb(31,36,38); text-align:center"> Embossed</p> </td> 
   <td style="margin:0px; padding:0px; width:321px"> <p style="margin-top:0.5em; margin-bottom:0.5em; padding-top:5px; padding-bottom:5px; line-height:1.6; color:rgb(31,36,38); text-align:center"> 盲文打印机</p> </td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:0px; width:246px"> <p style="margin-top:0.5em; margin-bottom:0.5em; padding-top:5px; padding-bottom:5px; line-height:1.6; color:rgb(31,36,38); text-align:center"> Handheld</p> </td> 
   <td style="margin:0px; padding:0px; width:321px"> <p style="margin-top:0.5em; margin-bottom:0.5em; padding-top:5px; padding-bottom:5px; line-height:1.6; color:rgb(31,36,38); text-align:center"> 便携设备</p> </td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:0px; width:246px"> <p style="margin-top:0.5em; margin-bottom:0.5em; padding-top:5px; padding-bottom:5px; line-height:1.6; color:rgb(31,36,38); text-align:center"> Print</p> </td> 
   <td style="margin:0px; padding:0px; width:321px"> <p style="margin-top:0.5em; margin-bottom:0.5em; padding-top:5px; padding-bottom:5px; line-height:1.6; color:rgb(31,36,38); text-align:center"> 打印用纸或打印预览视图</p> </td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:0px; width:246px"> <p style="margin-top:0.5em; margin-bottom:0.5em; padding-top:5px; padding-bottom:5px; line-height:1.6; color:rgb(31,36,38); text-align:center"> Projection</p> </td> 
   <td style="margin:0px; padding:0px; width:321px"> <p style="margin-top:0.5em; margin-bottom:0.5em; padding-top:5px; padding-bottom:5px; line-height:1.6; color:rgb(31,36,38); text-align:center"> 各种投影设备</p> </td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:0px; width:246px"> <p style="margin-top:0.5em; margin-bottom:0.5em; padding-top:5px; padding-bottom:5px; line-height:1.6; color:rgb(31,36,38); text-align:center"> Screen</p> </td> 
   <td style="margin:0px; padding:0px; width:321px"> <p style="margin-top:0.5em; margin-bottom:0.5em; padding-top:5px; padding-bottom:5px; line-height:1.6; color:rgb(31,36,38); text-align:center"> 电脑显示器</p> </td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:0px; width:246px"> <p style="margin-top:0.5em; margin-bottom:0.5em; padding-top:5px; padding-bottom:5px; line-height:1.6; color:rgb(31,36,38); text-align:center"> Speech</p> </td> 
   <td style="margin:0px; padding:0px; width:321px"> <p style="margin-top:0.5em; margin-bottom:0.5em; padding-top:5px; padding-bottom:5px; line-height:1.6; color:rgb(31,36,38); text-align:center"> 语音或音频合成器</p> </td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:0px; width:246px"> <p style="margin-top:0.5em; margin-bottom:0.5em; padding-top:5px; padding-bottom:5px; line-height:1.6; color:rgb(31,36,38); text-align:center"> Tv</p> </td> 
   <td style="margin:0px; padding:0px; width:321px"> <p style="margin-top:0.5em; margin-bottom:0.5em; padding-top:5px; padding-bottom:5px; line-height:1.6; color:rgb(31,36,38); text-align:center"> 电视机类型设备</p> </td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:0px; width:246px"> <p style="margin-top:0.5em; margin-bottom:0.5em; padding-top:5px; padding-bottom:5px; line-height:1.6; color:rgb(31,36,38); text-align:center"> Tty</p> </td> 
   <td style="margin:0px; padding:0px; width:321px"> <p style="margin-top:0.5em; margin-bottom:0.5em; padding-top:5px; padding-bottom:5px; line-height:1.6; color:rgb(31,36,38); text-align:center"> 使用固定密度字母栅格的媒介，比如电传打字机和终端</p> </td> 
  </tr> 
 </tbody> 
</table>

其中Screen、All和Print为最常见的三种媒体类型。

### media queries——媒体类型（二） ###

在实际中媒体类型有近十种之多，实际之中常用的也就那么几种，不过媒体类型的引用方法也有多种，常见的有： **link标签、@import**和CSS3新增的 **@media**几种：  
**link方法**

link方法引入媒体类型其实就是在<link>标签引用样式的时候，通过link标签中的media属性来指定不同的媒体类型。如下所示。

**@import方法**

@import可以引用样式文件，同样也可以用来引用媒体类型。@import引入媒体类型主要有两种方式，一种是在样式中通过@import调用另一个样式文件；另一种方法是在<head></head>标签中的<style></style>中引入，但这种使用方法在IE6~7都不被支持，如样式文件中调用另一个样式文件时，就可以指定对应的媒体类型。

@importurl(reset.css) screen;   
    @importurl(print.css) print;

在<head>中的<style>标签中引入媒体类型方法。

<head>
    <style type="text/css">
        @importurl(style.css) all;
    </style>
    </head>

**@media方法**

@media是CSS3中新引进的一个特性，被称为媒体查询。在页面中也可以通过这个属性来引入媒体类型。@media引入媒体类型和@import有点类似也具有两方式。

（1）在样式文件中引用媒体类型：

@media screen {
       选择器{/*你的样式代码写在这里…*/}
    }

（2）使用@media引入媒体类型的方式是在<head>标签中的<style>中引用。

<head>
    <style type="text/css">
        @media screen{
        选择器{/*你的样式代码写在这里…*/}
    }
    </style>
    </head>

### Media Queries使用方法 ###

了解完这些概念性的东西，同学们最想知道的是Media Queries要如何使用？下面我们一起来探讨其使用方法：  
Media Queries能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果。前面简单的介绍了Media Queries如何引用到项目中，但Media Queries有其自己的使用规则。具体来说,Media Queries的使用方法如下。

@media 媒体类型and （媒体特性）{你的样式}

注意：使用Media Queries必须要使用“@media”开头，然后指定媒体类型（也可以称为设备类型），随后是指定媒体特性（也可以称之为设备特性）。媒体特性的书写方式和样式的书写方式非常相似，主要分为两个部分，第一个部分指的是媒体特性，第二部分为媒体特性所指定的值，而且这两个部分之间使用冒号分隔。例如：

(max-width: 480px)

从前面表中可以得知，主要有十种媒体类型和13种媒体特性，将其组合就类似于不同的CSS集合。但与CSS属性不同的是，媒体特性是通过min/max来表示大于等于或小于做为逻辑判断，而不是使用小于（<）和大于（>）这样的符号来判断。接下来一起来看看Media Queries在实际项目中常用的方式。

**1. 最大宽度max-width**

“max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。如：

@media screen and (max-width:480px){
     .ads {
       display:none;
      }
    }

上面表示的是：当屏幕小于或等于480px时,页面中的广告区块（.ads）都将被隐藏。

#### 2.最小宽度min-width ####

“min-width”与“max-width”相反，指的是媒体类型大于或等于指定宽度时，样式生效。

@media screen and (min-width:900px){
    .wrapper{width: 980px;}
    }

上面表示的是：当屏幕大于或等于900px时，容器“.wrapper”的宽度为980px。

#### 3.多个媒体特性使用 ####

Media Queries可以使用关键词"and"将多个媒体特性结合在一起。也就是说，一个Media Query中可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种媒体类型。

当屏幕在600px~900px之间时，body的背景色渲染为“\#f5f5f5”，如下所示。

@media screen and (min-width:600px) and (max-width:900px){
      body {background-color:#f5f5f5;}
    }

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

在智能设备上，例如iPhone、iPad等，还可以根据屏幕设备的尺寸来设置相应的样式（或者调用相应的样式文件）。同样的，对于屏幕设备同样可以使用“min/max”对应参数，如“min-device-width”或者“max-device-width”。

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

#### 5. not关键词 ####

使用关键词“not”是用来排除某种制定的媒体类型，也就是用来排除符合表达式的设备。换句话说，not关键词表示对后面的表达式执行取反操作，如：

@media not print and (max-width: 1200px){样式代码}

上面代码表示的是：样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。

#### 6.only关键词 ####

only用来指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有：支持媒体特性的设备，正常调用样式，此时就当only不存在；表示不支持媒体特性但又支持媒体类型的设备，这样就会不读样式，因为其先会读取only而不是screen；另外不支持Media Queries的浏览器，不论是否支持only，样式都不会被采用。如

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

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

<linkrel="stylesheet" media="(min-width:701px) and (max-width:900px)" href="mediu.css" />

另外在样式中，还可以使用多条语句来将同一个样式应用于不同的媒体类型和媒体特性中，指定方式如下所示。

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

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

到目前为止，CSS3 Media Queries得到了众多浏览器支持，除了**IE6-8**浏览器不支持之外，在所有现代浏览器中都可以完美支持。还有一个与众不同的时，**Media Queries在其他浏览器中不要像其他CSS3属性一样在不同的浏览器中添加前缀。**

### Responsive设计 ###

什么是响应式设计呢？维基百科是这样对响应式作的描述：“Responsive设计简单的称为RWD，是精心提供各种设备都能浏览网页的一种设计方法，RWD能让你的网页在不同的设备中展现不同的设计风格。”从这一点描述来说，RWD不是流体布局，也不是网格布局，而是一种独特的网页设计方法。

响应式设计要考虑元素布局的秩序，而且还需要做到“有求必应”，那就需要满足以下三个条件：网站必须建立灵活的网格基础；引用到网站的图片必须是可伸缩的；不同的显示风格，需要在Media Queries上写不同的样式。

要想灵活的使用Responsive，仅满足这几个条件还是不够的，我们必须对Responsive有一个全面的了解，那么要了解Responsive，就得先了解他的一些术语：

#### 1.流体网格 ####

流体网格是一个简单的网格系统，这种网格设计参考了流体设计中的网格系统，将每个网格格子使用百分比单位来控制网格大小。这种网格系统最大的好处是让你的网格大小随时根据屏幕尺寸大小做出相对应的比例缩放。

#### 2.弹性图片 ####

弹性图片指的是不给图片设置固定尺寸，而是根据流体网格进行缩放，用于适应各种网格的尺寸。而实现方法是比较简单，一句代码就能搞定的事情。

img {max-width:100%;}

不幸的是，这句代码在IE8浏览器存在一个严重的问题，让你的图片会失踪。当然弹性图片在响应式设计中如何更好的实现，到目前为止都还存在争议，也还在不断的改善之中。

为每一个断点提供不同的图片，这是一个比较头痛的事情，因为Media Queries并不能改变图片“src”的属性值，那有没有办分法可以解决呢？可以参考一下下面的解决方法。使用background-image给元素使用背景图片，显示/隐藏父元素，给父元素使用不同的图片，然后通过Media Queries来控制这些图片显示或隐藏。

来看一个断点解决图片自适应的例子。

对应的CSS代码：

@media (min-device-width:600px){
    img[data-src-600px]{
      content: attr(data-src-600px,url);
      }
    }
    @media (min-device-width:800px){
      img[data-src-800px] {
      content:attr(data-src-800px,url);
      }
    }

####  请注意：这仅仅是解决响应式图片自适应的一种思路，但这种方案仅仅适配的断点较少。并不太实用，此处仅为扩展同学们的思路。 ####

#### 3.媒体查询 ####

媒体查询在CSS3中得到了强大的扩展。使用这个属性可以让你的设计根据用户终端设备适配对应的样式。这也是响应式设计中最为关键的。可以说Responsive设计离开了Medial Queries就失去了他生存的意义。简单的说媒体查询可以根据设备的尺寸，查询出适配的样式。Responsive设计最关注的就是：根据用户的使用设备的当前宽度，你的Web页面将加载一个备用的样式，实现特定的页面风格。

#### 4.屏幕分辨率 ####

屏幕分辨简单点说就是用户显示器的分辨率，深一点说，屏幕分辨率指的是用户使用的设备浏览您的Web页面时的显示屏幕的分辨率，比如说智能手机浏览器、移动电脑浏览器、平板电脑浏览器和桌面浏览器的分辨率。Responsive设计利用Media Queries属性针对浏览器使用的分辨率来适配对应的CSS样式。因此屏幕分辨率在Responsive设计中是一个很重要的东西，因为只有知道Web页面要在哪种分辨率下显示何种效果，才能调用对应的样式。

#### 5.主要断点 ####

主要断点，在Web开发中是一个新词，但对于Responsive设计中是一个很重要的一部分。简单的描述就是，设备宽度的临界点。在Media Queries中，其中媒体特性“min-width”和“max-width”对应的属性值就是响应式设计中的断点值。简单点说，就是使用主要断点和次要断点，创建媒体查询的条件。而每个断点会对应调用一个样式文件（或者样式代码），如下图所示：

[![53660bc60001051601200357.jpg][]][53660bc60001051601200357.jpg]

上图的style.css样式文件运用在Web页面中，但这个样式文件包括了所有风格的样式代码，也就是说所有设备下显示的风格都通过这个样式文件下载下来。当然，在实际中还可以使用另一种方法，也就是在不同的断点加载不同的样式文件，如下图所示。

[![53660c230001fb9603190203.jpg][]][53660c230001fb9603190203.jpg]  
上图主要显示的是主要断点，主要断点加载的不同样式文件直接将影响Web的效果。除了主要断点之外，为了满足更多效果时，还可以在这个基础上添次要断点。不过主要断点和次要断点增加之后，需要维护的样式也相应的增加，成本也相对应的增加。因此在实际使用中，需要根据自身产品需求，决定断点。

综合下来，设置断点应把握三个要点：满足主要的断点；有可能的话添加一些别的断点；设置高于1024的桌面断点。

### Responsive布局技巧 ###

通过上面的介绍，大家对响应式设计有了一定的了解，但在实际制作中还是有一些布局技巧的：

**在Responsive布局中，可以毫无保留的丢弃：**

第一， 尽量少用无关紧要的div；

第二，不要使用内联元素（inline）；

第三，尽量少用JS或flash；

第四，丢弃没用的绝对定位和浮动样式；

第五，摒弃任何冗余结构和不使用100%设置。

有舍才有得，丢弃了一些对Responsive有影响的东东，那么有**哪些东东能帮助Responsive确定更好的布局呢？**

第一，使用HTML5 Doctype和相关指南；

第二，重置好你的样式（reset.css）；

第三，一个简单的有语义的核心布局；

第四，给重要的网页元素使用简单的技巧，比如导航菜单之类元素。

使用这些技巧，无非是为了保持你的HTML简单干净，而且在你的页面布局中的关键部分（元素）不要过分的依赖现代技巧来实现，比如说CSS3特效或者JS脚本。

说了这么多，怎么样的布局或者说HTML结构才是简单干净的呢？这里教大家一个**快速测试**的方法。你首先禁掉你页面中所有的样式（以及与样式相关的信息），在浏览器中打开，如果你的内容排列有序，方便阅读，那么你的这个结构不会差到哪里去。

### Responsive设计——meta标签 ###

最后还有一个不可或缺的东东，那就是meta标签，可以说，在响应式设计中如果没有这个meta标签，你就是蹩脚的，响应式设计就是空谈。  
  
个meta标签被称为可视区域meta标签，其使用方法如下。

在content属性中主要包括以下属性值，用来处理可视区域。

[![53660f2c0001190005270386.jpg][]][53660f2c0001190005270386.jpg]

在实际项目中，为了让Responsive设计在智能设备中能显示正常，也就是浏览Web页面适应屏幕的大小，显示在屏幕上，可以通过这个可视区域的**meta标签**进行重置，告诉他使用设备的宽度为视图的宽度，也就是说禁止其默认的自适应页面的效果，具体设置如下：

另外一点，由于Responsive设计是结合CSS3的Media Queries属性，才能尽显Responsive设计风格，但大家都清楚，**在IE6-8中完全是不支持CSS3 Media**。下面我们一起来看看CSS3 Meida Queries在标准设备上的运用，大家可以把这些样式加到你的样式文件中，或者单独创建一个名为“responsive.css”文件，并在相应的条件中写上你的样式，让他适合你的设计需求。

**脚本下载地址： **

media-queries.js(http://code.google.com/p/css3-mediaqueries-js/)      
    
     respond.js(https://github.com/scottjehl/Respond)
    
     <!—[if lt IE9]>
          <scriptsrc=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script>
     <![endif]>

### Responsive设计——不同设备的分辨率设置 ###

下面我们一起来看看CSS3 Meida Queries在标准设备上的运用，大家可以把这些样式加到你的样式文件中，或者单独创建一个名为“responsive.css”文件，并在相应的条件中写上你的样式，让他适合你的设计需求：

**1.1024px显屏**

@media screen and (max-width : 1024px) {                    
    /* 样式写在这里 */          
    }

**2.800px显屏**

@media screen and (max-width : 800px) {              
    /* 样式写在这里 */          
    }

**3.640px显屏**

@media screen and (max-width : 640px) {              
    /* 样式写在这*/            
    }

**4.iPad横板显屏**

@media screen and (max-device-width: 1024px) and (orientation: landscape) {              
    /* 样式写在这 */            
    }

**5.iPad竖板显屏**

@media screen and (max-device-width: 768px) and (orientation: portrait) {         
    /* 样式写在这 */            
    }

**6.iPhone 和 Smartphones**

@media screen and (min-device-width: 320px) and (min-device-width: 480px) {              
    /* 样式写在这 */            
    }

现在有关于这方面的运用也是相当的成熟，twitter的[Bootstrap][]第二版本中就加上了这方面的运用。大家可以对比一下：

@media (max-width: 480px) \{ ... \}

@media (max-width: 768px) \{ ... \}

@media (min-width: 768px) and (max-width: 980px) \{ ... \}

@media (min-width: 1200px) \{ .. \}

## 用户界面与其它重要属性 ##

### 自由缩放属性resize ###

为了增强用户体验，CSS3增加了很多新的属性，其中 **resize**就是一个重要的属性，它允许用户通过 拖动的方式来修改元素的尺寸来 改变元素的大小。到目前为止，可以使用overflow属性的任何容器元素。  
  
在此之前，Web设计师为了要实现这样具有拖动效果的UI，使用大量的脚本代码才能实现，这样费时费力，效率极低。  
  
resize属性主要是用来改变元素尺寸大小的，其主要目的是增强用户体验。但使用方法却是极其的简单，先从其语法入手。

resize: none | both | horizontal | vertical | inherit

**取值说明：**

例如：通过resize属性，让文本域可以沿水平方向拖大。代码为：

textarea {
      -webkit-resize: horizontal;
      -moz-resize: horizontal;
      -o-resize: horizontal;
      -ms-resize: horizontal;
      resize: horizontal;
    }

### CSS3外轮廓属性 ###

外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似，但和元素边框border完全不同，外轮廓线不占用网页布局空间，不一定是矩形，外轮廓是属于一种动态样式，只有元素获取到焦点或者被激活时呈现。  
  
outline属性早在CSS2中就出现了，主要是用来在元素周围绘制一条轮廓线，可以起到突出元素的作用。但是并未得到各主流浏览器的广泛支持，在CSS3中对outline作了一定的扩展，在以前的基础上增加新特性。outline属性的基本语法如下：

outline: ［outline-color］ || [outline-style] || [outline-width] || [outline-offset] || inherit

从语法中可以看出outline和border边框属性的使用方法极其类似。outline-color相当于border-color、outline-style相当于border-style，而outline-width相当于border-width，只不过CSS3给outline属性增加了一个 **outline-offset**属性，其取值说明如下。

### CSS生成内容 ###

在Web中插入内容，在CSS2.1时代依靠的是JavaScript来实现。但进入CSS3进代之后我们可以通过CSS3的伪类“:before”，“:after”和CSS3的伪元素“::before”、“::after”来实现，其关键是依靠CSS3中的“content”属性来实现。不过这个属性对于 **img**和 **input**元素不起作用。  
  
content配合CSS的伪类或者伪元素，一般可以做以下四件事情

**实例展示：**

在CSS中有一种清除浮动的方法叫“clearfix”。而这个“clearfix”方法就中就使用了“content”，只不过只是在这里插入了一个空格。如下所示：

.clearfix:before,
    
    .clearfix:after {
    
           content:””;
    
           display:table;
    
    }
    
    .clearfix:after {
    
           clear:both;
    
           overflow:hidden;
    
    }

上面这个示例是最常见的，也是最简单的，我们再来看一个插入元素属性值的方法。

假设我们有一个元素：

可以通过”:after”和”content:attr(title)”将元素的”title”值插入到元素内容“我是元素”之后：

a:after {
    
      content:attr(title);
    
           color:#f00;
    
    }

**效果如下：**

[![5365fae20001649403560028.jpg][]][5365fae20001649403560028.jpg]

[5360c43c00010efd05080132.jpg]: /images/20220606/bb27210fccce40e39d6dfd16f7e56636.png
[5365d594000190af09240316.jpg]: /images/20220606/c4ae535946064eefa6bded53385a9534.png
[5365d7b10001e8d506350529.jpg]: /images/20220606/5cd478ff98b44dc0b9a6e11eb16757df.png
[5365d98000018fa606460416.jpg]: /images/20220606/a99233767fca476db98656139a9a1432.png
[5365e24300018b8005570159.jpg]: /images/20220606/c2a448f6b779424ba7200ec9a6875fbd.png
[5365e2b300016b2405570509.jpg]: /images/20220606/ce604eb4ac554d51b51b1a0dfb31d693.png
[5365e694000180fd05570538.jpg]: /images/20220606/8ce4bbb67b134193a37b7d65a1a4fad9.png
[5365e7160001b9e405570203.jpg]: /images/20220606/4c92aac592704ceb9c9e229e0e61dcdc.png
[5365e8f700012f8a05570207.jpg]: /images/20220606/43df18f4b6fd4e239b4454cbbb51f530.png
[5365e9e00001fd9305570449.jpg]: /images/20220606/98d22b5e94b74e7c9d258528b8ab83cc.png
[5365ea440001835305570196.jpg]: /images/20220606/e0e4757cbb004078a310972c5d6513b5.png
[5365ebe9000199b107620445.jpg]: /images/20220606/8f2f2c021411469dbb4c7a914d8f8549.png
[5365ec680001868c07620314.jpg]: /images/20220606/96044796dfd34e82a074b6d607bf08e1.png
[5365ecee00016b0107630450.jpg]: /images/20220606/bfbdb2997de24a598262ffc056374b8c.png
[5365ed860001a8a907620321.jpg]: /images/20220606/0bb606e019244480a5f6240ec743e5ea.png
[53660bc60001051601200357.jpg]: /images/20220606/e69b2eb7e2364e5698f21cd1dbfad212.png
[53660c230001fb9603190203.jpg]: /images/20220606/428da25c76f344f5b9419a0c105d427a.png
[53660f2c0001190005270386.jpg]: /images/20220606/9b6452a744c14d898935816f032c87be.png
[Bootstrap]: http://twitter.github.com/bootstrap/scaffolding.html#responsive
[5365fae20001649403560028.jpg]: /images/20220606/4187523ff9f4458cbb334b05b28a0b62.png