CSS3知识点整理（五）----响应式设计及其他属性

2021-10-22 04:43:07

介绍Media Queries与Responsive设计以及外轮廓属性、resize属性、CSS3生成内容等

学会如何使用CSS3中的Media Queries模块来让一个页面适应不同的终端（或屏幕尺寸）。

（一）Media Queries----媒体类型

Media Queries是CSS3新增加的一个模块功能，其最大的特色就是通过CSS3来查询媒体，然后调用对应的样式。

其中包括两个重要部分，第一个是媒体类型，第二个是媒体特性。

媒体类型：

媒体类型（Media Type）在CSS2中是一个常见的属性，也是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式。

在CSS2中常碰到的就是all(全部)、screen(屏幕)、print(页面打印或打印预览模式)，其实媒体类型远不止这三种，W3C总共列出了10种媒体类型，

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

媒体类型的引用方法也有多种，常见的有：link标签、@import和CSS3新增的@media几种：

1. link方法：

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

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

2. @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>

3. @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”开头，然后指定媒体类型（也可以称为设备类型），随后是指定媒体特性（也可以称之为设备特性）。媒体特性的书写方式和样式的书写方式非常相似，主要分为两个部分，第一个部分指的是媒体特性，第二部分为媒体特性所指定的值，而且这两个部分之间使用冒号分隔。例如：

(max-width: 480px)

主要有十种媒体类型和13种媒体特性，将其组合就类似于不同的CSS集合。但与CSS属性不同的是，媒体特性是通过min/max来表示大于等于或小于做为逻辑判断，而不是使用小于（<）和大于（>）这样的符号来判断。

Media Queries在实际项目中常用的方式：

1. 最大宽度max-width

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

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

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

2.最小宽度min-width

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

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

@media screen and (min-width:900px){
.wrapper{width: 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”指的是设备的实际分辨率，也就是指可视面积分辨率。

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

5. not关键词

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

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

@media not print and (max-width: 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" />

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

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

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

注意：Media Queries在其他浏览器中不要像其他CSS3属性一样在不同的浏览器中添加前缀。

（三）Responsive设计介绍

“Responsive设计简单的称为RWD，是精心提供各种设备都能浏览网页的一种设计方法，RWD能让网页在不同的设备中展现不同的设计风格。”从这一点描述来说，RWD不是流体布局，也不是网格布局，而是一种独特的网页设计方法。

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

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

1.流体网格

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

2.弹性图片

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

img {max-width:100%;}

3.媒体查询

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

4.屏幕分辨率

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

5.主要断点

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

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

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

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

（四）Responsive布局技巧

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

1）尽量少用无关紧要的div；

2）不要使用内联元素（inline）；

3）尽量少用JS或flash；

4）丢弃没用的绝对定位和浮动样式；

5）摒弃任何冗余结构和不使用100%设置。

以下可以帮助Responsive确定更好的布局：

1）使用HTML5 Doctype和相关指南；

2）重置好样式（reset.css）；

3）一个简单的有语义的核心布局；

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

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

（五）Responsive设计——meta标签

meta标签被称为可视区域meta标签，其使用方法如下：

<meta name=”viewport” content=”” />

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

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

<meta name=”viewport” content=”width=device-width,initial-scale=1.0” />

（六）Responsive设计——不同设备的分辨率设置

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) { .. }

（七）CSS3*缩放属性resize

它允许用户通过拖动的方式来修改元素的尺寸来改变元素的大小。到目前为止，可以使用overflow属性的任何容器元素。

resize属性主要是用来改变元素尺寸大小的，其主要目的是增强用户体验。但使用方法却是极其的简单，其语法为：

resize: none | both | horizontal | vertical | inherit

取值说明：

属性值	取值说明
none	用户不能拖动元素修改尺寸大小。
both	用户可以拖动元素，同时修改元素的宽度和高度
horizontal	用户可以拖动元素，仅可以修改元素的宽度，但不能修改元素的高度。
vertical	用户可以拖动元素，仅可以修改元素的高度，但不能修改元素的宽度。
inherit	继承父元素的resize属性值。

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

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

（八）CSS3外轮廓属性outline

外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似，但和元素边框border完全不同，外轮廓线不占用网页布局空间，不一定是矩形，外轮廓是属于一种动态样式，只有元素获取到焦点或者被激活时呈现。

outline属性的基本语法如下：

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

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

outline-offset 参数用另外设置，不能放里面

（九）CSS3生成内容

在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;
}

码农公寓