Axure技能：自適應(yīng)移動設(shè)備屏幕大小

Axure新技能：自適應(yīng)手機(jī)屏幕大小》相信不少人都已經(jīng)看過，并對設(shè)置方法已經(jīng)很熟悉了，但該教程只能適應(yīng)iphone6的屏幕尺寸的比例，在iphoneX出來后屏幕比例改變了，舊的方法已經(jīng)不能適應(yīng)目前的全面屏手機(jī)了，但現(xiàn)在不用擔(dān)心了，筆者已經(jīng)有新的方法可以去適應(yīng)市面上98%移動設(shè)備（包括手機(jī)和平板）屏幕的，讓大家在演示原型的時(shí)候更加得心應(yīng)手了。

目錄：

設(shè)置原型寬度
設(shè)置動態(tài)面板
發(fā)布項(xiàng)目
查看項(xiàng)目

1、設(shè)置原型寬度

我們把原型的寬度定為：375px（高度不限制，根據(jù)需要設(shè)置）。

2、設(shè)置動態(tài)面板

（1）把元件按需求組合并轉(zhuǎn)為動態(tài)面板，并設(shè)置為自動調(diào)整內(nèi)容尺寸。

（2）需要在頭部固定的設(shè)置固定到瀏覽器，水平靠左、垂直靠上、始終保持頂層。

（3）中間列表滾動部分不需要設(shè)置固定到瀏覽器

（4）需要在底部固定的設(shè)置固定到瀏覽器，水平靠左、垂直靠下、始終保持頂層。

3、發(fā)布項(xiàng)目

其它的設(shè)置我就不多說了，主要說一下移動設(shè)備的設(shè)置。

寬度：375
高度：800（設(shè)置800最大可兼容至iphonex)

以上是建議尺寸，也可以使用其它的尺寸。

最小縮放倍數(shù)：0.5
最大縮放倍數(shù)：3.0 （設(shè)置3.0最大可兼容至ipad pro)
允許用戶縮放：no

最重要的初始縮放倍數(shù)千萬不要填寫，填寫以后默認(rèn)就以iphone6（設(shè)置的）的尺寸訪問，需要你縮放一下才能夠正常全屏顯示，如果沒有設(shè)置，則自動以你移動設(shè)置大小進(jìn)行全屏顯示。

4、查看項(xiàng)目

發(fā)布完以后，放至網(wǎng)上，這個(gè)時(shí)候我們就可以用移動設(shè)備進(jìn)行訪問了，我們可以看到無論是iphone5的4.3尺寸還是iphonex的5.8尺寸都是正常全屏顯示的。

請不要使用帶工具欄的頁面訪問，這兩個(gè)頁面都是帶工具欄的index.html,start.html?？梢允褂眠@個(gè)網(wǎng)址查看效果：https://zgdyvg.axshare.com/index.html

IOS使用自帶的Safari瀏覽器，Android使用Chrome瀏覽器均可創(chuàng)建快捷方式到桌面，隱藏瀏覽器導(dǎo)航欄。

IOS方法：

Android方法：

點(diǎn)擊桌面生成的圖標(biāo)就可以訪問了，現(xiàn)在看上去是不是很像APP呢。

寫在最后

原型訪問的方法有很多，大家都可以根據(jù)自己的實(shí)際情況進(jìn)行選擇，本文只是提供可以自適應(yīng)手機(jī)屏幕大小的方法，把原型放在手機(jī)上更多的時(shí)候是為了方便外出演示的時(shí)候，給客戶查看一種實(shí)際的效果，所以建議使用高保真原型比較妥。

原型只是展示和溝通的一種方式，并非產(chǎn)品經(jīng)理的全部，請不要本末倒置，產(chǎn)品經(jīng)理應(yīng)該更注重在溝通、思維、邏輯、業(yè)務(wù)上，當(dāng)然有時(shí)間把原型做好做漂亮也是一種技能。

作者：Han ，深圳產(chǎn)品狗一枚，目前在某個(gè)不知名電商任職產(chǎn)品經(jīng)理，歡迎相約交流。

本文由 @Han 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議

面自適應(yīng)布局以及分辨率適配方案

流式布局

保證布局內(nèi)每一級必須設(shè)置相對于父級百分比寬度，但設(shè)計(jì)稿一般都是按照固定寬度設(shè)計(jì)，內(nèi)部圖片都是固定大小，拉伸或者縮放時(shí)都會導(dǎo)致變形，雖然都夠?qū)崿F(xiàn)布局寬度上的自適應(yīng)，但分辨率過高或者過低時(shí)都無法達(dá)到一個(gè)良好的顯示效果，需要設(shè)置min-width和max-width來保證頁面最基本的視覺效果

<!DOCTYPE html>
<html>
<head>
	<title>Flow Layout Example</title>
	<style>
	    .container {
	        display: flex;
	        flex-wrap: wrap;
	        justify-content: space-between;
	    }

	    .item {
	        width: 30%;
	        margin-bottom: 20px;
	        background-color: #f2f2f2;
	        border: 1px solid #ccc;
	        padding: 10px;
	        box-sizing: border-box;
	    }
	</style>
</head>
<body>
	<div class="container">
		<div class="item">Item 1</div>
		<div class="item">Item 2</div>
		<div class="item">Item 3</div>

	</div>
</body>
</html>

響應(yīng)式布局

媒體加載

通過CSS3的媒體查詢，根據(jù)不同的屏幕尺寸區(qū)間設(shè)置不同的樣式效果，和不同尺寸的圖片，來保證頁面圖片顯示不失真，布局元素錯(cuò)亂。當(dāng)分辨率過低元素?cái)?shù)量眾多時(shí) 可控制子元素的顯示和隱藏，以及其他效果組件的展示，比方橫向tab展示變更為下拉選擇 vscode

<!DOCTYPE html>
<html>
<head>

	<style>
	    .container {
	        display: flex;
	        flex-wrap: wrap;
	        justify-content: space-between;
	    }

	    .my-image {
	        width: 30%;
	        margin-bottom: 20px;
	        background-color: #f2f2f2;
	        border: 1px solid #ccc;
	        padding: 10px;
	        box-sizing: border-box;
                background-image: url('image-large.jpg');
	    }
            /* 當(dāng)分辨率在320px到768px之間時(shí)，將item元素的背景設(shè)置為image-small.jpg */
            @media screen and (min-width: 320px) and (max-width: 768px) {
             .item {
                background-image: url('image-small.jpg');
                font-size:12px


              }
            }

            /* 當(dāng)分辨率大于768px時(shí)，將item元素的背景設(shè)置為image-large.jpg */
            @media screen and (min-width: 769px) {
              .item {
                background-image: url('image-big.jpg');
                 font-size:14px

              }
            }

            </style>
            </head>
            <body>
                    <div class="container">
                            <div class="item">hc 1</div>
                            <div class="item">hc 2</div>
                            <div class="item">hc 3</div>

                    </div>
            </body>
   </html>

柵格布局

柵格布局是一種網(wǎng)格化的頁面布局方式，它由行和列組成，可以使開發(fā)者更容易地創(chuàng)建多種不同大小和位置的元素，并通過調(diào)整這些元素的行和列來實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)。柵格布局適用于各種設(shè)備尺寸，使得頁面在各種屏幕上都能夠正常顯示。在柵格布局中，開發(fā)者可以定義一個(gè)網(wǎng)格容器，然后在容器中定義行和列，用來劃分網(wǎng)格。每個(gè)網(wǎng)格可以放置一個(gè)或多個(gè)元素。通過調(diào)整每個(gè)元素所占據(jù)的行和列，以及它們之間的距離，可以實(shí)現(xiàn)各種頁面布局效果。

iview 柵格布局

        <template>
          <div>
            <iv-row :gutter="16">
              <iv-col :span="8">
                <!-- 左邊 -->
              </iv-col>
              <iv-col :span="8" :offset="4">
                <!-- 中間內(nèi)容 -->
              </iv-col>
              <iv-col :span="4">
                <!-- 右側(cè)內(nèi)容 -->
              </iv-col>
            </iv-row>
          </div>
        </template>

flex原生柵格布局

Flex布局也可以用來實(shí)現(xiàn)柵格布局，它提供了一些靈活的屬性來定義網(wǎng)格元素的排列和位置。相比于傳統(tǒng)的柵格布局，F(xiàn)lex布局更加靈活，并且在響應(yīng)式設(shè)計(jì)上具有更好的適應(yīng)性。以下是Flex布局常用的一些屬性
display：定義flex容器，默認(rèn)值為flex。 flex-direction：定義主軸的方向，包括row、row-reverse、column、column-reverse四個(gè)值。 justify-content：定義主軸上網(wǎng)格元素的對齊方式，包括flex-start、flex-end、center、space-between、space-around五個(gè)值。 align-items：定義交叉軸上網(wǎng)格元素的對齊方式，包括flex-start、flex-end、center、baseline、stretch五個(gè)值。 flex-wrap：定義網(wǎng)格元素是否換行，默認(rèn)情況下都不換行，可選nowrap、wrap、wrap-reverse三個(gè)值。 order：定義網(wǎng)格元素的顯示順序，默認(rèn)為0，數(shù)值越小越靠前。 flex-grow：定義網(wǎng)格元素在剩余空間中所占的比例。 flex-shrink：定義彈性子元素的縮小比例。 flex-basis：定義彈性子元素的基準(zhǔn)大小。 flex：是 flex-grow、flex-shrink 和 flex-basis 的簡寫形式。 align-self：定義單個(gè)網(wǎng)格元素在交叉軸上的對齊方式。

        <div class="container">
          <div class="item item-1">1</div>
          <div class="item item-2">2</div>
          <div class="item item-3">3</div>
        </div>

        <style>
        .container {
          display: flex;
          flex-wrap: wrap;
        }
        /* flex-grow：1 子元素分配剩余空間*   0 有空間也不放大  2 大一倍/
        .item {
          flex-grow: 1;
          height: 100px;
          background-color: gray;
          margin: 10px;
          text-align: center;
          font-size: 30px;
          line-height: 100px;
        }

        .item-1 {
          flex-basis: 200px;
        }
        /* item-2 如何和他倆在一個(gè)主軸 始終會比他們大200px*/
        .item-2 {
          flex-basis: 400px;
        }

        .item-3 {
          flex-basis: 200px;
        }
        </style>

grid 二維布局

容器屬性

display：定義為網(wǎng)格容器。 grid-template-areas：指定網(wǎng)格模板中的區(qū)域名稱。 -grid-template-columns：指定網(wǎng)格列的大小。 -grid-template-rows：指定網(wǎng)格行的大小。 grid-template：是 grid-template-areas、grid-template-columns 和 grid-template-rows 的簡寫形式。 grid-auto-columns：指定未顯式指定寬度的列的大小。 grid-auto-rows：指定未顯式指定高度的行的大小。 grid-auto-flow：指定如何安排未被顯式布局的項(xiàng)。 grid-column-gap：設(shè)置網(wǎng)格行之間的間距。 grid-row-gap：設(shè)置網(wǎng)格列之間的間距。 grid-gap：是 grid-row-gap 和 grid-column-gap 的簡寫形式。

項(xiàng)目屬性

grid-area：是 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 的簡寫形式。 grid-column-start：指定一個(gè)項(xiàng)目的列開始位置。 grid-column-end：指定一個(gè)項(xiàng)目的列結(jié)束位置。 grid-row-start：指定一個(gè)項(xiàng)目的行開始位置。 grid-row-end：指定一個(gè)項(xiàng)目的行結(jié)束位置。 grid-column：是 grid-column-start 和 grid-column-end 的簡寫形式。 grid-row：是 grid-row-start 和 grid-row-end 的簡寫形式。 grid-area：指定項(xiàng)目應(yīng)該放置在哪個(gè)網(wǎng)格區(qū)域中。 justify-self：定義單個(gè)項(xiàng)目在其列中的對齊方式。 align-self：定義單個(gè)項(xiàng)目在其行中的對齊方式。 place-self：是 align-self 和 justify-self 的簡寫形式。

zoom 或者 transform :scale()

可以將一個(gè)元素及其子元素的所有尺寸都放大或縮小。默認(rèn)的縮放值是1，表示不進(jìn)行任何縮放。如果將縮放值設(shè)置為2，則元素及其子元素的所有尺寸都會變?yōu)樵瓉淼膬杀?；如果將縮放值設(shè)置為0.5，則元素及其子元素的所有尺寸都會變?yōu)樵瓉淼囊话搿?zoom在兼容性上存在一些問題，目前火狐瀏覽器是不支持，其他瀏覽器支持，存在一定的風(fēng)險(xiǎn)性

實(shí)現(xiàn)方式不同：transform: scale() 是通過 CSS3 的 transform 屬性進(jìn)行縮放，而 zoom 是通過瀏覽器提供的縮放功能實(shí)現(xiàn)的。兼容性不同：transform: scale() 屬性在大部分現(xiàn)代瀏覽器中得到支持，而 zoom 屬性只在 IE 瀏覽器和 Edge 瀏覽器中得到支持。對布局影響不同：使用 transform: scale() 屬性進(jìn)行縮放時(shí)，元素的尺寸、位置等屬性會改變，但對周圍元素的布局不會產(chǎn)生影響。而使用 zoom 屬性進(jìn)行縮放時(shí)，元素及其周圍的元素都會被縮放，因此可能會影響整個(gè)頁面的布局。

rem

rem是CSS3新增的一個(gè)相對單位，它是相對于根元素（html元素）的字體大小來計(jì)算的。rem的全稱是"root em"，意為"根em"。
使用rem作為長度單位，可以實(shí)現(xiàn)頁面的自適應(yīng)布局。當(dāng)用戶調(diào)整瀏覽器窗口大小或者在移動設(shè)備上旋轉(zhuǎn)屏幕時(shí)，頁面中所有元素的大小都會根據(jù)當(dāng)前根字體大小的比例進(jìn)行縮放，從而適應(yīng)不同的屏幕尺寸和設(shè)備類型。
使用rem作為單位有以下優(yōu)點(diǎn)：
相對于像素單位（px）更具有可擴(kuò)展性，可以適應(yīng)各種不同分辨率的設(shè)備。相對于百分比單位（%）更加直觀，不需要手動計(jì)算每個(gè)元素的百分比值。支持低版本瀏覽器，如果無法識別rem單位，也可以提供降級方案。

們將根元素字體大小設(shè)置為頁面寬度的百分之一，即font-size: calc(100vw / 100)。然后，在樣式表中使用rem作為單位對元素進(jìn)行設(shè)置，例如.box { width: 20rem; height: 10rem; font-size: 1.6rem; }。這樣，當(dāng)瀏覽器窗口大小改變時(shí)，根元素字體大小也會隨之改變，從而實(shí)現(xiàn)頁面的自適應(yīng)布局。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Rem布局示例</title>
  <style>
    /* 設(shè)置根元素字體大小 */
    html {
      font-size: calc(100vw / 100);
    }

    /* 使用rem設(shè)置元素屬性 */
    .box {
      width: 20rem;
      height: 10rem;
      font-size: 1.6rem;
      border:1rem solid #00000
    }
  </style>
</head>
<body>
  <div class="box">這是一個(gè)自適應(yīng)布局的示例</div>
</body>
</html>

postcss-pxtorem

安裝依賴


npm install postcss-pxtorem postcss-loader --save-dev

在項(xiàng)目中創(chuàng)建postcss配置文件.postcssrc.js，并添加如下配置：


module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 16, // 基礎(chǔ)字體大小
      propList: ['*'], // 要轉(zhuǎn)換的屬性列表，這里表示所有屬性都要進(jìn)行轉(zhuǎn)換
      selectorBlackList: [], // 不需要轉(zhuǎn)換的選擇器，可以是字符串、正則表達(dá)式或者數(shù)組
      unitPrecision: 5 // 轉(zhuǎn)換后的rem值保留小數(shù)位數(shù)
    }
  }
}

在webpack.config.js中的module.rules中添加如下代碼：


{
  test: /.css$/,
  use: [
    'style-loader',
    'css-loader',
    {
      loader: 'postcss-loader',
      options: {
        config: {
          path: './path/to/postcss-config.js'
        }
      }
    }
  ]
}

在CSS中使用像素單位（px），例如：


.container {
  width: 320px;
  font-size: 14px;
}

這樣，在編譯時(shí)，postcss-pxtorem會自動將像素單位轉(zhuǎn)換為rem單位。對于上述樣式代碼，轉(zhuǎn)換后的結(jié)果如下：


.container {
  width: 20rem; /* 320 / 16 = 20 */
  font-size: 0.875rem; /* 14 / 16 = 0.875 */
}

通過使用postcss-pxtorem插件，可以簡化自適應(yīng)布局的實(shí)現(xiàn)，并且不需要手動計(jì)算每個(gè)元素的rem值。

作者：二哈怕不怕
鏈接：https://juejin.cn/post/7301985758467244043

.背景介紹

如今人們經(jīng)過手機(jī)閱讀網(wǎng)頁占了大多數(shù)，隨著閱讀方式的改動，網(wǎng)頁完成多終端自適應(yīng)，無論關(guān)于防止工程師無謂的反復(fù)勞動或者是項(xiàng)目管理的便利性上來說重要性都是非常巨大的。

2.知識剖析

由于挪動設(shè)備越來越多的被人們運(yùn)用，手機(jī)成為訪問互聯(lián)網(wǎng)的最常見終端，而我們設(shè)計(jì)的網(wǎng)頁確是為了呈如今PC端。

手機(jī)的屏幕比擬小，寬度通常在600像素以下，而PC的屏幕寬度，普通都在1000像素以上（目前主流寬度是1366×768），有的還到達(dá)了2000像素。同樣的內(nèi)容，要在大小懸殊的屏幕上，都呈現(xiàn)出稱心的效果，并不是一件容易的事。

很多網(wǎng)站的處理辦法，是為不同的設(shè)備提供不同的網(wǎng)頁，比方特地提供一個(gè)mobile版本，或者iPhone / iPad版本。這樣做固然保證了效果，但是比擬費(fèi)事，同時(shí)要維護(hù)好幾個(gè)版本，而且假如一個(gè)網(wǎng)站有多個(gè)portal（入口），會大大增加架構(gòu)設(shè)計(jì)的復(fù)雜度。

自適應(yīng)是為了解決如何在不同大小的設(shè)備上呈現(xiàn)同樣的網(wǎng)頁。

3.常見問題

如何進(jìn)行自適應(yīng)網(wǎng)頁設(shè)計(jì)

4.解決方案

在HTML頭部增加viewport標(biāo)簽。

通俗的講，移動設(shè)備上的viewport就是設(shè)備的屏幕上能用來顯示我們的網(wǎng)頁的那一塊區(qū)域，在具體一點(diǎn)，就是瀏覽器上(也可能是一個(gè)app中的webview)用來顯示網(wǎng)頁的那部分區(qū)域，但viewport又不局限于瀏覽器可視區(qū)域的大小，它可能比瀏覽器的可視區(qū)域要大，也可能比瀏覽器的可視區(qū)域要小。在默認(rèn)情況下，一般來講，移動設(shè)備上的viewport都是要大于瀏覽器可視區(qū)域的，這是因?yàn)榭紤]到移動設(shè)備的分辨率相對于桌面電腦來說都比較小，所以為了能在移動設(shè)備上正常顯示那些傳統(tǒng)的為桌面瀏覽器設(shè)計(jì)的網(wǎng)站移動設(shè)備上的瀏覽器都會把自己默認(rèn)的viewport設(shè)為980px或1024px（也可能是其它值，這個(gè)是由設(shè)備自己決定的），但帶來的后果就是瀏覽器會出現(xiàn)橫向滾動條，因?yàn)闉g覽器可視區(qū)域的寬度是比這個(gè)默認(rèn)的viewport的寬度要小的。

該meta標(biāo)簽的作用是讓當(dāng)前viewport的寬度等于設(shè)備的寬度，同時(shí)不允許用戶手動縮放。也許允不允許用戶縮放不同的網(wǎng)站有不同的要求，但讓viewport的寬度等于設(shè)備的寬度，這個(gè)應(yīng)該是大家都想要的效果，如果你不這樣的設(shè)定的話，那就會使用那個(gè)比屏幕寬的默認(rèn)viewport，也就是說會出現(xiàn)橫向滾動條。

meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"

把移動設(shè)備上的viewport分為layout viewport 、 visual viewport 和 ideal viewport 三類，其中的ideal viewport是最適合移動設(shè)備的viewport，ideal viewport的寬度等于移動設(shè)備的屏幕寬度，只要在css中把某一元素的寬度設(shè)為ideal viewport的寬度(單位用px)，那么這個(gè)元素的寬度就是設(shè)備屏幕的寬度了，也就是寬度為100%的效果。ideal viewport 的意義在于，無論在何種分辨率的屏幕下，那些針對ideal viewport 而設(shè)計(jì)的網(wǎng)站，不需要用戶手動縮放，也不需要出現(xiàn)橫向滾動條，都可以完美的呈現(xiàn)給用戶。

要得到ideal viewport就必須把默認(rèn)的layout viewport的寬度設(shè)為移動設(shè)備的屏幕寬度。因?yàn)閙eta viewport中的width能控制layout viewport的寬度，所以我們只需要把width設(shè)為width-device這個(gè)特殊的值就行了。

2、不使用絕對寬度

在css中我們一般使用px作為單位，在桌面瀏覽器中css的1個(gè)像素往往都是對應(yīng)著電腦屏幕的1個(gè)物理像素，這可能會造成我們的一個(gè)錯(cuò)覺，那就是css中的像素就是設(shè)備的物理像素。但實(shí)際情況卻并非如此，css中的像素只是一個(gè)抽象的單位，在不同的設(shè)備或不同的環(huán)境中，css中的1px所代表的設(shè)備物理像素是不同的。在為桌面瀏覽器設(shè)計(jì)的網(wǎng)頁中，我們無需對這個(gè)津津計(jì)較，但在移動設(shè)備上，必須弄明白這點(diǎn)。在早先的移動設(shè)備中，屏幕像素密度都比較低，如iphone3，它的分辨率為320x480，在iphone3上，一個(gè)css像素確實(shí)是等于一個(gè)屏幕物理像素的。后來隨著技術(shù)的發(fā)展，移動設(shè)備的屏幕像素密度越來越高，從iphone4開始，蘋果公司便推出了所謂的Retina屏，分辨率提高了一倍，變成640x960，但屏幕尺寸卻沒變化，這就意味著同樣大小的屏幕上，像素卻多了一倍，這時(shí)，一個(gè)css像素是等于兩個(gè)物理像素的。

3、流動布局

流動布局（fluid grid） "流動布局"的含義是，各個(gè)區(qū)塊的位置都是浮動的，不是固定不變的。

.main {float: right;width: 70%; }

.leftBar {float: left;width: 25%;}

float的好處是，如果寬度太小，放不下兩個(gè)元素，后面的元素會自動滾動到前面元素的下方，不會在水平方向overflow（溢出），避免了水平滾動條的出現(xiàn)。

4、MediaQuery模塊

"自適應(yīng)網(wǎng)頁設(shè)計(jì)"的核心，就是CSS3引入的MediaQuery模塊。它的意思就是，自動探測屏幕寬度，然后加載相應(yīng)的CSS文件。

link rel="stylesheet" type="text/css"media="screen and (max-device-width:400px)"href="a.css"

上面的代碼意思是，如果屏幕寬度小于400像素（max-device-width: 400px），就加載a.css文件。

link rel="stylesheet" type="text/css"media="screen and (min-width: 400px)and (max-device-width: 600px)"href="b.css"

如果屏幕寬度在400像素到600像素之間，則加載b.css文件。

5.擴(kuò)展思考

自適應(yīng)與響應(yīng)式的區(qū)別

自適應(yīng)是為了解決如何才能在不同大小的設(shè)備上呈現(xiàn)同樣的網(wǎng)頁，讓同一張網(wǎng)頁自動適應(yīng)不同大小的屏幕，根據(jù)屏幕寬度，自動調(diào)整網(wǎng)頁內(nèi)容大小。但是無論怎樣，他們主體的內(nèi)容和布局是沒有變的。

自適應(yīng)還是暴露出一個(gè)問題，如果屏幕太小，即使網(wǎng)頁能夠根據(jù)屏幕大小進(jìn)行適配，但是會感覺在小屏幕上查看，內(nèi)容過于擁擠，響應(yīng)式正是為了解決這個(gè)問題而衍生出來的概念。它可以自動識別屏幕寬度、并做出相應(yīng)調(diào)整的網(wǎng)頁設(shè)計(jì)，布局和展示的內(nèi)容可能會有所變動。

響應(yīng)式布局被大家熟知的一個(gè)重要原因就是 twitter 開源了 bootstrap。

相比自適應(yīng)網(wǎng)站，響應(yīng)式網(wǎng)站省去了很多的控件，同時(shí)也省去了不少建立和維護(hù)的功夫。響應(yīng)式布局就是一種流體，在按百分比縮放時(shí)也能相當(dāng)?shù)牧鲿场?/p>

使用響應(yīng)式設(shè)計(jì)，你要記住所以的布局。這當(dāng)然可能會使過程混亂，并且使設(shè)計(jì)更加復(fù)雜。這就意味著你應(yīng)該專注于中等分辨率的視圖，然后再用media querie調(diào)整為更低或更高的分辨率。所以通常的做法是，在一個(gè)新的項(xiàng)目中使用響應(yīng)式設(shè)計(jì)，在后期的改造中使用自適應(yīng)設(shè)計(jì)。

自適應(yīng)可用于改造現(xiàn)有的網(wǎng)站使其更好地適應(yīng)移動端。這使你的設(shè)計(jì)可控制和開發(fā)多個(gè)特定的視圖。你開發(fā)視圖的數(shù)量完全取決于你，你的公司和全面的預(yù)算。然而，它也提供了一定量的控件（例如在內(nèi)容和布局上），如此你便無須使用響應(yīng)式設(shè)計(jì)。但當(dāng)你設(shè)計(jì)多種分辨率時(shí)你會發(fā)現(xiàn)，在改變窗口大小的時(shí)候?qū)疤觥辈季帧?/p>

自適應(yīng)網(wǎng)站可以用于設(shè)計(jì)和開發(fā)一個(gè)擁有多個(gè)自適應(yīng)視圖的網(wǎng)站。所以這種設(shè)計(jì)通常用于改造網(wǎng)站。

在線咨詢

上一篇：HTML5 語法基礎(chǔ)二（筆記）
下一篇：前端架構(gòu)師基于京東門戶編寫的7篇html、css實(shí)戰(zhàn)，代碼免費(fèi)分享！

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商