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 {
    width: 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 {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-size: 100% 100%;
    border: 1px solid red;
}

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

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

 

一般图片：

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

img {
    width: 100%;
    height: auto;
}

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

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

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

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 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-width: 400px) {
    body {
        background-image: url('img_flowers.jpg');
    }
}

视频

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

video {
    width: 100%;
    height: auto;
}

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

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