冲浪网站优化 / Products Center

随着移动设备的不断发展，现在移动设备超过桌面设备，这就给网页设计师出了一个难题，不同的设备，不同的屏幕，如何让网页规范显示了，不至于显示混乱，针对不同的屏幕设计不同尺寸的页面是一个办法，但是大大增加了设计的工作量，那么有没有一个页面可以自适应所有的屏幕呢？2010年Ethan Marcotte提出了自适应设计页面理念，（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。

使用自适应网页设计技术也比较简单，主要包括如下价格方面。

1、加入viewport元标签。

　<meta name="viewport" content="width=device-width, initial-scale=1" />

标签viewport设置网页的默认宽度，该标签的意思是网页默认宽度等于屏幕宽度width=device-width，原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。

　　<!--[if lt IE 9]>
　　　　<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
　　<![endif]-->

2、不能使用绝对宽度和高度

由于网页需要根据屏幕宽度自动设置显示样式，因此不能设置绝对宽度，如果设置绝对宽度就破坏了自适应页面的条件，因此不能设置绝对宽度和高度，采用百分比设置宽度和高度。

不能使用width:xxx px，可以采用width: xx%，或者　width:auto自动显示样式。

3、字体不能使用绝对字体只能使用相对字体

不能使用font-size:px；应该采用100%em等。

4、使用流动布局，不能使用固定布局

float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。

5、选择加载css样式

"自适应网页设计"的核心，就是CSS3引入的Media Query模块。作用是自动探测屏幕宽度，然后加载相应的CSS文件，从而起到自适应网页设计的目的。

它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。

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

上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。

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

如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。

除了用html标签加载CSS文件，还可以在现有CSS文件中加载。

　　@import url("tinyScreen.css") screen and (max-device-width: 400px);

6、图片自适应

，"自适应网页设计"还必须实现图片的自动缩放。

这只要一行CSS代码：

　　img { max-width: 100%;}

这行代码对于大多数嵌入网页的视频也有效，所以可以写成：

　　img, object { max-width: 100%;}

老版本的IE不支持max-width，所以只好写成：

　　img { width: 100%; }

最后冲浪网站优化网总结一些，自适应网页设计的要点有三个方面，第一，加入viewport元标签，第二设置不同分辨率的css样式，第三，设置文字，图片等相当宽度。自适应网页设计技术给网页设计带来了方便，因此如果你的网站主要是应用于移动设备，还是可以采用的，该方法可以大大提高用户体验。