css响应式设计

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：用户是否可以手动缩放。

CSS3 媒体查询：@media

采取UI框架的栅格化系统

背景图片设置：背景图片可以响应调整大小或缩放

1.background-size 属性设置为 "contain", 背景图片将按比例自适应内容区域。图片保持其比例不变：

div {
     100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    border: 1px solid red;
}

2.background-size 属性设置为 "100% 100%" ，背景图片将延展覆盖整个区域：

div {
     100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-size: 100% 100%;
    border: 1px solid red;
}

3. background-size 属性设置为 "cover"，则会把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。注意该属性保持了图片的比例因此背景图像的某些部分无法显示在背景定位区域中。

div {
     100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-size: cover;
    border: 1px solid red;
}

一般图片：

1.width 属性设置为 100%，根据上下范围实现响应式功能（但图片会比它的原始图片大）

img {
     100%;
    height: auto;
}

2. max-width 属性设置为 100%, 图片永远不会大于其原始大小

img {
    max- 100%;
    height: auto;
}

3.采用h5中的picture标签：设置不同的资源，第一个设置的资源为首选使用的

<picture>
  <source srcset="img_smallflower.jpg" media="(max- 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers">
</picture>

4.媒体查询

/* 设备小于 400px: */
body {
    background-image: url('img_smallflower.jpg');
}

/* 设备大于 400px (也等于): */
@media only screen and (min-device- 400px) {
    body {
        background-image: url('img_flowers.jpg');
    }
}

视频

1.width 属性设置为 100%，视频播放器会根据屏幕大小自动调整比例（视频播放器根据屏幕大小自动调整比例，且可以比原始尺寸大）

video {
     100%;
    height: auto;
}

2.max-width 属性设置为 100%, 视频播放器会根据屏幕自动调整比例，但不会超过其原始大小

video {
    max- 100%;
    height: auto;
}