CSS 經常使用佈局在小程序中的應用

時間  2019-11-11
標籤 css 經常 使用 佈局 程序 應用 欄目 CSS 简体版
原文   原文鏈接

CSS 經常使用佈局在小程序中的應用

全部css佈局的根本都是3個基本概念： 定位、浮動、外邊距操縱

咱們其餘的佈局實現方式，都是基於正常的文檔流來進行的。因此咱們先來看看什麼是正常的文檔流。css

正常文檔流（Normal Flow）：正常佈局流是指在不對頁面進行任何佈局控制時，瀏覽器默認的HTML佈局方式。默認的文檔流，確保在沒有任何css樣式的時候，還可以正確的渲染和顯示內容。使頁面具備比較好的可讀性以及合理性。(position display float table flex-box grid-layout)
默認狀況下，元素是如何佈局的？ （引用自 https://developer.mozilla.org）
首先，取得元素的內容來放在一個獨立的元素盒子中，而後在其周邊加上內邊距、邊框和外邊距。(盒子模型）
一個塊級元素的內容寬度默認是其父元素的100%，其高度與其內容高度一致。行內元素的height width與內容一致。你沒法設置行內元素的height width。 若是你想控制行內元素的尺寸，你須要爲元素設置display: block; （或者，display: inline-block; inline-block 混合了inline 和 block的特性。)
那獨立元素之間又是如何相互影響的呢？ 正常佈局流是一套在瀏覽器視口內放置、組織元素的系統。默認狀況下，塊級元素按照在文檔中書寫出現的順序放置 --- 每一個塊級元素會在上一個元素下面另起一行，它們會被設置好的margin 分隔。
行內元素的表現有所不一樣 --- 它們不會另起一行；只要在其父級塊級元素的寬度內有足夠的空間，它們與其餘行內元素、相鄰的文本內容（或者被包裹的）被安排在同一行。若是空間不夠，溢出的文本或元素將移到新的一行。
若是兩個相鄰的元素都設置了margin 而且兩個margin有重疊，那麼更大的設置會被保留，小的則會消失 --- 這被稱爲外邊距疊加。

咱們在傳統的css佈局當中，不論是css2仍是css3，大體囊括了靜態佈局、流式佈局、彈性佈局、自適應佈局、響應式佈局、網格佈局。對於css的這些佈局方式，在小程序中又是怎樣的呈現方式呢？咱們分別來看一看。html

1. 靜態佈局 （Static Layout）

固定寬度佈局。寬度以像素爲單位。（固然咱們還可使用其餘的 絕對長度單位）
缺點：不管窗口多大，尺寸不變。沒法充分利用空間。行長和文本易讀性很差。
靜態佈局就是傳統的網站形式：對於PC設計一個居中佈局，窗口縮小時，內容被遮擋，呈現橫豎向滾動條。對於移動設備，單獨創建一個m.域名及相應的移動網站。

靜態佈局在小程序中通常不多出現。由於若是使用靜態佈局，就沒法作到不一樣屏幕自適應，750px的設計稿在小屏幕的手機上就會出現滾動條。css3

呈現效果以下：
圖片描述小程序

// wxml 代碼
<view class='page'>
  <view class='header'>靜態佈局</view>
  <view class='content'>
    <text>靜態佈局內容部分在小程序中的呈現。小程序page樣式在overflow-x
上默認是hidden。</text>
  </view>
</view>


//樣式以下
page {
  overflow-x:scroll;
}
.page, .header, .content {
  width: 750px;
}
.content {
  background: #ccc;
}

2. 流式佈局 （Liquid Layout）（百分比佈局）

流式佈局是頁面元素的寬度按照屏幕分辨率進行適配調整，但總體佈局不變。
使用百分比實現：流式佈局可以相對於瀏覽器窗口進行伸縮。
缺點：窗口寬度較小，行變得很是窄，很難閱讀。須要設置min-width來解決，可是若是min-width較大的話，也會有靜態佈局相同的限制。寬度太寬，一樣會存在行長過長的問題。
流式佈局（Liquid）的特色（也叫"Fluid") 是頁面元素的寬度按照屏幕進行適配調整，主要的問題是若是屏幕尺度跨度太大，那麼在相對其原始設計而言太小或過大的屏幕上不能正常顯示。

咱們來看看在小程序中使用流式佈局的效果：微信小程序

在不一樣的屏幕大小下呈現出來的效果以下：
圖片描述瀏覽器

圖片描述

<!-- wxml代碼 -->
<view class='page fluid'>
  <view class='header fluid__header'>流式佈局</view>
  <view class='content'>
  <!-- 兩列 -->
    <view class='wrapper'>
      <view class='grid-item grid-half'>
        <text>我是左側部分</text>
      </view>
      <view class='grid-item grid-half'>
        <text>我是右側部分</text>
      </view>
    </view>
    <!-- 三列 -->
     <view class='wrapper'>
      <view class='grid-item grid-three'>
        <text>我是左側部分</text>
      </view>
      <view class='grid-item grid-three'>
        <text>我是中間部分</text>
      </view>
      <view class='grid-item grid-three'>
        <text>我是右側部分</text>
      </view>
    </view>
  </view>
</view>
/* css代碼 */
.fluid, .content, .wrapper {
  width: 100%;
  box-sizing: border-box;
}
.wrapper {
  height: 200px;
  margin-bottom: 20px;
}
.wrapper .grid-item {
  height: 100%;
  background: #ccc;
  display: inline-block;
  box-sizing: border-box;
}
.wrapper .grid-half {
  width: 48%;
}
.wrapper .grid-half:nth-child(2n) {
  margin-left: 4%;
}
.wrapper .grid-three {
  width: 32%;
}
.wrapper .grid-three:not(:first-child) {
  margin-left: 2%;
}

3. 彈性佈局 （Flex Layout）

CSS 彈性盒子佈局是 CSS 的模塊之一，定義了一種針對用戶界面設計而優化的 CSS 盒子模型。在彈性佈局模型中，彈性容器的子元素能夠在任何方向上排布，也能夠「彈性伸縮」其尺寸，既能夠增長尺寸以填滿未使用的空間，也能夠收縮尺寸以免父元素溢出。子元素的水平對齊和垂直對齊都能很方便的進行操控。經過嵌套這些框（水平框在垂直框內，或垂直框在水平框內）能夠在兩個維度上構建佈局。

對Flex的理解能夠參考阮一峯 Flex 佈局教程：語法篇。在此不作詳細說明。那咱們看看在小程序中Flex佈局的使用。依然仍是上一個例子中的wxml，咱們只須要修改對應的class以及css便可。微信

Flex佈局iphone5
Flex佈局大尺寸

<!-- wxml代碼 -->
<view class='page fluid'>
  <view class='header fluid__header'>流式佈局</view>
  <view class='content'>
  <!-- 兩列 -->
    <view class='wrapper'>
      <view class='grid-item grid-half'>
        <text>我是左側部分</text>
      </view>
      <view class='grid-item grid-half'>
        <text>我是右側部分</text>
      </view>
    </view>
    <!-- 三列 -->
     <view class='wrapper'>
      <view class='grid-item grid-three'>
        <text>我是左側部分</text>
      </view>
      <view class='grid-item grid-three'>
        <text>我是中間部分</text>
      </view>
      <view class='grid-item grid-three'>
        <text>我是右側部分</text>
      </view>
    </view>
  </view>
</view>
/* css 代碼*/
.wrapper {
  display: flex;
  height: 200px;
  margin-bottom: 20px;
  justify-content: space-between;
}

.wrapper .grid-item {
  height: 100%;
  flex: 1;
  background: #ccc;
}

.wrapper .grid-item:not(:first-child) {
  margin-left: 10px;
}

咱們可以看到與流式佈局顯示出來的效果是有必定的差異的，在item之間的margin值，咱們能夠設定一個固定值，而不用去考慮item寬度的變化。而流式佈局中想要實現這樣的效果，只要想改變中間的間距，咱們都須要從新計算下item的寬度。固然在上一個流式佈局的例子中還能夠配合float或者使用padding來實現這一點。app

4. 自適應佈局 （Adaptive）

自適應佈局（Adaptive）的特色是分別爲不一樣的屏幕分辨率定義佈局。佈局切換時頁面元素髮生改變，但在每一個佈局中，頁面元素不隨窗口大小的調整發生變化。在pc以及移動端均可能涉及到的佈局當中，咱們可使用媒體查詢來實現不一樣屏幕分辨的佈局。 示例

5. 響應式佈局 （Responsive layout）

響應式佈局（Responsive）的特色是分別爲不一樣的屏幕分辨率定義佈局，同時，在每一個佈局中，應用流式佈局的理念，即頁面元素寬度隨着窗口調整而自動適配。
能夠把響應式佈局看做是流式佈局和自適應佈局設計理念的融合。

6. 網格佈局

CSS 網格佈局擅長於將一個頁面劃分爲幾個主要區域，以及定義這些區域的大小、位置、層次等關係（前提是HTML生成了這些區域）。
像表格同樣，網格佈局讓咱們可以按行或列來對齊元素。 然而在佈局上，網格比表格更可能作到或更簡單。 例如，網格容器的子元素能夠本身定位，以便它們像CSS定位的元素同樣，真正的有重疊和層次。詳情請參考阮一峯 CSS Grid 網格佈局教程

咱們來看示例，如何實現一個三行三列的佈局？n行n列呢？iphone

圖片描述

<!-- wxml代碼 -->
<view class='page'>
  <view class='header'>
    <text>Grid 佈局</text>
  </view>
  <view class='content'>
    <view class='wrapper'>
      <view class='grid-item'>
        <text>1</text>
      </view>
      <view class='grid-item'>
        <text>2</text>
      </view>
      <view class='grid-item'>
        <text>3</text>
      </view>
      <view class='grid-item'>
        <text>4</text>
      </view>
      <view class='grid-item'>
        <text>5</text>
      </view>
      <view class='grid-item'>
        <text>6</text>
      </view>
      <view class='grid-item'>
        <text>7</text>
      </view>
      <view class='grid-item'>
        <text>8</text>
      </view>
      <view class='grid-item'>
        <text>9</text>
      </view>
    </view>
  </view>
</view>
.wrapper {
  display: grid;
  /* grid-template-columns: 100px 100px 100px; */
  /* grid-template-columns: repeat(3, 100px); */
  grid-template-columns: repeat(3, 1fr);
  /* grid-template-rows: 100px 100px 100px; */
  /* grid-template-rows: repeat(3, 100px); */
  grid-template-rows: repeat(3, 100px);
}

.grid-item {
  background: #ccc;
  margin-top: 10px;
}

.grid-item:not(:nth-child(3n+1)) {
  margin-left: 10px;
}

6. vw, vh單位

視口百分比長度定義相對於viewport的大小的<length>值，即文檔的可見部分。
vw: 視口寬度的1/100;
vh: 視口高度的1/100;
vmin: 視口高度和寬度之間的最小值的 1/100。
vmax: 視口高度和寬度之間的最大值的 1/100。

實現3行3列的示例：
圖片描述xss

<view class='page'>
  <view class='header'>
    <text>vw、vh單位</text>
  </view>
  <view class='content'>
    <view class='wrapper'>
      <view class='grid-item'>
        <text>1</text>
      </view>
      <view class='grid-item'>
        <text>2</text>
      </view>
      <view class='grid-item'>
        <text>3</text>
      </view>
      <view class='grid-item'>
        <text>4</text>
      </view>
      <view class='grid-item'>
        <text>5</text>
      </view>
      <view class='grid-item'>
        <text>6</text>
      </view>
      <view class='grid-item'>
        <text>7</text>
      </view>
      <view class='grid-item'>
        <text>8</text>
      </view>
      <view class='grid-item'>
        <text>9</text>
      </view>
    </view>
  </view>
</view>
.page {
  padding: 5vw;
}
.grid-item {
  width: 28vw;
  height: 28vw;
  background: #ccc;
  display: inline-block;
  margin-bottom: 2vw;
}
.grid-item:not(:nth-child(3n+1)) {
  margin-left: 3vw;
}

在小程序中咱們更多考慮的是移動設備顯示的效果，不會涉及到媒體查詢的使用。所謂的自適應是指在page中的元素在不一樣移動設備中的自適應。具體實現，可使用微信小程序的rpx單位，以及使用定位、浮動、Flex、Grid佈局來實現。

總結

在這裏我只是涉及到了各類佈局的基本用法，其實每一種佈局仔細研究起來都有不少須要講解的東西，由於各類佈局裏面不少屬性和特性都沒有涉及到。在咱們實際應用中也會有各類佈局需求。因此但願你們在實際使用的時候在深刻的進行了解。

另外，正如這篇文章的標題所述，css佈局在小程序的應用，咱們在h5頁面中的佈局能夠說各式各樣，有不一樣的解決方案。這些佈局概念一些是指某一類佈局的歸納，有一些是指css能夠實現的佈局方式。

那在小程序中通常使用默認的rpx單位來對佈局、字體大小作定義。在以上的例子中都沒有使用到微信的rpx單位，關於rpx的理解，能夠參照小程序官方文檔。rpx（responsive pixel）: 能夠根據屏幕寬度進行自適應。規定屏幕寬爲750rpx。如在 iPhone6 上，屏幕寬度爲375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。目的就是爲了在不一樣的屏幕分辨率下作到自適應。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程