响应式设计

响应式设计概念

自适应网页设计要求网页的布局随着屏幕的大小与分辨率的不同而改变

添加视窗标签

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

使用相对单位

1
2
3
div.fullWidth {
width: 100%;
}

在CSS文件里植入应用,设备查询,media query,不同设备不同样式表

Media queries 允许我们能创造一个自适应的体验,media query语句能够根据设备的规格创造规则将特定的样式应用在所有小屏幕,大屏幕以及所有中间尺寸的设备上。

1
2
3
@media (query) {
/* CSS Rules used when query matches */
}

有两种使用方式

1
<link rel="stylesheet" href="print.css" media="print">
1
2
3
@media print {
/* print style sheets go here */
}

典型应用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
<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">
<style>
@media (min-width: 500px) and (max-width: 600px) {
h1 {
color: fuchsia;
}
.desc:after {
content:" In fact, it's between 500px and 600px wide.";
}
}
</style>

min-width 基于浏览器窗口的大小

  • 当浏览器宽度在 0px 和 640px 之间时 max-640px.css 将被应用。
  • 当浏览器宽度在 500px 和 600px 之间时, 在 @media 里的样式将被应用。
  • 当浏览器宽度大于等于 640px 时 , min-640px.css 将被应用。
  • 当浏览器宽度大于高度时, landscape.css 将被应用。
  • 当你的浏览器 高度大于宽度时, portrait.css 将被应用

确定断点:由小到大(移动设备优先)

在完成了移动设备体验之后,使用Chrome调试器,慢慢放大视窗(viewport)直到结构出现问题,并且设定新的断点。

根据不同的断点,选择不同的样式表

1
2
3
<link rel="stylesheet" href="weather.css">
<link rel="stylesheet" media="(max-width:600px)" href="weather-2-small.css">
<link rel="stylesheet" media="(min-width:601px)" href="weather-2-large.css">

当有必要时,定义次要断点。

除了定义主要断点以应对大幅度的布局改动之外,你也可以为一些细致的变动做出调整。例如在两个主要断点之间调整外间距与内间距或者改变字体大小,使得布局更加自然都是可行的。

1
2
3
4
5
6
7
8
9
10
11
12
@media (min-width: 360px) {
body {
font-size: 1.0em;
}
}
@media (min-width: 500px) {
.seven-day-fc .temp-low,
.seven-day-fc .temp-high {
display: inline-block;
width: 45%;
}

http://wf.uisdc.com/cn/layouts/rwd-fundamentals/#use-css-media-queries-for-responsiveness

文章目录
  1. 1. 响应式设计概念
  2. 2. 添加视窗标签
  3. 3. 使用相对单位
  4. 4. 在CSS文件里植入应用,设备查询,media query,不同设备不同样式表
    1. 4.1. 典型应用
    2. 4.2. 确定断点:由小到大(移动设备优先)
      1. 4.2.1. 当有必要时,定义次要断点。