做到网页自适应屏幕像素
思路:网页对屏幕的自适应是对宽度的要求而不是高度,高度可以允许有滚动条,宽度上最好不要。
参考元素:网页宽度,块及元素,文字大小,图片视频大小,或者根据不同宽度加载不同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