1. An example of
Responsive Web Design most central point that can be adapted to different flow layout viewport size.
1.1 simple to use
<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%;
}Floating the column to 100% of the width, in order to ensure that the line may comprise sub-elements floating.
1.2 Media Inquiries
If the viewport wider, it is possible to display more content on the screen within a.
If the visual media type of the screen window width greater than or equal 35em, on the use of the appropriate style.
@media only screen and (min-width: 35em) {
.row-quartet > * {
width: 50%;
}
.subcategory-featured {
width: 100%;
}
}
@mediaRules and @supportssimilar rules for the environment is the ability to display web pages.
Introducing media queries width value, called breakpoints . Nothing to break the rules associated with the type of device, whether mobile or any other device can be.
1.3 adding more breakpoints
Continue to increase the browser window, with the space increases, we can find ways to more efficiently utilize space.
@media only screen and (min-width: 50em) {
.row-quartet > * {
width: 25%;
}
.subcategory-featured {
width: 50%;
}
}
From a purely single column layout to start, and then use media queries to change the layout defined conditions, which is the basis for responsive Web design.
2. The origin of Responsive Web Design
Ethan Marcotte invented the "Responsive Web Design": https://alistapart.com/article/responsive-web-design
While responsive Web design as a design trend is relatively new, but a design fit different devices ideas it is very early.
Media queries (and its predecessor, media type) is that in some people call for adaptation browser layout technology background was able to become the standard.
By 2010, the media query has been widely supported by browsers.
Responsive Web design is quickly becoming the way of web design convention, and may become a "good Web design" synonymous in the future. (Responsive Web design refers to fit a variety of original equipment and a variety of screen sizes)
responsive than the CSS:
loaded first core resources, before deciding whether to load more resources according to the capabilities of the device. For example, "sandwich menu."
3. The browser viewport
视口是浏览器显示网页的矩形区域。
要恰当地使用视口进行响应式设计，需要理解视口的原理，以及如何操纵它。
在桌面浏览器上，视口的概念很直观，就是通过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》— [英] 安迪·巴德、[瑞典] 埃米尔·比约克隆德