基于CSS3的自适应网页的设计与实现

李伙钦

【摘 要】随着移动互联网的飞速发展，智能手机与平板电脑等智能移动终端已经相当普及，移动终端的屏幕分辨率各式各样，如何让网页适应不同的屏幕分辨率，为用户提供良好的用户体验，这对网页设计是一个难题。全新的CSS3标准为网页自适应提供了较好的解决方案。本文分析和阐述了网页适应不同屏幕分辨率所存在的问题，以及详细介绍使用CSS3解决网页自适应问题的设计思路与代码实现。

【关键词】CSS3；网页自适应；响应式

0 引言

近几年，移动互联网蓬勃发展，智能手机和平板电脑等移动终端已相当普及，相对于传统的电脑，移动终端的屏幕分辨率多种多样，而且还能切换横屏竖屏，传统的只针对电脑设计的网页在移动终端上显示就会出现问题。一般手机屏幕分辨率较小，电脑上显示正常的网页，在手机上可能就会被缩得很小或者布局显示变形，用户浏览起来就很困难。

早期对于这个问题的解决办法主要有两个，一个是为手机等移动终端单独设计网页，如使用WAP（无线应用协议）开发适用于手机的网页，WAP协议比较简单，适应性强，但不能显示太复杂的特效，使用这种办法解决了手机等小屏幕终端的问题，但重新开发一整个网站费时费力，显示效果也比较简陋；另外一种解决办法是使用浏览器转码，常见手机浏览器如UC浏览器、QQ浏览器、Opera浏览器等都有自动转码功能，浏览器将网页进行转码，减小图片大小，放大文字，以适合手机屏幕分辨率的样式呈现，这种方式自动化处理，效果还不错，但主要问题是缺乏灵活性，转码后的效果未必适合所有网页。

全新的CSS3标准为网页自适应提供了较好的解决方案，通过CSS3新增的一些功能能够自动根据屏幕分辨率调整页面内容布局，在各种不同设备上都呈现出令人满意效果。

1 CSS3概述

CSS3是CSS（层叠样式表）的最新标准，它是由Adobe、苹果、谷歌、微软等IT届的大公司联合组织的“CSS Working Group”组织策划制订的，CSS3相对于CSS2引入很多实用的特性，如圆角、阴影、半透明背景、渐变、盒子模型、过渡与动画、多列布局。这些特性的引入让曾经需要JavaScript或者Flash才能实现的复杂功能，通过简单的CSS样式设置即可实现，大大方便了网页设计。

2 自适应网页设计

在2010年，Ethan Marcotte提出了“响应式网页设计（Responsive Web Design）”的概念，“响应式网页设计”即本文所说的“自适应网页设计”，指的是网页能够根据屏幕宽度自动做出调整的设计方案。要实现自适应网页可以通过CSS3样式实现，以下是实现思路。

2.1 加入viewport元标签

在网页头部加入

这句话意思是添加名为“viewport”的meta元标签，width=device-width意思是宽度为设备宽度，initial-scale=1意思是原始缩放比例为1，即显示比例100%，不缩放也不放大。目前主流的手机浏览器都支持CSS3，即支持viewport元标签，当在手机浏览带viewport元标签的网页时候，手机屏幕分辨率的宽度就指定给了网页宽度。这是CSS3自适应网页设计的一个必要条件。

2.2 使用浮动布局

设置网页中需要自动调整位置的网页元素的CSS样式为float：left或者float：right。

CSS中float属性用于产生浮动布局，该属性不是CSS3特有的，早在CSS1就有这个属性了，该属性在DIV+CSS布局模式中经常用到。float主要有left和right属性值，设定后网页元素变成浮动元素，浮动的元素可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动元素的边框为止，浮动元素会在同一行一个挨着一个排列过去，排不下了会自动新起一行继续排列。

浮动布局在自适应网页设计中十分适用，屏幕宽度大就一行多排几个，屏幕宽度小就一行少排几个，这样就可以在不缩放网页情况下适应不同宽度屏幕，显示同样多的内容。例如：12张图片，每张图片宽度300px，在PC上屏幕宽度1280px，使用浮动布局即可显示3行4列，而手机屏幕宽度720px，使用浮动布局即可自动显示为6行2列。

需要注意的是，浮动布局使用完成后，需要在后面补充一个清除浮动的标签，避免后续的页面元素错位，如浮动元素后面跟一个

以结束浮动。

2.3 选择性加载CSS

CSS3新增的Media Query模块，用于自动探测屏幕宽度，加载相应的CSS文件，这是CSS3中自适应页面设计的核心所在。如，这段代码的意思就是如果屏幕宽度小于600px就加载small.css，这样就可以有针对性的设计不同分辨率下的CSS样式。

除了在页面中设置选择性加载，还可以在CSS文件中设置选择性加载，如在css文件中写上 @import url（"small.css"） screen and （max-device-width： 600px）。

2.4 使用@media规则

@media用于在同一个CSS文件中，根据不同的设备分辨率，设置不同的CSS样式。如：@media only screen and （max-width：600px） and （min-width：500px）{html{font-size：20px}}

意思是当屏幕宽度大于500px，小于600px时候，网页中的字体设置为大小20px。

@media only screen and （max-width：800px）{img{width：50%}；body{background-size：100%；}}

意思是当屏幕小于800px时候，img图片显示50%宽度，网页背景图片自动缩放到屏幕大小。

@media规则灵活的解决了不同屏幕分辨率下的显示问题，可以根据需要设置不同的文字大小、图片大小等任意CSS样式，是自适应页面设计的常用方法之一。

2.5 尽量使用百分比

在传统网页布局中，布局对象如div、table等的宽度高度经常是写绝对宽度值、绝对高度值，而在自适应页面设计中尽量要使用百分比，如 body{width：100%}，table{width：80%}这样设计的好处是页面、图片、表格等会随着页面分辨率的放大而放大，缩小而缩小。

布局对象div、table等都可以设置百分比，特别注意的是字体和背景图片也可以设置成百分比，如p{font-size：1.4rem}，td{font-size：60%}，body{background-size：100%；}，p{font-size：1.4rem}意思是p标签采用默认字体1.4倍大小显示，rem是字体相对大小的单位，td{font-size：60%}意思是td标签采用默认字体0.6倍大小显示，body{background-size：100%；}意思是页面背景图片充满整个页面，并且随着页面大小自动放大缩小。

不过对于采用百分比的网页布局，会存在被放太大导致图片失真或者缩太小导致表格文字堆在一起的情况，这时候需要配合前面3，4两点所提到选择性加载CSS与@media规则，对于太大或者太小的屏幕分辨率进行针对性的处理。

2.6 合理使用max-width与min-width

max-width、min-width用来设置表格、div、图片等布局对象的最大最小宽度，这是很有用的样式，如前面第5点提到的，当页面放太大导致图片失真的情况就可以通过max-width加以限制，再比如新闻内容页面中图片有大有小，大图可能会超出布局框，如果只是设置width，虽然大图会缩到合适大小，但同时会出现小图被放大失真的情况，解决这个问题的最好办法就是设置一下img{max-width：100%}，这样大图会缩小到合适大小，小图显示原来大小不会被放大失真。

3 总结

由于现在移动互联设备的多样性，需要自适应网页来满足不同屏幕分辨率。CSS3为我们带来了很多实用的新功能新属性，正确合理使用CSS3可以很好的实现自适应网页设计。

[责任编辑：王楠]