响应式网页设计基础

http://wf.uisdc.com/cn/getting-started/your-first-multi-screen-site/responsive.html

添加一个视窗：

视窗的配置只会出现在head标签当中，并且只需要声明一次。

　　这段代码的意思是，让viewport的宽度等于物理设备上的真实分辨率，不允许用户缩放。一都主流的web app都是这么设置的，它的作用其实是故意舍弃viewport，不缩放页面，这样dpi肯定和设备上的真实分辨率是一样的，不做任何缩放，网页会因此显得更高细腻。

　　viewport要解决的问题是：无视设备的真实分辨率，直接通过dpi，在物理尺寸和浏览器之间重设分辨率，这个分辨率和设备的分辨率无关。比如，你拿个3.5寸-320 * 480的iphone3 gs、3.5寸-640 * 960的iphone4或者9.7寸-1024*768的ipad2，虽然设备的分辨率不同,物理尺寸也不同，但你可以通过设置viewport让它们在浏览器里有相同的分辨率。比如说，你的网站是800px宽，你可以通过设置viewport的width=800，来让你的网站在这三个不同的设备上都刚好满屏显示你的网站。

　　使用元视口值 width=device-width 控制页面适应不同分辨率的屏幕宽度。无论是手机的小屏幕或桌面显示器，页面将会根据不同的屏幕尺寸重新对内容进行排版。

　一些浏览器在用户旋转为横向浏览的时候仅仅是保持页面宽度不变并缩放网页内容而不是对屏幕内容进行重新排版。加入属性initial-scale=1使页面无论在什么情况下都将CSS像素与屏幕像素的比例保持在1:1，并允许页面优先采用全尺寸屏幕宽度。

　　initial-scale属性控制页面最初加载时的缩放等级。maximum-scale、minimum-scale及user-scalable属性控制允许用户以怎样的方式放大或缩小页面。

　　　　　 https://www.w3schools.com/css/css_rwd_viewport.asp

https://developer.mozilla.org/zh-CN/docs/Mobile/Viewport_meta_tag

关键要点

media queries可以根据不同设备的特性来应用不同的样式。
尽可能使用 min-width 代替 min-device-width 来保证最宽广的体验。
使用相对大小数值来设定元素大小，以防打乱布局。

用 CSS media queries （设备查询）来实现响应式

设备查询技术(Media Queries)

<link rel="stylesheet" href="print.css" media="print">

在CSS文件里植入应用media query的方式: @media 和 @import。

@media print {
  /* print style sheets go here */
}

@import url(print.css) print;

考虑到性能因素，相比起 @import 语句，前面提到的两种方式更受欢迎。

如何选择断点

关键要点

以断点为基础来创建内容，绝不可以基于特定的设备，产品以及品牌。
先为最小的设备设计，然后一步一步的强化体验同时支持更多的视口大小。
把每行的字数控制在70个到80个之间。

选出主要断点：由小到大

　　先为适配小屏幕尺寸的内容设定断点，之后将屏幕尺寸不断扩大直至需要更多的断点。这使你优化断点并使断点始终保持最少成为可能。

　　接下来重新调整浏览器的尺寸，直到各个页面元素之间的空白大得影响美观。虽说这多少会受到主观因素的影响，不过600px肯定已经超出了美观的范畴。

　　在600px处加入一个断点，创建两种新的样式表，当浏览器宽度小于等于600px时使用第一种样式表，而当浏览器宽度大于600px时选用第二种样式表。

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

　　最后一步，重新构建CSS。在这个例子中，我们在 weather.css 中设置了一些通用的样式，如字体，图标，基本定位与颜色。为小屏幕设定的布局将放置于 weather-small.css，而为大屏幕设计的样式则放置在 weather-large.css.

优化文本阅读体验

　　传统阅读观认为理想的阅读每行应有70到80个字符（约为8到10个英语单词），因此当一个文本框的宽度超过10个单词时，是时候考虑加入一个断点了。

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

background-size: cover; // 使该元素会在保持原比例上自由拉伸。

在我们的产品页面当中，看起来我们需要做：

限制最大宽度。
修改元素的内边距以及缩小字码。
使表格与标题内容浮动对齐。
使视频始终浮动在内容周围。
缩小图片大小并且让他们出现在更好的格局里面。

这个容器会包含一个简单的 div 在下面的表格当中:

.container {

margin: auto;

max- 800px;

}