頁面自適應布局以及分辨率適配方案

面自適應布局以及分辨率適配方案

流式布局

保證布局內每一級必須設置相對于父級百分比寬度，但設計稿一般都是按照固定寬度設計，內部圖片都是固定大小，拉伸或者縮放時都會導致變形，雖然都夠實現布局寬度上的自適應，但分辨率過高或者過低時都無法達到一個良好的顯示效果，需要設置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>

響應式布局

媒體加載

通過CSS3的媒體查詢，根據不同的屏幕尺寸區間設置不同的樣式效果，和不同尺寸的圖片，來保證頁面圖片顯示不失真，布局元素錯亂。當分辨率過低元素數量眾多時可控制子元素的顯示和隱藏，以及其他效果組件的展示，比方橫向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');
	    }
            /* 當分辨率在320px到768px之間時，將item元素的背景設置為image-small.jpg */
            @media screen and (min-width: 320px) and (max-width: 768px) {
             .item {
                background-image: url('image-small.jpg');
                font-size:12px


              }
            }

            /* 當分辨率大于768px時，將item元素的背景設置為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>

柵格布局

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

iview 柵格布局

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

flex原生柵格布局

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

        <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 如何和他倆在一個主軸 始終會比他們大200px*/
        .item-2 {
          flex-basis: 400px;
        }

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

grid 二維布局

容器屬性

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

項目屬性

grid-area：是 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 的簡寫形式。 grid-column-start：指定一個項目的列開始位置。 grid-column-end：指定一個項目的列結束位置。 grid-row-start：指定一個項目的行開始位置。 grid-row-end：指定一個項目的行結束位置。 grid-column：是 grid-column-start 和 grid-column-end 的簡寫形式。 grid-row：是 grid-row-start 和 grid-row-end 的簡寫形式。 grid-area：指定項目應該放置在哪個網格區域中。 justify-self：定義單個項目在其列中的對齊方式。 align-self：定義單個項目在其行中的對齊方式。 place-self：是 align-self 和 justify-self 的簡寫形式。

zoom 或者 transform :scale()

可以將一個元素及其子元素的所有尺寸都放大或縮小。默認的縮放值是1，表示不進行任何縮放。如果將縮放值設置為2，則元素及其子元素的所有尺寸都會變為原來的兩倍；如果將縮放值設置為0.5，則元素及其子元素的所有尺寸都會變為原來的一半。 zoom在兼容性上存在一些問題，目前火狐瀏覽器是不支持，其他瀏覽器支持，存在一定的風險性

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

rem

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

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

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

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

postcss-pxtorem

安裝依賴


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

在項目中創建postcss配置文件.postcssrc.js，并添加如下配置：


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

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

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


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

通過使用postcss-pxtorem插件，可以簡化自適應布局的實現，并且不需要手動計算每個元素的rem值。

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

extarea內容某個高度之內自適應，超過時候指定高度固定然后出現滾動條！

效果如下：當你輸入超過設置的高度后，就會固定此高度不變。

前，昆明網站建設公司用自適應技術幫助客戶制作網站已成為一種規范標準，為何自適應網站設計成為企業建站的首選，因為自適應網頁設計方式會自動檢測屏幕大小以載入合適的布局，當你在電腦或手機瀏覽網頁，網站會自動地檢測和選擇蕞佳的屏幕布局。

自適應網頁如何實現

只需在HTML的<head>標簽中插入一個<meta>標簽，<meta>標簽中可以設置具體的寬度(如像素值)或者縮放比例2.0(設備實際尺寸的兩倍)，下面是將一個頁面放大到設備實際尺寸兩倍顯示的meta標簽示例:

如果不允許調整頁面大小，那么把user-scalable=yes改為user-scalable=no，如：

CSS引用以下代碼來控制屏幕輸出的效果

@media screen and (max-width:1600px) {

}

自適應網頁加載速度

自適應網頁必須與多個終端設備顯示結合在一起，所以需要裝載幾組css代碼，網站打開的速度略比非自適應網站要慢一點，當然如果解決得好，這一慢的速度可以忽略。

所以在做自適應網站的時候一定要注意速度，減少編碼，配備更強的服務器。

考慮多終端設備兼容

對于一些新手網頁設計者在設計網站頁面，由于缺乏經驗，設計風格過于獨特，連到移動端的情況下就會出現無法寫出及兼容問題，所用色彩及布局，盡量使用扁平化風格試，不僅加載速度，修改也比較簡單方便。

因此，在設計時，必須要充分考慮多終端設備需融合的實際效果，網站頁面設計師除了會做平面圖，也要掌握部分前端開發，才能做出符合標準的自適應網站。

瀏覽器多尺寸適配

自適應網站普遍會存在一個問題就是兼容性，我們必須對網站進行多個屏幕尺寸大小測試，并通過各種瀏覽器進行檢測，一般使用IE游覽、Firefox瀏覽器、Google這三個瀏覽器測試，因為其他瀏覽器大部分都用他們的核心，用這三個瀏覽器看有沒有兼容存在bug。

自適應網頁如何設計_云南才力網站建設公司

在線咨詢

上一篇：有哪些不用寫代碼就能輕松制作HTML5網頁的工具？
下一篇：ThinkPHP之緩存技術（頁面靜態化、動態緩存、局部不緩存）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商