CSS 页面自适应
浏览数：19 /
时间：2015年06月09日
一、在<head></head>中添加
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
以上是设置网页宽度默认等于屏幕宽度，初始缩放倍率是1.0，最大、最小缩放倍率也为1.0，不允许用户使用手势缩放
根据需要可添加以下：
<meta charset="UTF-8"> （设置页面编码）
<meta http-equiv="pragma" content="no-cache" /> （不允许从缓存读取，脱机后无法访问）
二、引入css
方法一：根据不同屏幕宽度加载不同css
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 640px)" href="small.css" />
意思是：屏幕宽度最大为640px的话，加载small.css
<link rel="stylesheet" type="text/css" media="screen and (min-width: 640px) and (max-device-width: 960px)" href="middle.css" />
意思是：屏幕宽度在640~960px之间的话，加载middle.css
方法二：在同一个css中添加@media判断
Less中写法为：
p{
font-size:16px;
@media screen and(max-device-width: 640px) {
font-size:14px;
}
}
css中写法为：
p{
font-size:16px;
}
@media screen and (max-device-width: 640px){
p{
padding-top:45px;
}
}
注意：
1、不使用绝对宽度：width:xxx px;，可以使用em或%代替，字体也一样
2、适当使用绝对布局absolute，但是不滥用
3、建议使用流动布局float
（更多详细内容，可参考http://lusongsong.com/info/post/158.html）
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
