HTML CSS 的響應式、自適應方法
阿新 • • 發佈：2019-01-11
響應式：調整位置；自適應：調整大小
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>