小白心得

        今天在做頁面的時候發現當我把瀏覽器視窗縮小的時候，裡面的控制元件溢位我想要的邊界了，然後我到之前在網上看

到的所謂“自適應”這個詞語，我查了一下這個“自適應佈局”，它又叫做響應式佈局，主要是針對頁面在不同的裝置

不同的螢幕大小不同的解析度下對頁面佈局的自動適應，其實在我的理解裡就是傳說中的等比例縮放，或許這也並不是

絕對的，只是個人的理解而已。現在有很多前端開發框架都有響應式佈局的功能，Bootstrap這個開發框架就包含這樣的類，

說道響應式佈局首先想到了CSS3裡面的 Media Query（媒介查詢）。

那麼這個Media Query（媒介查詢） 是什麼呢？這裡借用一下百度百科的一段話：

  一、      通過不同的媒介型別和條件定義樣式表規則。媒介查詢讓CSS可以更精確作用於不同的媒介型別和同一媒介的不同條件。媒介查詢的大部分媒介特性都接受min和max用於表達”大於或等於”和”小於或等於”。如：width會有min-width和max-width媒介查詢可以被用在CSS中的@media和@import規則上，也可以被用在HTML和XML中。通過這個標籤屬性，我們可以很方便的在不同的裝置下實現豐富的介面，特別是移動裝置，將會運用更加的廣泛。

用法

@media 裝置名 only （選取條件） not （選取條件） and（裝置選取條件），裝置二{sRules}

舉個例子：

@media only screen and(max-width:740px){
   /*寫對應的樣式*/
}
 

@media only screen and(max-width:980px){
   /*這個就是螢幕小於等於980px */
   /*樣式*/
}

 二、 之後我又看到某個網頁說有新的單位能夠實現自適應，這些單位是 vw，vh，vmin，vmax。

 1vw = 當前檢視視窗（viewport）1%的寬度

h2{
  text-align:center;
  font-size:4vw;
  font-weight:bold;
  margin:0;
}
 

看看效果

上面這個圖是網頁最大化時候的截圖

然後這個就是縮小之後的截圖，我特意把右邊白色的地方也截圖，好像沒什麼說服力，如果想看更好的效果可以看下面這個頁面，然後就嘗試下縮放瀏覽器視窗，看看效果，這是用這個單位寫的樣式，然後如果用px單位就會有溢位表框的效果，這裡面不只是font-size能用vw單位，其他的涉及到用長度寬度的也能用

我覺得這些新的單位很好用，當然更加專業更加全面的相容的響應式佈局應該是第一種，第二種的話小頁面的話還是可以的