1.首先允许网页自己调整宽高
<meta name="viewport" content="width=device-width, initial-scale=1" />
width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
height:和 width 相对应,指定高度。
initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
maximum-scale:允许用户缩放到的最大比例。
minimum-scale:允许用户缩放到的最小比例。
user-scalable:用户是否可以手动缩放
2.引入css样式
2.1:当页面宽度大于等于960像素
<link rel="stylesheet" type="text/css" media="screen and (min-width:960px)" href="css/gt-960px.css">
@media screen and (min-width:960px){内嵌css样式}
2.2:当页面大于等于600且小于等于960像素
<link rel="stylesheet" type="text/css" media="screen and (min-width:600px) and (max-width:960px)" href="css/gt-600px-lt-960px.css">
@media screen and (min-width:600px) and (max-width:960px){内嵌css样式}
2.3:当页面小于等于600像素
<link rel="stylesheet" type="text/css" media="screen and (max-width:600px)" href="css/lt-600px.css">
@media screen and (max-width:600px){内嵌CSS样式}
2.4:高度同样适用于宽度比如media="screen and (min-height:300px) and (max-height:600px)"
2.5:适用浏览器除了IE6-8基本都支持
2.6:device-width 输出设备屏幕可见宽度,可派生出min-device-width和max-device-width。
例如media="screen and (min-device-width:300px) and (max-device-width:600px) ".
例如media="screen and (device-width:300px)".
2.7:device-height(同上)
2.8:orientation:定义输出设备中可见区域高度是否大于或等于宽度
取值:
portrait 可见区域高度大于等于宽度
landscape 除了上边的属性都是 landscape
3.注意事项
尽量不要用绝对宽度,尽量所有属性用百分比
4.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- -->
<link rel="stylesheet" type="text/css" media="screen and (min-width:960px)" href="responsive/gt-960px.css">
<!-- -->
<link rel="stylesheet" type="text/css" media="screen and (min-width:600px) and (max-width:960px)" href="responsive/gt-600px-lt-960px.css">
<!-- -->
<link rel="stylesheet" type="text/css" media="screen and (max-width:600px)" href="responsive/lt-600px.css">
</head>
<body>
<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>
</body>
</html>