10.CSS3弹性布局、响应式布局、PS

响应式 Web 设计 - Viewport

响应式布局是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

优点： 

面对不同分辨率设备灵活性强

能够快捷解决多设备显示适应问题

缺点： 

兼容各种设备工作量大，效率低下

代码累赘，会出现隐藏无用的元素，加载时间加长

其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果

一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

(1)、什么是 Viewport

viewport 是用户网页的可视区域。

viewport 翻译为中文可以叫做"视区"。

手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

1. 、设置 Viewport

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

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

width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。

height：和 width 相对应，指定高度。

initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。

maximum-scale：允许用户缩放到的最大比例。

minimum-scale：允许用户缩放到的最小比例。

user-scalable：用户是否可以手动缩放。

1. 响应式 Web 设计 - 网格视图

1. 、什么是网格视图

很多网页都是基于网格设计的，这说明网页是按列来布局的。

使用网格视图有助于我们设计网页。这让我们向网页添加元素变的更简单。

响应式网格视图通常是 12 列，宽度为100%，在浏览器窗口大小调整时会自动伸缩。

 

1. 、创建响应式网格视图

首先确保所有的 HTML 元素都有 box-sizing 属性且设置为 border-box。

确保边距和边框包含在元素的宽度和高度间。

添加如下代码：

* { box-sizing: border-box;}

以下实例演示了简单的响应式网页，包含两列：

.menu {
    width: 25%;
    float: left;
}
.main {
    width: 75%;
    float: left;
}

12 列的网格系统可以更好的控制响应式网页。

首先我们可以计算每列的百分比: 100% / 12 列 = 8.33%。

在每列中指定 class， class="col-" 用于定义每列有几个 跨度：

.col-1 { width: 8.33%;}
.col-2 { width: 16.66%;}
.col-3 { width: 25%;}
.col-4 { width: 33.33%;}
.col-5 { width: 41.66%;}
.col-6 { width: 50%;}
.col-7 { width: 58.33%;}
.col-8 { width: 66.66%;}
.col-9 { width: 75%;}
.col-10 { width: 83.33%;}
.col-11 { width: 91.66%;}
.col-12 { width: 100%;}

所有的列向左浮动，间距(padding) 为 15px：

[class*="col-"] {
    float: left;
    padding: 15px;
    border: 1px solid red;
}

每一行使用 <div> 包裹。所有列数加起来应为 12：

<div class="row">
  <div class="col-3">...</div>
  <div class="col-9">...</div>
</div>

列中行为左浮动，并添加清除浮动：

.row:after {
    content: "";
    clear: both;
    display: block;
}

我们可以添加一些样式和颜色，让其更好看：

1. 响应式 Web 设计 - 媒体查询

1. 、定义和使用

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

1. 、CSS语法

动画是使元素从一种样式逐渐变化为另一种样式的效果。

@media only mediatype and|not (media feature) {
    CSS-Code;
}

你也可以针对不同的媒体使用不同 stylesheets :

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

1. 、媒体类型

值	描述
all	用于所有设备
aural	已废弃。用于语音和声音合成器