第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

手撕紅黑樹 · 更新于 2021-01-20

中文布局CSS庫

1. 什么是響應(yīng)式布局

由于移動端設(shè)備尺寸差距非常大，有還在用好幾年前手機的、有用高分辨率視網(wǎng)膜屏幕的、還有用屏幕超大的iPad的。

有人可能會問：iPad也算移動端嗎？其實并不是只有那種能裝進兜里的才叫移動端，雖然說iPad或者其他一些平板電腦不會像手機那樣被人隨身攜帶，但下班回家或者放學(xué)回宿舍的時候，靠在沙發(fā)上拿出平板連上wifi，打開空調(diào)再來一杯果汁，是一天當中最幸福的時刻。

平板電腦處于這么一個尷尬的位置：屏幕比不上筆記本、便攜又比不過手機，但它畢竟是靠觸摸來操作的，雖然也有外接鍵盤的功能，但大部分還是靠觸摸來進行操作的。

既然要靠觸摸進行操作，常規(guī)的針對PC端寫的網(wǎng)站就不太合適了，還是要為移動端寫的網(wǎng)站比較靠譜。

但如果設(shè)計移動端的時候并沒有考慮到這么寬的屏幕，放在平板上就會變成這樣：
圖片描述
也就是說屏幕過小時會被壓縮，而屏幕過大時又會被拉伸，響應(yīng)式就是為了解決這一一種問題的：
圖片描述
當然上圖這個做的也不是特別的好，因為在拉伸的時候右側(cè)會有空白區(qū)域，顯得沒有填滿，真正好的應(yīng)該是這樣：
圖片描述
無論屏幕寬窄，左右兩側(cè)始終沒有縫隙，然后可以根據(jù)屏幕的大小來自動進行換行。

2. 中文庫

借助市面上已有的 CSS 庫，我們可以很輕易的做到居中布局，尤其是可以用到中文關(guān)鍵字，這非常有利于我們的記憶，它就是 chinese-layout。

然后我們再用一個中文漸變色的 CSS 庫來美化我們的界面：chinese-gradient

要點就是在head標簽中用link標簽引入 chinese-gradient 和 chinese-layout。
然后就可以使用中文關(guān)鍵字啦：

實例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 在這里用link標簽引入中文布局 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-layout">

  <!-- 在這里用link標簽引入中文漸變色 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-gradient">
  <style>
    /* 清除默認樣式 */
    * { padding: 0; margin: 0 }

    /* 令html和body全屏顯示 */
    html, body { height: 100% }

    /* 父元素 */
    ul {
      /* 清除默認樣式 */
      list-style: none;

      /* 先在父元素上設(shè)置grid布局 */
      display: grid;
      grid: var(--響應(yīng)式);

      /* 給個合適的間距 */
      gap: 5px
    }

    /* 子元素 */
    li {
      /* 綠色漸變 */
      background: var(--極光綠);

      /* 給個高度 */
      height: 100px
    }
  </style>
</head>
<body>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

運行結(jié)果：
圖片描述

3. 小結(jié)

怎么樣？用CSS庫是不是很簡單呢？
但是我們不僅要學(xué)會CSS庫的用法，還要學(xué)會在不依賴外部條件的情況下進行純手寫，所以下一小節(jié)我們來講講原生CSS的寫法。