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

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

中文布局CSS庫

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

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

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

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

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

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

2. 中文庫

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

然后我們?cè)儆靡粋€(gè)中文漸變色的 CSS 庫來美化我們的界面：chinese-gradient

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

實(shí)例演示
預(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標(biāo)簽引入中文布局 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-layout">

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

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

    /* 父元素 */
    ul {
      /* 清除默認(rèn)樣式 */
      list-style: none;

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

      /* 給個(gè)合適的間距 */
      gap: 5px
    }

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

      /* 給個(gè)高度 */
      height: 100px
    }
  </style>
</head>
<body>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</body>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

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

3. 小結(jié)

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