CSS3在响应式网页设计中的应用

陈梅　苏晨++高斐

摘要：随着社会和网络技术的发展，移动设备正被人们越来越广泛的应用，并且成为访问互联网的最常见终端。而各种不同的设备，其显示屏幕是不同的。响应式网页正是为了在大小的不同屏幕上显示同样的网页而诞生的。文章对CSS3在制作响应式网页的代码实现等方面，进行了论述说明。

关键词：移动设备；CSS3；响应式网页

中图分类号：TP37 文献标识码：A 文章编号：1009-3044（2016）19-0030-02

随着互联网的发展及广泛应用，移动设备的应用也日益广泛，比如使用手机上网，使用IPAD访问网络等等，成为访问互联网最常见的方式。既然访问网络的终端设备不一样，导致了显示的屏幕大小不尽相同，那如何才能在不同大小的设备上呈现同样的网页呢？比如，手机的屏幕比较小，而电脑显示器的屏幕却比手机屏幕大很多倍。同样的内容，要在不同大小的屏幕上，都能正确显示和表达出来，那就需要借助于相应的方式和方法才能实现。

其实在很早以前，曾经就有人设想，设计者能不能对网页进行一次性设计之后，但是能对不同大小屏幕的设备，都能适用，这样，网页就能根据所用的屏幕宽度，进行自动调整，从而实现正确显示网页的功能。

之前，在没有CSS3的情况下，大多数都是把一个项目做很多个不同的版本，用JS或者其他设备进行判断，然后再跳转到指定的版本中去。但是现在随着CSS3技术的普及，在WEB设计中，可以使用CSS技术实现响应式设计，根据媒体设备的屏幕尺寸让网站的内容自动响应。

1 “响应式网页设计”的提出

早在2010年，Ethan Marcotte就提出了“自适应网页设计”这个名词，它的含义是指网页可以通过自动识别屏幕大小，来做出相应的调整，使网页能适应屏幕大小达到正常显示的新网页设计方式及技术。这就是响应式网页的来源。

2 “响应式网页设计”的实现

“响应式网页设计”是通过什么方式来实现的呢，主要是通过以下三个方面。

首先，通过标签的加入，可以用来实现响应式网页。的意思是指网页默认的宽度和高度。代码如下：

这行代码的意思是，网页宽度与所用设备的屏幕宽度是相等的，网页的大小占所用设备屏幕大小的一倍。

其次，由于网页要根据屏幕大小来调整页面的布局，所以在书写CSS3代码的过程中，不能使用绝对宽度，其中也包括不能具有绝对宽度的元素。比如，CSS3代码不能写成这种代码：width：780 px；这样书写代码就相当于指定了所用元素的宽度，这样，在不同屏幕进行显示的时候就会出错。可以写成这种代码：width： 100%；或者width：auto；这样书写代码的含义是指定所用元素的宽度跟屏幕大小相同，或者随着屏幕大小自动调节。这样，在网页进行显示时才能跟所用设备的屏幕相匹配。另外，对于页面中的字体来说，在书写代码时，也不能定义字体的大小（px），而只能定义字体的相对大小（em）。比如，代码body {font： Arial 100% ；}，说明的含义是字体大小跟页面默认字体的大小是一样的。代码h1 {font-size： 1.5em；}的意思是h1字体的大小是默认字体的1.5倍。这两种定义字体大小的方式是正确的。假如写成body {font： Arial 16px ；}或者h1 {font-size： 30px；}，则是错误的。

第三，对于响应式网页来说，需要设置的布局是不能固定不变。也就是说，在网页中的每个区块，其位置都应该是浮动的，而不是固定不变的。比如，代码.right {float： left；width： 80%；}的含义是把.right区块设置为左浮动，宽度是页面的80%。使用浮动的优点是，如果屏幕的宽度不够，放不下水平方向的两个或多个元素，那第二个元素或其他元素会自动转到第二行或者第三行，而不会在水平方向进行排列，通过这种书写代码的方式，就不会在页面上出现水平滚动条了。

3 响应式网页设计的核心

对于响应式网页的实现来说，其核心就是通过CSS3引入Media Query模块。而使用Media Query模块的含义就是通过书写的CSS3代码来获取所用设备的屏幕大小，并根据屏幕大小来调用相应的CSS文件，以此来实现网页在该设备屏幕的正常显示。比如下面的代码：

media="screen and （max-device-width： 200px）"

href="Screen1.css" />

它的代码含义是，如果屏幕宽度小于200像素，网页就会调用Screen1.css文件，使网页按照Screen1.css中定义的格式来显示网页内容。

假如代码的书写如下：

media="screen and （min-width： 200px） and （max-device-width：400px）"

href="Screen2.css" />

它的含义是如果屏幕宽度在200像素到400像素之间，那么网页就会调用Screen2.css文件，按照Screen2.css文件中定义的格式来显示网页内容。

另外，Media Query可以多个使用。也就是说，一个Media Query可以包含多个表达式，也可以没有表达式，如果有表达式，那么表达式可以包含多个关键字，也可以没有关键字。比如下面的代码就是这样，使用了多个表格式，并且当屏幕大小符合设定的条件时，就调用样式表screen.css的代码来显示网页内容。

上面的代码是通过使用html标签调用CSS文件，除此以外，还可以使用现有的CSS文件来实现。

由此看见，使用Media Query模块的目的，是在于为不同的视图宽度来指定不同的CSS规则，实现不同的布局。而且Media Query的功能是非常强大的，在我们使用不同的设备浏览网页时，能使我们制作的页面在设备屏幕大小不同的情况下都能显示正常，这对于我们用户来说，就足够了。Media Query还有一个特点，那就是 Media Query可以写在同一个或者单独的样式表中。

4 图片的自适应调节

由于手机终端的带宽没有那么大，所以，如果我们只是对页面布局做了响应式处理，但是在用手机访问网页时，请求的图片还是PC上的大图，那么文件的体积就显得太大，这样消耗流量也多，请求延时变长，因此而导致的问题也是不可估量的。所以对于响应式网页设计，除了对布局和文本有要求之外，还必须要考虑到图片的正确显示。而要实现图片的正确显示，只需要对图片进行一下设置就可以了，比如代码可以设置为：img { width： 100%；}

如果可能的话，还是要根据屏幕的大小，来加载不同分辨率的图片。浏览器通过获取用户终端的屏幕尺寸及分辨率，进行逻辑处理后，输出相应大小的图片，比如，如果屏幕的分辨率是320*480，那么匹配给它的应该是宽度小于320像素的图片。

5 关于CSS3的@media规则

在一个CSS3文件中，也可以根据屏幕大小的不同，编写CSS3代码来实现页面的正确显示。比如有如下代码：

@media screen and （max-device-width： 380px）

{.main{

float： none；

width：auto； }

#left {

display：none； }

}

以上代码的含义是，当所用设备的屏幕宽度小于380像素时，则.main模块不进行浮动，但是宽度可以进行自动调节，left模块不显示。

总之，响应式网页设计的理念是，根据屏幕的大小、用户的行为和用户所用的环境基础上，进行网页开发的自适应性调整，包括在布局、图像等方面能够与CSS3相结合，以便能实现网页在不同设备的正确显示。这样，网站如果能根据用户的使用环境来进行自动调整页面，就可以减少不必要的重复设计。同时，我们要清楚，media queries只是一个通过CSS代码来实现响应式网页的一种方式，但该方法并不是唯一的一种方法。假如通过使用JavaScript代码，或者使用JavaScript配合media queries，我们还可以实现更多的变化。

参考文献：

[1] 赵书田 刘海姣.响应式Web设计 [J].科技创新导报， 2015（24）：152

[2] 李伙钦.基于CSS3电子实验网页的设计与实现[J].科技世界，2016（2）.

[3] 密海英.面向不同设备的响应式网页设计探析[J].苏州市职业大学学报，2013（2）.

[4] 许中博.“响应式”网页布局设计浅析[J].黑龙江科技信息，2012（26）.