响应式Web设计与CSS（上）

1.一个例子

响应式Web设计最核心的一点，就是可以适配不同视口大小的流式布局。

1.1 简单上手

<div class="row">
	<header class="col subcategory-header">
	  <h2>Lorem ipsum</h2>
	</header>
	<div class="col subcategory-content">
	  <div class="row row-quartet">
		<div class="col subcategory-featured">
		  <article class="story">
			<img src="http://placehold.it/600x300" alt="Dummy image">
			<h3><a href="#">Cras suscipit nec leo id.</a></h3>
			<p>Autem repudiandae aliquid tempora quos reprehenderit architecto, sequi repellat.</p>
		  </article>
		</div>
		<div class="col"></div>
		<div class="col"></div>
	  </div>
	</div>
</div>

.row {
    padding: 0;
    margin: 0 -.6875em;
}
.row:after {
    content: '';
    display: block;
    clear: both;
}
.col {
    box-sizing: border-box;
    padding: 0 .6875em 1.375em;
    float: left;
    width: 100%;
}

把列设置为浮动和100%宽度，以保证行可以包含浮动的子元素。

1.2 媒体查询

如果视口更宽一些，那就有可能在一屏之内显示更多内容。

如果媒体类型屏幕的可视窗口宽度大于等于35em，就使用相应的样式。

@media only screen and (min-width: 35em) {
  .row-quartet > * {
	width: 50%;
  }
  .subcategory-featured {
	width: 100%;
  }
}

@media规则与@supports规则相似，针对的是显示网页的环境的能力。

引入媒体查询的宽度值，叫作断点。断点相关的规则与设备类型无关，无论是手机还是其他什么设备都可以。

1.3 加入更多断点

继续增大浏览器窗口，随着空间增大，我们可以找出更高效地利用空间的方式。

@media only screen and (min-width: 50em) {
    .row-quartet > * {
        width: 25%;
    }
    .subcategory-featured {
        width: 50%;
    }
}

从一个纯粹的单列布局开始，然后使用媒体查询限定布局改变的条件，这正是响应式Web设计的基础。

2.响应式Web设计的起源

Ethan Marcotte发明了“响应式Web设计”：https://alistapart.com/article/responsive-web-design

虽然响应式Web设计作为一种设计思潮相对较新，但一套设计适配不同设备的想法则很早就有了。

媒体查询（及其前身，媒体类型）是在有些人呼吁适配浏览器布局技术的背景下才得以成为标准。

到了2010年，媒体查询得到了浏览器的广泛支持。

响应式Web设计正在迅速成为网页设计约定俗成的方式，并可能在将来成为“优秀Web设计”的代名词。（响应式Web设计原来指适配多种设备和多种屏幕尺寸）

CSS之外的响应性：

先加载核心资源，之后再根据设备的能力决定是否加载更多资源。比如“三明治菜单”。

3.浏览器视口

视口是浏览器显示网页的矩形区域。

要恰当地使用视口进行响应式设计，需要理解视口的原理，以及如何操纵它。

在桌面浏览器上，视口的概念很直观，就是通过CSS像素来合理利用视口中的空间。

CSS像素与屏幕物理像素之间存在一种灵活的对应关系，这个关系取决于硬件、操作系统和浏览器，以及用户是否缩放了页面。CSS像素单位为px，即pixel的缩写。

3.1 视口定义的差别

默认视口是模拟视口。

理想视口是与设备自身尺寸接近的视口。理想视口的大小因设备、操作系统和浏览器而异。

经过优化的网站：

未经优化的网站：

为移动设备优化的网站使用的是理想视口，而未经优化的网站使用的是默认视口，其中显示的是缩小版的桌面网站。

桌面浏览器的理想视口就是其默认视口。但在智能手机和平板电脑中，就需要拆解模拟的默认视口，令其等于理想视口。这需要通过HTML中的meta元素来做到。

移动设备中显示网页的矩形区域，我们称之为可见视口。

放大网页时，网页的某些部分会跑到可见视口之外。此时，我们看到的仍然是可见视口，而假想的那个约束“整个页面”的矩形区域，我们称之为布局视口。

3.2 配置视口

要让具有不同默认视口的设备都使用各自的理想视口，只要在页面的头部元素中添加一个小小的视口meta标签即可。

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

这行代码告诉浏览器，我们希望使用当前设备的理想尺寸（即device-width）作为视口宽度的基准。

initial-scale=布局视口÷可见视口

禁用缩放：

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1, maximum-scale=1,user-scalable=no" />

有些开发者喜欢禁用缩放，以便让自己的Web应用看起来更像原生的移动应用。

在<meta>标签中声明视口相关的配置是目前为止的推荐做法。我们还可以把视口声明放到HTML的一个style元素里。

<style>
@viewport {
    width: auto;
}
</style>

参考资料：

• 《精通CSS》— [英] 安迪·巴德、[瑞典] 埃米尔·比约克隆德