响应式网站设计基础

响应式网站指的是随着设备的尺寸变化，网页内容和样式始终可以正常显示。

1. 元视窗代码

<meta name="viewport" content="width=device-width,initial-scale=1">

设置了元视窗的代码后，页面内容可以随设备适度缩放。

2. CSS媒体类型过滤

css媒体类型过滤是根据当前所在的媒体环境进行过滤。

媒体类型有：

all 所有媒体设备；默认值
print 打印机
handheld 小的手持设备
projection 幻灯片
screen 电脑显示器
tv 电视类型的设别
tty 电传打字机等

1. link加载外联样式时

//默认media="all" 所有的设备；默认阻塞渲染
<link href="../css/index.css" rel="stylesheet"> 
// 媒体类型为print,只在用于打印机时，使用该样式阻塞渲染；其他情况不阻塞
<link href="../css/1.css" rel="stylesheet" media="print"> 

2. 加载具体样式内容时

@media print {
    p.test { font-family:verdana,sans-serif;font-size:14px;}
}
@media screen {
    p.test {font-family:times,serif;font-size:10px;}
}
@media print,screen {
    p.test {font-weight: bold}
}

3. CSS媒体查询过滤

媒体查询条件有：

1. link外联样式时

// 0-640px
<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
// >640px
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
// 高度>宽度
<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
// 宽度>高度
<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">

2. 加载具体样式时

// 500px-600px
@media (min-width: 400px) and (max-width: 600px) {
    .desc:after {
        content:" In fact, it's between 500px and 600px wide.";
      }
}

应用

比如，为保证页面展示效果良好，当页面<500px时，文字全屏展示（100%）；

当页面大于500px，也只中间500px用来展示内容；两侧都是空白填充。

4. 使用相对单位

1. 使用百分比

2.使用相对单位rem/em