响应式布局的一些概念的整理

来源：互联网发布：闪电抢购软件下载编辑：程序博客网时间：2024/05/16 18:12

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像素

@media screen and (min-width:960px){内嵌css样式}

2.2：当页面大于等于600且小于等于960像素

@media screen and (min-width:600px) and (max-width:960px){内嵌css样式}

2.3：当页面小于等于600像素

@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.注意事项

尽量不要用绝对宽度，尽量所有属性用百分比

<!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>

0 0