前端各種布局合集

圣杯布局

1. DOM結(jié)構(gòu)

<div id="header"></div>
<div id="container">
  <div id="center" class="column"></div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
</div>
<div id="footer"></div>

首先定義出整個布局的DOM結(jié)構(gòu)，主體部分是由container包裹的center,left,right三列少梁，其中center定義在最前面。

2. CSS代碼

假設(shè)左側(cè)的固定寬度為200px，右側(cè)的固定寬度為150px袋哼，則首先在container上設(shè)置：

#container {
  padding-left: 200px; 
  padding-right: 150px;
}

為左右兩列預留出相應(yīng)的空間，得到如下示意圖：

隨后分別為三列設(shè)置寬度與浮動闸衫，同時對footer設(shè)置清除浮動：

#container .column {
  float: left;
}

#center {
  width: 100%;
}

#left {
  width: 200px; 
}

#right {
  width: 150px; 
}

#footer {
  clear: both;
}

得到如下效果：

根據(jù)浮動的特性涛贯，由于center的寬度為100%，即占據(jù)了第一行的所有空間蔚出，所以left和right被“擠”到了第二行弟翘。

接下來的工作是將left放置到之前預留出的位置上，這里使用負外邊距（nagetive margin）：

#left {
  width: 200px; 
  margin-left: -100%;
}

得到：

隨后還需要使用定位(position)方法：

#left {
  width: 200px; 
  margin-left: -100%;
  position: relative;
  right: 200px;
}

這里使用position: relative和right: 200px將left的位置在原有位置基礎(chǔ)上左移200px骄酗，以完成left的放置：

接下來放置right稀余，只需添加一條聲明即可：

#right {
  width: 150px; 
  margin-right: -150px; 
}

得到最終的效果圖：

至此，布局效果完成趋翻。不過還需要考慮最后一步睛琳，那就是頁面的最小寬度：要想保證該布局效果正常顯示，由于兩側(cè)都具有固定的寬度踏烙，所以需要給定頁面一個最小的寬度师骗，但這并不只是簡單的200+150=350px≈娴郏回想之前left使用了position: relative丧凤，所以就意味著在center開始的區(qū)域，還存在著一個left的寬度步脓。所以頁面的最小寬度應(yīng)該設(shè)置為200+150+200=550px：

body {
  min-width: 550px;
}

綜上所述愿待，圣杯布局的CSS代碼為：

body {
  min-width: 550px;
}

#container {
  padding-left: 200px; 
  padding-right: 150px;
}

#container .column {
  float: left;
}

#center {
  width: 100%;
}

#left {
  width: 200px; 
  margin-left: -100%;
  position: relative;
  right: 200px;
}

#right {
  width: 150px; 
  margin-right: -150px; 
}

#footer {
  clear: both;
}

關(guān)于圣杯布局的示例，可參考：圣杯布局

最后提醒一下很多朋友可能會忽略的小細節(jié)：在#center中靴患，包含了一條聲明width: 100%仍侥，這是中間欄能夠做到自適應(yīng)的關(guān)鍵≡Ь可能會有朋友認為不需要設(shè)置這條聲明农渊，因為覺得center在不設(shè)置寬度的情況下會默認將寬度設(shè)置為父元素(container)的100%寬度。但需要注意到或颊，center是浮動元素砸紊，由于浮動具有包裹性，在不顯式設(shè)置寬度的情況下會自動“收縮”到內(nèi)容的尺寸大小囱挑。如果去掉width: 100%醉顽，則當中間欄不包含或者包含較少內(nèi)容時，整個布局會“崩掉”平挑，而達不到這樣的效果：

雙飛翼布局

1. DOM結(jié)構(gòu)

<body>
  <div id="header"></div>
  <div id="container" class="column">
    <div id="center"></div>
  </div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
  <div id="footer"></div>
<body>

雙飛翼布局的DOM結(jié)構(gòu)與圣杯布局的區(qū)別是用container僅包裹住center游添，另外將.column類從center移至container上系草。

2. CSS代碼

按照與圣杯布局相同的思路，首先設(shè)置各列的寬度與浮動唆涝，并且為左右兩列預留出空間找都，以及為footer設(shè)置浮動清除：

#container {
  width: 100%;
}

.column {
  float: left;
}

#center {
  margin-left: 200px;
  margin-right: 150px;
}

#left {
  width: 200px; 
}

#right {
  width: 150px; 
}

#footer {
  clear: both;
}

得到如下效果示意圖：

以上代碼將container,left,right設(shè)置為float: left，而在container內(nèi)部廊酣，center由于沒有設(shè)置浮動能耻，所以其寬度默認為container的100%寬度，通過對其設(shè)置margin-left和margin-right為左右兩列預留出了空間啰扛。

將left放置到預留位置：

#left {
  width: 200px; 
  margin-left: -100%;
}

得到：

將right放置到預留位置：

#right {
  width: 150px; 
  margin-left: -150px;
}

得到最終效果：

最后計算最小頁面寬度：由于雙飛翼布局沒有用到position:relative進行定位嚎京，所以最小頁面寬度應(yīng)該為200+150=350px。但是當頁面寬度縮小到350px附近時隐解，會擠占中間欄的寬度，使得其內(nèi)容被右側(cè)欄覆蓋诫睬，如下所示：

因此在設(shè)置最小頁面寬度時煞茫，應(yīng)該適當增加一些寬度以供中間欄使用（假設(shè)為150px），則有：

body {
  min-width: 500px;
}

至此雙飛翼布局大功告成摄凡！其布局整體代碼為：

body {
  min-width: 500px;
}

#container {
  width: 100%;
}

.column {
  float: left;
}

#center {
  margin-left: 200px;
  margin-right: 150px;
}

#left {
  width: 200px; 
  margin-left: -100%;
}

#right {
  width: 150px; 
  margin-left: -150px;
}

#footer {
  clear: both;
}

關(guān)于雙飛翼布局的示例续徽，可參考：雙飛翼布局

總結(jié)與思考

圣杯布局和雙飛翼布局的實現(xiàn)方法略有差異，不過都遵循了以下要點：

兩側(cè)寬度固定亲澡，中間寬度自適應(yīng)
中間部分在DOM結(jié)構(gòu)上優(yōu)先钦扭，以便先行渲染
允許三列中的任意一列成為最高列
只需要使用一個額外的<div>標簽

通過對圣杯布局和雙飛翼布局的介紹可以看出，圣杯布局在DOM結(jié)構(gòu)上顯得更加直觀和自然床绪，且在日常開發(fā)過程中客情，更容易形成這樣的DOM結(jié)構(gòu)（通常<aside>和<article>/<section>一起被嵌套在<main>中）；而雙飛翼布局在實現(xiàn)上由于不需要使用定位癞己，所以更加簡潔膀斋，且允許的頁面最小寬度通常比圣杯布局更小。

其實通過思考不難發(fā)現(xiàn)痹雅，兩者在代碼實現(xiàn)上都額外引入了一個<div>標簽仰担，其目的都是為了既能保證中間欄產(chǎn)生浮動（浮動后還必須顯式設(shè)置寬度），又能限制自身寬度為兩側(cè)欄留出空間绩社。

從這個角度出發(fā)摔蓝，如果去掉額外添加的<div>標簽，能否完成相同的布局呢愉耙？答案是肯定的贮尉，不過這需要在兼容性上做出犧牲：

DOM結(jié)構(gòu)

<div id="header"></div>
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
<div id="footer"></div>

去掉額外的<div>標簽后，得到的DOM結(jié)構(gòu)如上所示劲阎，基于雙飛翼布局的實現(xiàn)思路绘盟，只需要在center上做出修改：

1. 使用calc()

.column {
  float: left;
}

#center {
  margin-left: 200px;
  margin-right: 150px;
  width: calc(100% - 350px);
}

通過calc()可以十分方便地計算出center應(yīng)該占據(jù)的自適應(yīng)寬度，目前calc()支持到IE9。

2. 使用border-box

.column {
  float: left;
}

#center {
  padding-left: 200px;
  padding-right: 150px;
  box-sizing: border-box;
  width: 100%;
}

使用border-box可以將center的整個盒模型寬度設(shè)置為父元素的100%寬度龄毡，此時再利用padding-left和padding-right可以自動得到中間欄的自適應(yīng)寬度吠卷。不過需要注意的是，由于padding是盒子的一部分沦零，所以padding部分會具有中間欄的背景色祭隔，當中間欄高于側(cè)欄時，會出現(xiàn)這樣的情況：

目前box-sizing支持到IE8路操。

3. 使用flex

這里使用flex還是需要與圣杯布局相同的DOM結(jié)構(gòu)疾渴，不過在實現(xiàn)上將更加簡單：

<!-- DOM結(jié)構(gòu) -->
<div id="container">
  <div id="center"></div>
  <div id="left"></div>
  <div id="right"></div>
</div>

CSS代碼如下：

#container {
    display: flex;
}

#center {
    flex: 1;
}

#left {
    flex: 0 0 200px;
    order: -1;
}

#right {
    flex: 0 0 150px;
}

多列布局

在我們?nèi)粘ｉ_發(fā)中布局是我們必不可少的步驟，今天介紹日常開發(fā)中常見的幾種頁面布局方式屯仗，如有錯誤搞坝，歡迎指正，少廢話魁袜，直接上代碼桩撮。

1：左邊定寬右邊不定寬

如圖：

html代碼

 <div class="parent">
  <div class="left">
    <p>左邊固定寬度100px</p>
  </div> 
  <div class="right">
    <p>右邊寬度不固定</p>
    <p>右邊寬度不固定</p>
  </div>
</div>

css代碼一

.left{
  width: 100px;
  float: left;
}
  .left p{
    background:red;
  }
  .right{
    margin-left: 120px;
  }
  .right p{
    background: pink;
  }

css代碼二

  .left{
    width: 100px;
    float: left;
  }
    .left p{
      background:red;
    }
    .right{
      overflow: hidden;
    }
    .right p{
      background: pink;
    }

css代碼三

.parent{
  display: table;
  width: 100%;
  table-layout: fixed;
}
  .left,.right{
    display: table-cell;
  }
  .left{
    width: 100px
  }
  .left p{
    background:red;
  }
  .right p{
    background: pink;
  }

css代碼四

.parent{
  display: flex;
}
  .left{
    width: 100px; 
    margin-right: 20px;
    background:red;
  }
  .right {
    background: pink;
    flex: 1
  }

現(xiàn)代開發(fā)不考慮老版本瀏覽器兼容更多喜歡flex布局，尤其是移動端峰弹，如果pc端考慮到兼容問題則前面的比較合適,還有兩列定寬右邊不定寬道理一樣

2：左右等高布局

如圖：

html代碼

<div class="parent">
  <div class="left">
    <p>我的高度跟隨右邊的高度</p>
  </div> 
  <div class="right">
    <p>右邊寬度不固定</p>
    <p>右邊寬度不固定</p>
    <p>右邊寬度不固定</p>
    <p>右邊寬度不固定</p>
    <p>右邊寬度不固定</p>
    <p>右邊寬度不固定</p>
    <p>右邊寬度不固定</p>
    <p>右邊寬度不固定</p>
  </div>
 </div>

css代碼一

.parent{
  display: table;
  width: 100%;
  table-layout: fixed;
}
  .left,.right{
    display: table-cell;
  }
  .left {
    width: 100px;
    background: red;
    margin-right: 60px;
  }
  .right{
    background: pink;
  }

css代碼二

.parent{
  display: flex;
}
.left {
  width: 100px;
  background: red;
  margin-right: 20px;
 }
.right{
  flex: 1;
  background: pink;
}

3：等寬布局

如圖：

html代碼

<div class="parent_flex">
  <div class="parent">
    <div class="column"><p>1</p></div>
    <div class="column"><p>2</p></div>
    <div class="column"><p>3</p></div>
    <div class="column"><p>4</p></div>
  </div>
 </div>

css代碼一

 .parent_flex{
  margin-left: -20px;
}
  .parent{
    display: table;
    width: 100%;
    table-layout: fixed;
    background: #ccc;
    height: 200px;
  }
  .parent .column{
    display: table-cell;
    padding-left: 20px;
  } 
  .parent .column p{
    background: pink;
  }

css代碼二

  .parent{
    width: 80%;
    background: #ccc;
    height: 300px;
    display: flex;
    margin:0 auto;
  }
    .parent .column{
      height: 150px;
      background: pink;
      flex: 1;
    }
    .column+.column{
      margin-left: 20px;
    }

4：兩邊定寬中間不定寬

如圖：

html代碼：

<div class="parent">
  <div class="left"><p>左邊</p></div>
  <div class="right"><p>右邊</p></div>
  <div class="center"><p>中間</p></div>
</div>

css代碼一

.parent{
  width: 80%;
  background: #ccc;
  margin:0 auto;
}
  .left{
    width: 100px;
    float: left;
    margin-right: 10px;
    background: red;
  }
  .right{ 
    width: 100px;
    float: right;
    margin-left: 10px;
    background: red;
  }
  .center{
    overflow: hidden;
    background: pink;
  }

上面的寫法就是需要交換div center 的代碼放到后面浮動的方式來布局下面用table或flex 就不需要

html代碼二

<div class="parent">
  <div class="left"><p>左邊</p></div>
  <div class="center"><p>中間</p></div>
  <div class="right"><p>右邊</p></div>
</div>

css代碼一

.parent{
  width: 100%;
  background: #ccc;
  margin:0 auto;
  display: table;
  table-layout: fixed;
}
  .left{
    width: 100px;
    padding-right: 10px;
    display: table-cell;
  }
  .right{
    width: 100px;
    padding-left: 10px;
    display: table-cell;
  }
  .center{
    display: table-cell;
  }
  p{
    background: pink;
  }

css代碼二

.parent{
  width: 100%;
  background: #ccc;
  display: flex;
  height: 200px;
}
  .left,.right{
    background: red;
    width: 100px;
  }
  .left{
    margin-right: 10px;
  }
  .right{
    margin-left: 10px;
  }
  .center{
    flex: 1;
    background: pink;
  }

彈性布局

一店量、CSS3彈性盒子

彈性盒子是CSS3的一種新布局模式。
CSS3 彈性盒（ Flexible Box 或 flexbox）鞠呈，是一種當頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時確保元素擁有恰當?shù)男袨榈牟季址绞健?br> 引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列融师、對齊和分配空白空間。

二蚁吝、瀏覽器支持

圖片中的數(shù)字表示支持該屬性的第一個瀏覽器的版本號旱爆。緊跟在數(shù)字后面的 -webkit- 或 -moz- 為指定瀏覽器的前綴。

三灭将、CSS3 彈性盒子內(nèi)容

彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成疼鸟。
彈性容器通過設(shè)置 display屬性的值為flex或inline-flex將其定義為彈性容器。
彈性容器內(nèi)包含了一個或多個彈性子元素庙曙。

注意： 彈性容器外及彈性子元素內(nèi)是正常渲染的空镜。彈性盒子只定義了彈性子元素如何在彈性容器內(nèi)布局。

彈性子元素通常在彈性盒子內(nèi)一行顯示捌朴。默認情況每個容器只有一行吴攒。

以下元素展示了彈性子元素在一行內(nèi)顯示，從左到右:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>FLEX</title>
    <style>
      .flex-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 1200px;
        height: 640px;
        background-color: lightsteelblue;
      }
      .flex-container .flex-item {
        width: 320px;
        height: 240px;
        margin: 10px;
        background-color:lightsalmon;
      }
    </style>
</head>
<body>
  <div class="flex-container">
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
  </div>
</body>
</html>

四砂蔽、CSS3 彈性盒子常用屬性

屬性	描述
flex-direction	指定彈性容器中子元素排列方式
flex-wrap	設(shè)置彈性盒子的子元素超出父容器時是否換行
flex-flow	flex-direction 和 flex-wrap 的簡寫
align-items	設(shè)置彈性盒子元素在側(cè)軸（縱軸）方向上的對齊方式
align-content	修改 flex-wrap 屬性的行為洼怔，類似 align-items, 但不是設(shè)置子元素對齊，而是設(shè)置行對齊
justify-content	設(shè)置彈性盒子元素在主軸（橫軸）方向上的對齊方式

1. flex-direction 屬性

決定項目的方向左驾。

注意：如果元素不是彈性盒對象的元素镣隶，則 flex-direction 屬性不起作用极谊。

.flex-container { 
  flex-direction: row | row-reverse | column | column-reverse; 
}

屬性值

值	描述
row	默認值。元素將水平顯示安岂，正如一個行一樣轻猖。
row-reverse	與 row 相同，但是以相反的順序域那。
column	元素將垂直顯示咙边，正如一個列一樣。
column-reverse	與 column 相同次员，但是以相反的順序败许。

2. flex-wrap 屬性

flex-wrap 屬性規(guī)定flex容器是單行或者多行察纯，同時橫軸的方向決定了新行堆疊的方向绊含。

值	描述
nowrap	默認值。規(guī)定元素不拆行或不拆列矮湘。
wrap	規(guī)定元素在必要的時候拆行或拆列束倍。
wrap-reverse	規(guī)定元素在必要的時候拆行或拆列被丧，但是以相反的順序。

.flex-container { 
  flex-wrap: nowrap | wrap | wrap-reverse; 
}

可以取三個值：
（1） nowrap (默認)：不換行绪妹。

（2）wrap：換行，第一行在上方柿究。

（3）wrap-reverse：換行邮旷，第一行在下方。

3. flex-flow 屬性

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式蝇摸，默認值為row nowrap婶肩。

.flex-container { 
  flex-flow: <flex-direction> <flex-wrap> 
}

4. align-items屬性

align-items 屬性定義flex子項在flex容器的當前行的側(cè)軸（縱軸）方向上的對齊方式。

值	描述
stretch	默認值貌夕。項目被拉伸以適應(yīng)容器律歼。
center	項目位于容器的中心。
flex-start	項目位于容器的開頭啡专。
flex-end	項目位于容器的結(jié)尾。
baseline	項目位于容器的基線上们童。

5. justify-content屬性

justify-content 用于設(shè)置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式畔况。

值	描述
flex-start	默認值。項目位于容器的開頭慧库。
flex-end	項目位于容器的結(jié)尾跷跪。
center	項目位于容器的中心。
space-between	項目位于各行之間留有空白的容器內(nèi)齐板。
space-around	項目位于各行之前吵瞻、之間葛菇、之后都留有空白的容器內(nèi)。

五橡羞、彈性子元素屬性

屬性	描述
order	設(shè)置彈性盒子的子元素排列順序眯停。
flex-grow	設(shè)置或檢索彈性盒子元素的擴展比率。
flex-shrink	指定了 flex 元素的收縮規(guī)則尉姨。flex 元素僅在默認寬度之和大于容器的時候才會發(fā)生收縮庵朝，其收縮的大小是依據(jù) flex-shrink 的值。
flex-basis	用于設(shè)置或檢索彈性盒伸縮基準值又厉。
flex	設(shè)置彈性盒子的子元素如何分配空間九府。
align-self	在彈性子元素上使用。覆蓋容器的 align-items 屬性覆致。

1. order屬性

.flex-container .flex-item { 
  order: <integer>; 
}

<integer>：用整數(shù)值來定義排列順序侄旬，數(shù)值小的排在前面』吐瑁可以為負值儡羔，默認為0。

2. flex-grow屬性

.flex-container .flex-item { 
  flex-grow: <integer>; 
}

<integer>：一個數(shù)字璧诵，規(guī)定項目將相對于其他靈活的項目進行擴展的量汰蜘。默認值是 0。

3. flex-shrink屬性

.flex-container .flex-item { 
  flex-shrink: <integer>; 
}

<integer>：一個數(shù)字之宿，規(guī)定項目將相對于其他靈活的項目進行收縮的量族操。默認值是 1。

4. flex-basis屬性

.flex-container .flex-item { 
  flex-basis: <integer> | auto; 
}

<integer>：一個長度單位或者一個百分比比被，規(guī)定元素的初始長度色难。
auto：默認值。長度等于元素的長度等缀。如果該項目未指定長度枷莉，則長度將根據(jù)內(nèi)容決定。

5. flex屬性

flex 屬性用于設(shè)置或檢索彈性盒模型對象的子元素如何分配空間尺迂。
flex 屬性是 flex-grow笤妙、flex-shrink 和 flex-basis 屬性的簡寫屬性。

.flex-container .flex-item {
  flex: flex-grow flex-shrink flex-basis | auto | initial | inherit; 
}

值	描述
flex-grow	一個數(shù)字枪狂，規(guī)定項目將相對于其他元素進行擴展的量危喉。
flex-shrink	一個數(shù)字，規(guī)定項目將相對于其他元素進行收縮的量州疾。
flex-basis	項目的長度辜限。合法值："auto"、"inherit" 或一個后跟 "%"严蓖、"px"薄嫡、"em" 或任何其他長度單位的數(shù)字氧急。
auto	與 1 1 auto 相同。
none	與 0 0 auto 相同毫深。
initial	設(shè)置該屬性為它的默認值吩坝，即為 0 1 auto。
inherit	從父元素繼承該屬性哑蔫。

6. align-self屬性

.flex-container .flex-item {
    align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit;
}

值	描述
auto	默認值钉寝。元素繼承了它的父容器的 align-items 屬性。如果沒有父容器則為 "stretch"闸迷。
stretch	元素被拉伸以適應(yīng)容器嵌纲。
center	元素位于容器的中心。
flex-start	元素位于容器的開頭腥沽。
flex-end	元素位于容器的結(jié)尾逮走。
baseline	元素位于容器的基線上。
initial	設(shè)置該屬性為它的默認值今阳。
inherit	從父元素繼承該屬性师溅。

取值同 align-items。

響應(yīng)式布局

響應(yīng)式布局等于流動網(wǎng)格布局盾舌，而自適應(yīng)布局等于使用固定分割點來進行布局墓臭。

自適應(yīng)布局給了你更多設(shè)計的空間，因為你只用考慮幾種不同的狀態(tài)妖谴。而在響應(yīng)式布局中你卻得考慮上百種不同的狀態(tài)起便。雖然絕大部分狀態(tài)差異較小，但仍然也算做差異窖维。它使得把握設(shè)計最終效果變得更難，同樣讓響應(yīng)式布局更加的難以測試和預測妙痹。但同時說難铸史，這也算是響應(yīng)式布局美的所在。在考慮到表層級別不確定因素的過程中怯伊，你也會因此更好的掌握一些基礎(chǔ)知識琳轿。當然，要做到精確到像素級別的去預測設(shè)943*684像素視區(qū)里的樣子是很難的耿芹，但是你至少可以很輕松的確定它是能夠正常工作的崭篡，因為頁面的基本特性和布局結(jié)構(gòu)都是根據(jù)語義結(jié)構(gòu)來部署的。

響應(yīng)式布局概念

Responsive design吧秕，意在實現(xiàn)不同屏幕分辨率的終端上瀏覽網(wǎng)頁的不同展示方式琉闪。通過響應(yīng)式設(shè)計能使網(wǎng)站在手機和平板電腦上有更好的瀏覽閱讀體驗。

響應(yīng)式設(shè)計的方法和注意點砸彬。其實很簡單颠毙。

響應(yīng)式設(shè)計的步驟

1. 設(shè)置 Meta 標簽

大多數(shù)移動瀏覽器將HTML頁面放大為寬的視圖（viewport）以符合屏幕分辨率斯入。你可以使用視圖的meta標簽來進行重置。下面的視圖標簽告訴瀏覽器蛀蜜，使用設(shè)備的寬度作為視圖寬度并禁止初始的縮放刻两。在<head>標簽里加入這個meta標簽。

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

(<small>user-scalable = no 屬性能夠解決 iPad 切換橫屏之后觸摸才能回到具體尺寸的問題滴某。</small> ）

3. 通過媒介查詢來設(shè)置樣式 Media Queries

Media Queries 是響應(yīng)式設(shè)計的核心磅摹。
它根據(jù)條件告訴瀏覽器如何為指定視圖寬度渲染頁面。假如一個終端的分辨率小于 980px霎奢，那么可以這樣寫：

@media screen and (max-width: 980px) {
  #head { … }
  #content { … }
  #footer { … }
}

這里的樣式就會覆蓋上面已經(jīng)定義好的樣式户誓。

4. 設(shè)置多種試圖寬度

假如我們要設(shè)定兼容iPad和 iphone的視圖，那么可以這樣設(shè)置：

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

恩椰憋，差不多就這樣的一個原理厅克。

一些注意的

1. 寬度需要使用百分比

例如這樣：

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

2. 處理圖片縮放的方法

簡單的解決方法可以使用百分比，但這樣不友好橙依，會放大或者縮小圖片证舟。那么可以嘗試給圖片指定的最大寬度為百分比。假如圖片超過了窗骑，就縮小女责。假如圖片小了，就原尺寸輸出创译。

img { 
  width: auto; 
  max-width: 100%; 
}

用::before和::after偽元素 +content 屬性來動態(tài)顯示一些內(nèi)容或者做其它很酷的事情抵知，在css3 中，任何元素都可以使用 content 屬性了软族，這個方法就是結(jié)合 css3 的 attr 屬性和 HTML 自定義屬性的功能： HTML結(jié)構(gòu)：

<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);
  }
}

3. 其他屬性

例如 pre 刷喜，iframe，video 等立砸，都需要和img一樣控制好寬度掖疮。對于table，建議不要增加 padding 屬性颗祝，低分辨率下使用內(nèi)容居中：

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

更多資源

Morten Hjerde和他的同事們對2005至2008年市場中的400余種移動設(shè)備進行了統(tǒng)計(查看報告)浊闪，下圖展示了大致的統(tǒng)計結(jié)果：

打造布局結(jié)構(gòu)

我們可以監(jiān)測頁面布局隨著不同的瀏覽環(huán)境而產(chǎn)生的變化，如果它們變的過窄過短或是過寬過長螺戳，則通過一個子級樣式表來繼承主樣式表的設(shè)定搁宾，并專門針對某些布局結(jié)構(gòu)進行樣式覆寫。我們來看下代碼示例：

/* Default styles that will carry to the child style sheet */
html,body{
  background...
  font...
  color...
}
h1,h2,h3{}
p, blockquote, pre, code, ol, ul{}
/* Structural elements */
#wrapper{
  width: 80%;
  margin: 0 auto;
  background: #fff;
  padding: 20px;
}
#content{
  width: 54%;
  float: left;
  margin-right: 3%;
}
#sidebar-left{
  width: 20%;
  float: left;
  margin-right: 3%;
}
#sidebar-right{
  width: 20%;
  float: left;
}

下面的代碼可以放在子級樣式表Mobile.css中倔幼，專門針對移動設(shè)備進行樣式覆寫：

#wrapper{
  width: 90%;
}
#content{
  width: 100%;
}
#sidebar-left{
  width: 100%;
  clear: both;
  /* Additional styling for our new layout */
  border-top: 1px solid #ccc;
  margin-top: 20px;
}
#sidebar-right{
  width: 100%;
  clear: both;
  /* Additional styling for our new layout */
  border-top: 1px solid #ccc;
  margin-top: 20px;
}

大致的視覺效果如下圖所示：

圖中上半部分是大屏幕設(shè)備所顯示的完整頁面盖腿，下面的則是該頁面在小屏幕設(shè)備的呈現(xiàn)方式。頁面HTML代碼如下：

Media Queries

Ethan的文章中的“Meet the media query”部分有更多的范例及解釋凤藏。更有效率的做法是奸忽，將多個media queries整合在一個樣式表文件中

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

最后編輯于：2020.09.03 14:39:35

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末堕伪，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子栗菜，更是在濱河造成了極大的恐慌欠雌，老刑警劉巖，帶你破解...
沈念sama閱讀 206,723評論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件疙筹，死亡現(xiàn)場離奇詭異富俄，居然都是意外死亡，警方通過查閱死者的電腦和手機而咆，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,485評論 2贊 382
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門霍比，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人暴备，你說我怎么就攤上這事悠瞬。” “怎么了涯捻？”我有些...
開封第一講書人閱讀 152,998評論 0贊 344
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵浅妆，是天一觀的道長。經(jīng)常有香客問我障癌，道長凌外，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 55,323評論 1贊 279
?港島之戀（遺憾婚禮）
正文為了忘掉前任涛浙，我火速辦了婚禮康辑，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘轿亮。我一直安慰自己疮薇，他們只是感情好，可當我...
茶點故事閱讀 64,355評論 5贊 374
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布我注。她就那樣靜靜地躺著惦辛，像睡著了一般。火紅的嫁衣襯著肌膚如雪仓手。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 49,079評論 1贊 285
城市分裂傳說
那天玻淑，我揣著相機與錄音嗽冒，去河邊找鬼。笑死补履，一個胖子當著我的面吹牛添坊，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播箫锤，決...
沈念sama閱讀 38,389評論 3贊 400
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼贬蛙，長吁一口氣：“原來是場噩夢啊……” “哼雨女！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起阳准，我...
開封第一講書人閱讀 37,019評論 0贊 259
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤氛堕，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后野蝇，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體讼稚，經(jīng)...
沈念sama閱讀 43,519評論 1贊 300
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 35,971評論 2贊 325
?白月光啟示錄
正文我和宋清朗相戀三年绕沈，在試婚紗的時候發(fā)現(xiàn)自己被綠了锐想。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 38,100評論 1贊 333
活死人
序言：一個原本活蹦亂跳的男人離奇死亡乍狐，死狀恐怖赠摇，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情浅蚪，我是刑警寧澤藕帜，帶...
沈念sama閱讀 33,738評論 4贊 324
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站掘鄙，受9級特大地震影響耘戚，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜操漠，卻給世界環(huán)境...
茶點故事閱讀 39,293評論 3贊 307
男人毒藥：我在死后第九天來索命
文/蒙蒙一收津、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧浊伙，春花似錦撞秋、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,289評論 0贊 19
一樁弒父案吻贿，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至哑子，卻和暖如春舅列，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背卧蜓。一陣腳步聲響...
開封第一講書人閱讀 31,517評論 1贊 262
情欲美人皮
我被黑心中介騙來泰國打工帐要，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人弥奸。一個月前我還...
沈念sama閱讀 45,547評論 2贊 354
代替公主和親
正文我出身青樓榨惠，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子赠橙，可洞房花燭夜當晚...
茶點故事閱讀 42,834評論 2贊 345

前端各種布局合集

圣杯布局

1. DOM結(jié)構(gòu)

2. CSS代碼

雙飛翼布局

1. DOM結(jié)構(gòu)

2. CSS代碼

總結(jié)與思考

DOM結(jié)構(gòu)

1. 使用calc()

2. 使用border-box

3. 使用flex

多列布局

1：左邊定寬右邊不定寬

html代碼

css代碼一

css代碼二

css代碼三

css代碼四

2：左右等高布局

html代碼

css代碼一

css代碼二

3：等寬布局

html代碼

css代碼一

css代碼二

4：兩邊定寬中間不定寬

html代碼：

css代碼一

html代碼二

css代碼一

css代碼二

彈性布局

一店量、CSS3彈性盒子

二蚁吝、瀏覽器支持

三灭将、CSS3 彈性盒子內(nèi)容

四砂蔽、CSS3 彈性盒子常用屬性

1. flex-direction 屬性

2. flex-wrap 屬性

3. flex-flow 屬性

4. align-items屬性

5. justify-content屬性

五橡羞、彈性子元素屬性

1. order屬性

2. flex-grow屬性

3. flex-shrink屬性

4. flex-basis屬性

5. flex屬性

6. align-self屬性

響應(yīng)式布局

響應(yīng)式布局概念

響應(yīng)式設(shè)計的步驟

1. 設(shè)置 Meta 標簽

3. 通過媒介查詢來設(shè)置樣式 Media Queries

4. 設(shè)置多種試圖寬度

一些注意的

1. 寬度需要使用百分比

2. 處理圖片縮放的方法

3. 其他屬性

更多資源

Media Queries

推薦閱讀更多精彩內(nèi)容