响应式：调整位置；自适应：调整大小
viewport 属性方法手机浏览器
手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），但可以通过平移和缩放来查看网页的各个部分。该属性在元信息标签<meta>中使用。
| width | 设定的网页视图宽度，可以设定为390等数字固定值，或者指定为屏幕宽度device-width |
|---|---|
| height | 设定的网页视图高度 |
| initial-scale | 初始缩放比例，也即是当页面第一次加载时候缩放比例 |
| maximum-scale | 允许用户缩放到的最大比例 |
| minimum-scale | 允许用户缩放到的最小比例 |
| user-scalable | 是否允许用户手动缩放 |
使用格式：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
网格视图方法
如果把网页划分成网格来设计网页，可以通过划分列的方式来进行响应式布局。
创建网格视图布局
- 1、定义box-sizing 属性
-
border-box ，对元素宽度和高度包括padding和border的指定，可以为三个值，content-box（default），border-box，padding-box。
box-sizing 属性 描述 content-box（default） border和padding不计算入width之内 padding-box padding计算入width内 border-box border和padding计算入width之内 在创建纵列网格视图时，首先确保所有的 HTML 元素都有 box-sizing 属性且设置为 border-box。
//书写格式 *{ box-sizing: border-box; }-webkit-box-sizing: 100px; // for ios-safari, android -moz-box-sizing:100px; //for ff box-sizing:100px; //for other - 2、定义网格数量
-
12 列的网格系统可以更好的控制响应式网页
-
先计算每列的百分比: 100% / 12 列 =
8.33%
进而继续指定相应列的class，设定class="col_"来确定包含有几个列
<style>
/* 包含的列数 */
.col-1 {width: 8.33%;} /* 包含一个列 */
.col-2 {width: 16.66%;} /* 包含二个列 */
.col-3 {width: 25%;} /* 包含三个列 */
.col-4 {width: 33.33%;} /* 包含4个列 */
.col-5 {width: 41.66%;} /* 包含5个列 */
.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%;} /*包含12个列 */
</style>
- 3、统一设置放于网格列中的元素的样式(可选)CSS
-
[class^=“col_”] 匹配以
col_ 开头的类
[class*=“col_”] 匹配包含col_的类
[class$=“col_”] 匹配以col_ 结尾的类
<style>
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}
</style>
<body>
<!--每一行使用 <div> 包裹。所有列数加起来应为 12-->
<div class="row">
<div class="col-3">...</div>
<div class="col-9">...</div>
</div>
</body>
@media 媒体查询
媒体查询可以在网页设计中添加断点，不同的断点呈现不同的效果。
<style>
/* 优先设计pc端*/
/* For desktop: */
.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%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
/* For desktop: */
@media only screen and (min-width: 768px) {
[class*="col-"] {
width: 100%;
}
}
/* 优先设计移动端*/
/* For mobile phones: */
.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%;}
/*注意两组类样式是相同的，但名称不同 (col- 和 col-m-):*/
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.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%;}
}
</style>
图片、视频如何自适应
1、直接设置width，会大于图片原始值
<style>
/*图片会比它的原始图片所设置的尺寸( width="460" height="345")大*/
img {
width: 100%;
height: auto;
}
</style>
<img src="img_chania.jpg" width="460" height="345">
2、设置max-width，限定在图片的原始值之内，不会超出
<style>
/*图片不会比它的原始图片所设置的尺寸( width="460" height="345")大*/
img {
max-width: 100%;
height: auto; /* 此时，在标签中的 height 设置无效*/
}
</style>
<img src="img_chania.jpg" width="460" height="345">
/*设置外层 div 的最大高度，并设置视频的最大宽度，来让视频填充满 div ，且实现等比例缩放*/
<style>
.body_details_content{width: 100%;max-height: 200px;display: flex;justify-content: center;}
.body_details_content video{max-width:100%;}
</style>
<div class="body_details_content">
<video controls="controls" preload="metadata" width="100%">
<source type="audio/mp4" src="video/wx_camera_1529844508373.mp4"></source>
</video>
</div>
3、设置为背景图片
<style>
/* 第一：通过 background-size:contain 图片会自适应于 div 中，按照等比例缩放，不会发生图片变形 */
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}
/* 第二： background-size 属性设置为 "100% 100%" ，背景图片将延展覆盖整个区域，有可能发生变形 */
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
}
/* 第三：background-size 属性设置为 "cover"，则会把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。注意该属性保持了图片的比例因此 背景图像的某些部分无法显示在背景定位区域中*/
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
/* 第四：不同设备显示不同的图片*/
body { /* For width smaller than 400px: */
background-image: url('img_smallflower.jpg');
}
@media only screen and (min-width: 400px) {
body { /* For width 400px and larger: */
background-image: url('img_flowers.jpg');
}
}
/* 可以使用媒体查询的 min-device-width 替代 min-width 属性，它将检测的是设备宽度而不是浏览器宽度。浏览器大小重置时，图片大小不会改变。*/
@media only screen and (min-device-width: 400px) {
body { /* For width 400px and larger: */
background-image: url('img_flowers.jpg');
}
}
</style>
4、<picture>标签设置多张图片，<video>设置多个视频
<picture> <!--srcset 必需，图片资源，不支持 <picture> 元素的浏览器你也可以定义 <img> 元素来替代。-->
//首选项(第一个设置的资源先加载显示)，屏幕缩小至400px以下时，显示的图片
<source srcset="img_smallflower.jpg" media="(max-width: 400px)">
//一般情况下，初始时的屏幕没有缩小，因此该图片先加载
<source srcset="img_flowers.jpg">
//初始时候的屏幕没有缩小，初始图片加载和不加载的情况
<img src="img_flowers.jpg" alt="Flowers">
</picture>
<video width="320" height="240" controls >
<source src="movie.mp4" type="video/mp4" media="(max-width: 400px)">
<source src="movie.ogg" type="video/ogg" > //先显示
</video>