響應式佈局

時間 2020-04-01

標籤響應佈局简体版

原文原文鏈接

概念

Responsive design，意在實現不一樣屏幕分辨率的終端上瀏覽網頁的不一樣展現方式。經過響應式設計能使網站在手機和平板電腦上有更好的瀏覽閱讀體驗。

步驟

1. 設置 Meta 標籤

大多數移動瀏覽器將HTML頁面放大爲寬的視圖（viewport）以符合屏幕分辨率，可使用視圖的 meta標籤來進行重置。下面的視圖標籤告訴瀏覽器，使用設備的寬度做爲視圖寬度，按1：1的尺寸顯示並禁止初始的縮放。在 <head>標籤里加入這個meta標籤。

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

2.經過媒體查詢來設置樣式Media Queries

Media Queries 是響應式設計的核心，它可以和瀏覽器進行溝通，告訴瀏覽器頁面如何呈現，假如一個終端的分辨率小於980px，那麼能夠這樣寫:

// 這裏面的樣式會覆蓋掉以前所定義的樣式
@media screen and (max-width: 980px) {
  #head { … }
  #content { … }
  #footer { … }
}

3.設置多種視圖寬度

假如咱們要兼容ipad和iphone視圖，咱們能夠這樣設置：

/**ipad**/
@media only screen and (min-width:768px)and(max-width:1024px){}
/**iphone**/
@media only screen and (width:320px)and (width:768px){}

4.字體設置

到目前爲止，開發人員用到的字體單位大部分都是像素，雖然像素在普通網站上是Ok的，可是咱們仍然須要響應式字體。一個響應式的字體應關聯它的父容器的寬度，這樣才能適應客戶端屏幕。

css3引入了新的單位叫作rem,和em相似但對於Html元素，rem更方便使用。
rem是相對於根元素的，不要忘記重置根元素字體大小：

html{font-size:100%;}
完成後，你能夠定義響應式字體：
@media (min-width:640px){body{font-size:1rem;}}
@media (min-width:960px){body{font-size:1.2rem;}}
@media (min-width:1200px){body{font-size:1.5rem;}}

5.注意事項

寬度須要使用百分比

#head { width: 100% }
#content { width: 50%; }

處理圖片縮放的方法

給圖片指定的最大寬度爲百分比。假如圖片超過了，就縮小；假如圖片小了，就原尺寸輸出:css
```
img { width: auto; max-width: 100%; }
```

用::before和::after僞元素 +content 屬性來動態顯示一些內容。在 css3 中，任何元素均可以使用 content 屬性了，這個方法就是結合 css3 的 attr 屬性和 HTML 自定義屬性的功能。html

// HTML 結構
<img src="image.jpg"
     data-src-600px="image-600px.jpg"
     data-src-800px="image-800px.jpg"
     alt="">

// CSS 控制：
@media (min-device-width:600px) {
    img[data-src-600px] {
        content: attr(data-src-600px, url);
    }
}
@media (min-device-width:800px) {
    img[data-src-800px] {
        content: attr(data-src-800px, url);
    }
}

除了img標籤的圖片外咱們常常會遇到背景圖片，好比logo爲背景圖片：css3

#log a{
    display:block;
    width:100%;
    height:40px;
    text-indent:55rem;
    background-img:url(logo.png);
    background-repeat:no-repeat;
    background-size:100% 100%;
}
    // background-size是css3的新屬性，用於設置背景圖片的大小，有兩個可選值，第一個值用於指定背景圖的width，第2個值用於指定背景圖的height，若是隻指定一個值，那麼另外一個值默認爲auto。
    // background-size:cover; 等比擴展圖片來填滿元素
    // background-size:contain; 等比縮小圖片來適應元素的尺寸

其餘屬性

例如 pre ，iframe，video 等，都須要和img同樣控制好寬度。對於table，建議不要增長 padding 屬性，低分辨率下使用內容居中：

table th, table td { padding: 0 0; text-align: center; }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。