网页自适应设计思路

网页自适应设计思路，做到网页自适应屏幕像素。

思路：网页对屏幕的自适应是对宽度的要求而不是高度，高度可以允许有滚动条，宽度上最好不要。

参考元素：网页宽度，块及元素，文字大小，图片视频大小，或者根据不同宽度加载不同css，做到以上5点要求。

1.网页要求自适应屏幕大小，在

viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度(width=device-width)，原始缩放比例(initial-scale=1)为 1.0，即网页初始大小占屏幕面积的100%所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器(主要是IE6、7、8)，需要使用css3- mediaqueries.js。

2.字体大小用浮动式即em而不是px，px是绝对像素大小，em是相对像素大小。1em默认是16px

h1 {font-size: 1.5em;}对h1字体设置为1.5em即1.5*16px。

3.整体布局的时候不使用绝对宽度width：700px，而是用width：70%，可以根据屏幕宽度进行改动。

4.整体布局的时候使用流动宽度。保证块及元素不是锁死的。

.main {float: right;width: 70%;} class=main 的元素保持向右浮动可变，宽度70%

.leftBar {float: left;width: 25%;}class=leftBar 的元素保持向左浮动可变，宽度70%

5."自适应网页设计"的核心，就是CSS3引入的Media Query模块。它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。

media="screen and (max-device-width: 400px)"

href="tinyScreen.css" />

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

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

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

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

6.同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则

@media screen and (max-device-width: 400px) {

　　　　.column {
float: none;
width:auto;
}

　　　　#sidebar {
display:none;
｝　}

上面的代码意思是，如果屏幕宽度小于400像素，则column块取消浮动(float:none)、宽度自动调节(width:auto)，sidebar块不显示(display:none)。

7.图片自适应

这只要一行CSS代码：

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