我從Android學習的Weex，開發過程中需要實現人口列表介面，在Android所學到的常用佈局不適用，因此需要了解CSS樣式，由於CSS樣式需要了解的不少，這裡不累贅CSS過多知識，只針對需要實現的介面來做說明。先來看效果圖。

螢幕適配問題

Android開發中比較忌諱寬高都固定寫死，所以我在寫前端程式碼時候喜歡用自適應去實現樣式，但這樣寫可能出現問題。
問題1：文字過長並沒有進行換行處理。

問題2：使用大屏手機檢視時字型變小了。

這裡需要注意兩點：

1. 文字標籤需要給出實際的寬度，否則無法換行。
2. text標籤在style中字型大小不能用size定義，而是用font-size。

帶著以上兩個問題及解決方式，我們走一遍編寫流程。

程式碼內容

新建專案這些不重複，找個能跑得起來的專案new一個vue檔案並建立跳轉關係。這裡我用的是測試專案列表，在列表點選新增時跳轉到我需要演示的檔案。

      <div class="main-div">
        <image style="width: 100px;height: 100px;margin-bottom: 20px" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2418499126,3726548399&fm=27&gp=0.jpg"
 
></image>

        <div class="text-div">
          <div class="text-title-div">
            <text class="text name">張三丰</text>
            <text class="text time">2018-02-24</text>
          </div>
          <text class="text address">貴州省貴陽市觀山湖區金陽北路摩根中心B棟</text
 
>
        </div>
      </div>

以上是列表Item所需要的基本標籤，接下來開始對標籤進行style定義

<style scoped>
 .main-div{
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
  flex-direction: row;
  align-items: center;
  border-bottom-width: 1px;
  border-bottom-color: #999;
  }
  .text-div{
    margin-left: 20px;
  }
  .text-title-div{
    flex-direction: row;
  }
  .text{
    font-size: 32px;
    color: #333;
    text-align: left;
  }
  .name{
    width: 300px;
  }
  .time{
    width: 290px;
    color: #999999;
    text-align: right;
    font-size: 28px;
  }
  .address{
    margin-top: 10px;
    width: 590px;
  }
</style>

對style的樣式解釋一下：
main-div :設定排列方向為水平。定義總的寬度和高度，定義magrin:left、right、top各20px,由於底部的margin設定後會影響到邊框效果，故而去內部標籤定義。
text name，可以在style中引用text的樣式name不再重複定義。同時也可以看到我寫死了文字標籤的寬度。而寬度需要計算一下：
Weex給螢幕的寬度是750PX,高度1250PX。
由於我們設定了margin
class:main-div樣式中定義了左右各20px。
class:text-div樣式中定義了左20px。
圖片顯示佔用了100px，750px-160px=590px。
這樣對name和time進行平均分配，結合業務需要，name可能過長，而time格式化也就那樣，所以不必分配過多寬度給time。
因此name寬度為300px，time寬度為290px（還是那句話，結合業務需要分配），而address獨佔一行，那麼設定為590px。

結語

至此一個列表樣式已經編寫完成，在需要的業務下遍歷資料即可，由於還在學習前端，編寫CSS樣式方面比較頭疼，所以有時間就自己動手熟悉熟悉記錄記錄。