高自適應

網頁布局中經常要定義元素的寬和高。但很多時候我們希望元素的大小能夠根據窗口或子元素

自動調整，這就是pc自適應。

自適應的優(yōu)點：

元素自適應在網頁布局中非常重要，它能夠使網頁顯示更靈活，可以適應在不同設備、不同窗口和不同分辨率下顯示。

寬度自適應

元素寬度設置為100%。（塊元素寬度默認為100%）

或者不設置寬度（width）;（寬度是父元素的寬度）

高度自適應

1)自適應元素高度：height:auto;或者不設置;（是子元素撐開父元素的高度）

?

2)元素高度自適應窗口高度

設置方法：html,body{height:100%;}

注：如果設置子元素的高度跟隨父元素的高度變化而變化，那么父元素必須有高度。

最小高度的自適應

min-height屬性：最小高度；(IE6瀏覽器不識別該屬性) ?

hack1:min-height:value;_height:value; ?

hack2:min-height:value; height:auto!important;height:value;

浮動元素父元素高度自適應（高度塌陷）

當子元素有浮動并且父元素沒有高度的情況下父元素會出現高度塌陷

高度塌陷的解決方法

hack1：給父元素添加聲明overflow:hidden;(觸發(fā)一個BFC)

hack2: 在浮動元素下方添加空div,并給該元素添加 聲明：div{clear:both; height:0; overflow:hidden;}

hack3:萬能清除浮動法

選擇符:after {
	content: "";
	clear: both;
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
}

visibility:hidden/隱藏

visibility:hidden;和display:none;的區(qū)別：

visibility:hidden;屬性會使對象不可見，但該對象在網頁所占的空間沒有改變，等于留出了一塊空白區(qū)域，而 display:none屬性會使這個對象徹底消失不顯示，也不再占用位置。

偽對象選擇符

1）、::after : 與content屬性一起使用，定義在對象后的內容。

語法：選擇符:：after{content:”文字”;}

選擇符:：after{content:url(圖片路徑)；}

如：div::after{content:url(logo.jpg);}

div::after{content:"文本內容";}

2）、::before: 與content屬性一起使用,定義在對象前 的內容。

div::before{content:"在其前放內容";}

3）、::first-letter 定義對象內第一個字符的樣式。

說明：

*(該偽元素只能用于塊級元素)

4）、::first-line:定義對象內第一行的樣式。

*(該偽元素只能用于塊級元素。)

全屏頁面

本文轉自知乎號：千鋒HTML5學院

么是響應式web網站

以前我寫網的網頁習慣的網頁都是定寬的，比如最外層設置一個寬度為980px的盒子，這是因為那時候的網頁主要顯示在pc端上，而pc端顯示器的大小差異不會特別大。于是固定寬度的樣式寫法成為了流行趨勢。但是隨著移動互聯網的到來，設備類型的增多，如智能手機，平板。那么屏幕大小的差異也就凸顯出來了，如果每一個屏幕設備寬度寫一個樣式的話，會發(fā)現存在大量重復的樣式代碼，且工作量會很大，于是我們需要一種減少重復樣式，讓樣式能夠自動適應屏幕的解決方案就出來了："響應式"。我們知道不同的設備擁有不同屏幕大小即視口(viewport)，那么我們不可能一個樣式適應所有的屏幕大小，那么響應式解決的就是網站自動去識別不同屏幕，然后去使用對應的樣式去適應屏幕。

注：“視口”(viewport),指顯示網頁的區(qū)域

響應式的核心技術

1.viewport屬性

為了能夠讓我們的網頁去適應屏幕的大小，我們需要添加一個meta屬性

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

2.媒體查詢

至此我們解決了讓網頁自動適應不同的視口大小，但是不同的視口大小要顯示不同的樣式，我們還需要借助媒體查詢來完成。CSS3規(guī)范分成很多模塊，媒體查詢（3級）只是其中一個模塊。利用媒體查詢，可以根據設備的能力應用特定的CSS樣式。比如，可以根據視口寬度、屏幕寬高比和朝向（水平還是垂直）等，只用幾行CSS代碼就改變內容的顯示方式。媒體查詢得到了廣泛實現。除了古老的IE（8及以下版本），幾乎所有瀏覽器都支持它。

媒體查詢的語法

說了這么多媒體查詢長什么樣子呢，我們來看一點示例代碼。

div {
    background:green
}

@media screen and (min-width:350px){
    div {
        background:red
    }
}

@media表示媒體查詢代碼，上面的內容含義是，如果是屏幕設備，并且視口寬度大于等于350px那么就會把div的背景顏色設置為紅色，由于代碼是由上向下循序解析的，所以，背景色紅色會覆蓋上面的背景色綠色的代碼。

注：因為我們接觸的設備都是有屏幕的所以screen可以省略

• 在 link 標簽中使用媒體查詢

<link rel="style sheet" type="text/css" media="(min-width:350px)" href="index.css">

這里會告訴瀏覽器，視口寬度大于等于350px時才加載index.css樣式文件。

• @import 中使用媒體查詢

@import url("base.css") screen and (max-width:350px);

css中可以通過import來導入其他的樣式文件，這里告訴瀏覽器視口寬度大于等于350px時才加載base.css樣式文件。

• 在css中使用媒體查詢

@media screen and (min-width:350px){
    div {
        background:red
    }
}

這里告訴瀏覽器視口寬度大于等于350px時把div的背景色設置為紅色。

媒體查詢中支持的屬性

其他媒體查詢最常用的屬性就是min-width和max-width，其他的屬性你可能一輩子都用不上

• width：視口寬度。
• height：視口高度。
• max-width：最大視口寬度
• min-width：最小視口寬度
• device-width：渲染表面的寬度（可以認為是設備屏幕的寬度）。
• device-height：渲染表面的高度（可以認為是設備屏幕的高度）。
• orientation：設備方向是水平還是垂直。
• aspect-ratio：視口的寬高比。16∶9的寬屏顯示器可以寫成aspect-ratio:16/9。 ? color：顏色組分的位深。比如min-color:16表示設備至少支持16位深。
• color-index：設備顏色查找表中的條目數，值必須是數值，且不能為負。
• monochrome：單色幀緩沖中表示每個像素的位數，值必須是數值（整數），比如
  monochrome: 2，且不能為負。
• resolution：屏幕或打印分辨率，比如min-resolution: 300dpi。也可以接受每厘
  米多少點，比如min-resolution: 118dpcm。 ? scan：針對電視的逐行掃描（progressive）和隔行掃描（interlace）。例如720p HD TV（720p
  中的p表示progressive，即逐行）可以使用scan: progressive來判斷； 而1080i HD TV
  （1080i中的i表示interlace，即隔行）可以使用scan: interlace來判斷。
• grid：設備基于柵格還是位圖。

3.響應式圖片

開發(fā)者不可能知道或預見瀏覽網站的所有設備，只有瀏覽器在打開和渲染內容時才會知道使用它的設備的具體情況（屏幕大小、設備能力等）。另一方面，只有開發(fā)者（你和我）知道自己手里有幾種大小的圖片。比如，我們有同一圖片的三個版本，分別是小、中、大，分別對應于相應的屏幕大小和分辨率。瀏覽器不知道這些，我們得想辦法讓它知道。簡言之，難點在于我們知道自己有什么圖片，瀏覽器知道用戶使用什么設備訪問網站以及最合適的圖片大小和分辨率是多少，兩個關鍵因素無法融合。

使用picture元素

<picture> 
 <source media="(min-width: 750px)" srcset="source-medium.jpg"> 
 <source media="(min-width: 350px)" srcset="source-small.jpg"> 
 <img src="source.jpg"> 
</picture>

以上代碼會根據視口寬度來適應使用不同的圖片，如果視口寬度大于等于750px那么使用source-medium.js圖片，否則，如果視口寬度大于等于350px使用source-small.jpg圖片，否則都不滿足條件使用source.jpg圖片。這里source的順序很重要，根據min-width大小按順序進行編寫，相反如果使用max-width就需要倒序編寫。這樣就可以根據不同大小視口使用不同大小的圖片。

雖然<picture>很好用，但瀏覽器支持并不是全面。幸運的是，您可以在不支持此元素的瀏覽器中使用，方法就是使用Picturefill.js，下載地址： https://scottjehl.github.io/picturefill。

<script>document.createElement("picture");</script>
<script src="js/picturefill.min.js" async></script>

第一個<script>塊用于無法識別<picture>元素的瀏覽器，如果瀏覽器在Picturefill完成加載之前用HTML解析它們，就可以防止出現問題。然后第二個塊加載Picturefill庫。

max-width

img { 
 max-width: 100%; 
}

這里聲明max-width，就是要保證所有圖片最大顯示為其自身的100%（即最大只可以顯示為自身那么大）。此時，如果包含圖片的元素（比如包含圖片的body或div）比圖片固有寬度小，圖片會縮放占滿最大可用空間。

為什么不用width:100%?
如果使用width:100%的話那么，圖片的寬度就會是父容器的寬度，如果父容器的寬度大于圖片的真實寬度，那么圖片就會被拉伸變形。而max-width：100%則不會，因為寬度默認是auto那么會顯示真實寬度，如果寬度大于父容器寬度，也會等比例縮放到父容器寬度

4.彈性布局

在很早很早之前，網站的寬度大都以百分比形式定義。百分比布局使得網頁寬度能夠隨著查看它們的屏幕窗口大小變化，因而得名彈性布局。后來出現了固定寬度的布局方式，現如今，我們要做響應式設計了，又得回頭撿起彈性布局設計。相信前端人員都用過flexbox，使用起來也非常的爽，之前垂直居中，瀑布流等寫起來非常痛苦，但flexbox就很方便的解決了這些問題。

前綴

flexbox是css3中的屬性，所以為了兼容各種瀏覽器需要添加各種瀏覽器對應的前綴，一下提供自動加前綴的方法：

• 1.使用智能的IDE,如：webstorm，它能夠自動添加前綴
• 2.使用compass
• 3.使用Autoprefixer （https://github.com/postcss/autoprefixer）

主要屬性

• display:flex
  聲明你的盒子是一個flexbox
• flex-direction
  聲明主軸的方向

flex中沒有水平和垂直的說法，只有主軸和側軸的說法，比如，flex-direction:row，那么你的主軸方向為水平方向，側軸方向為垂直方向，于是，justify-content: center以主軸方向對齊即當前為水平方向對齊，align-content: center以側軸方向對齊即當前為垂直方向對齊，flex-direction:clunm反之亦然

舉例：

垂直居中

<style>

    div{
        width: 400px;
        height: 300px;
        margin: 200px auto;
        display: flex;
        flex-direction: row;  //默認主軸方向是row即水平方向
        flex-wrap: wrap; //允許換行
        align-content: center;  //設置側軸方向居中
        background-color: paleturquoise;
    }
    p{
        width: 100px;
        height: 100px;
        line-height: 100px;
        background-color: rebeccapurple;
        text-align: center;
    }
</style>
<div>
    <p>hello world</p>
</div>

水平偏移