20160106

响应式设计-2

接20160104的介绍
在做2048 (2048源码)时用到响应式设计的棋盘和棋子。遂看子杰写的讲响应式设计的ppt。

review

  • Visual viewport,指的是浏览器可视区的大小。通过window.innerWidth获取
  • layout viewport,用于决定页面内容的布局及文本在何处换行。网页以layout viewport为基准进行渲染,网页超出layout viewport的部分需要通过滚动条查看。而layout viewport超过visual viewport的部分也需要通过滚动条查看。通过document.documentElement.clientWidth获取
  • 实际情况下layout viewport填满了visual viewport,visual viewport缩放至layout viewport的大小

禁止浏览器自动缩放

me: 因为visual viewport会自动和layout viewport相等。所以通过草稿纸上的计算…
如果不加meta标签,14px的文字在ipad上会显示为14*4.84=56px,而在iphone上会显示为14*0.24=3.36px
根本看不清楚…

因此,我们通过引入一个meta标签,禁止浏览器自动缩放的功能:

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

该标签将layout viewport的宽度设置为device-width,且初始缩放比例设置为1.0。这里的device-width就是我们要说到的第三个概念idea viewport

Idea viewport起到中间层的作用,表示设备屏幕的CSS宽度。每种设备都有其固有的idea viewport值,例如iPhone的宽度为320px,iPad的宽度为1024px。
Idea viewport等于未缩放情况下的visual viewport。

设置layout viewport为width=device-width,initial-scale=1.0,即设置layout viewport等于idea viewport,将会禁止页面的缩放,从而保证元素的视觉大小不会改变。但如果页面的宽度超过了layout viewport的宽度,将会导致滚动条的出现。因此,我们需要针对不同的viewport进行设计。

me: 所以将layout viewport 设置为设备屏幕的宽度(不变的idea viewpoint)
从而保证元素的视觉大小不会改变。
这样不仅文字的缩放变为1:1了,div等等也是1:1了,所以要根据不同的设备来规定div的大小。

如果页面的宽度超过设置的设备的物理宽度,还是要出现滚动条,所以要查询设备的物理宽度是多少。

媒体查询

媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果。

媒体查询引入

1.<!-- link元素中使用CSS媒体查询 -->
2.<link rel="stylesheet" media="only screen and (max-width: 800px)" href=style2.css" />
1./* 样式表中使用CSS媒体查询 */
2.@media (max-width: 600px),(orientation: landscape) {
3. .header{
4. display: none;
5. }

6.}

landscape : 横屏;portrait : 竖屏;

其语句由媒体类型媒体特性逻辑操作符构成。如果媒体查询中的媒体类型与文档要展示的设备相符则查询结果为真,并且媒体查询中的所有表达式为真,则相关样式会根据优先级被应用。

Alt text
Alt text
Alt text

需要注意:

  • 媒体查询会使得其中样式的优先级提升(需媒体查询中的CSS优先级大于等于媒体查询外的CSS优先级);
  • 使用媒体查询,产生的结果是样式的叠加,而不是样式的二选一;
  • link 标签上带有媒体查询的样式表,无论是否被应用,都将被下载。

仅采用媒体查询,通过设置几个断点,将元素宽度的单位设置为绝对单位,来适应不同视口的设计,有些许不足。其一,在样式切换时没有一个过渡的效果,显得十分突兀;其二,可能会导致当视口的宽度位于两断点之间时,网页需要滚动条才能完整显示。因此,如果有必要,可以设置元素的宽度为百分比或者auto

百分比/auto宽度

设置宽度为百分比块级元素宽度满足以下公式:

其中,上下文指的是离目标元素最近的块级父元素,会忽略内联元素的宽度。

设置宽度为auto,默认box-sizing为content-box,块级元素宽度满足以下公式:

其中,上下文指的是离目标元素最近的块级父元素,会忽略内联元素的宽度。

当视口宽度太小,按百分比计算而来的容器宽度太小,出现无法在一行中容下所有的元素的情况,将会产生滚动条。为避免这种情况的发生,采用流动布局,即为每个元素添加float属性。当出现元素超出容器的情况时,后面的元素将会自动换行。

将媒体查询、百分比/auto宽度、流动布局三者结合,便产生了一种适用于不同设备的良好布局方式——响应式布局