做到网页自适应屏幕像素
思路：网页对屏幕的自适应是对宽度的要求而不是高度，高度可以允许有滚动条，宽度上最好不要。
参考元素：网页宽度，块及元素，文字大小，图片视频大小，或者根据不同宽度加载不同css，做到以上5点要求。
1.网页要求自适应屏幕大小，在<head>中加入<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。
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文件。
<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文件中，也可以根据不同的屏幕分辨率，选择应用不同的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%;}
以上信息来源于http://lusongsong.com/info/post/158.html
435
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
