CSS 小測 - 03

說在前面

本篇是張鑫旭老師的 CSS基礎測試4 的閱後筆記。（感謝 XboxYan 的解答，堪稱模板。另外還有幾位同窗的解答也各有亮點：yaeSakuras，maomao1996）

題目

先來看看題目。

完成下圖所示的佈局效果，只要兼容移動端便可，效果以下：

需求：

• 視覺還原
• 代碼友好
• 體驗良好

思路

仍是老規矩，先實現最基礎的，再談優化。

這個界面乍一看有幾個關鍵點：

• 氣泡小尾巴
• 佈局

氣泡小尾巴

那麼先來看看這個氣泡小尾巴的實現。

在我上期的 css 小測 - 02 中提到過經過 border 來繪製三角形的原理，這裏一樣使用 border 來完成小尾巴的繪製。

首先把正方形畫出來：

.border{
    border: 20px solid $borderColor;
}
複製代碼

效果以下：

從題目的圖中能夠看到，小氣泡是具備弧度的，那麼這裏很明顯可使用 border-radius 來調節。

首先咱們爲這個元素添加大小，而後去掉其中兩個相鄰邊的 border。

.border{
    background: deeppink;
    height: 20px;
    width: 20px;
    border-width: 0px 0px 20px 20px;
}
複製代碼

效果以下：

如今咱們讓左上角具備必定的弧度：

.border{
    background: deeppink;
    height: 20px;
    width: 20px;
    border-width: 0px 0px 20px 20px;
    border-top-left-radius: 60px;
}
複製代碼

效果以下：

仔細觀察的話，小尾巴的雛形已經出現了，咱們只須要讓其餘部分消失便可。這裏須要消除的是元素自己的背景色和底部的邊框。

.border{
    background: #fff;
    height: 20px;
    width: 20px;
    border-width: 0px 0px 20px 20px;
    border-top-left-radius: 60px;
    border-bottom-color: transparent;
}
複製代碼

最終效果以下：

這個小尾巴，在實現好氣泡以後，讓它把一部分藏在氣泡之下便可。

佈局

關於佈局在個人 css 小測 - 01 中也有提到過。

這裏咱們先構建 HTML，有如下幾點值得注意：

• 注意命名空間
• 若是遇到不一樣性質的命名空間，能夠一般有兩種解決方案：
  • 使用 class，在命名上加以區分，好比 msg-item__left
  • 使用屬性選擇器
• 儘可能使用具備語義的標籤

注意以上幾點，HTML 就沒什麼好說的了：

<ul class="chat-list">
  <li class="chat-item">
    <img class="chat-avator" alt="head" src="https://tva4.sinaimg.cn/crop.0.0.750.750.180/75f2b996jw8f6zkdm7qp7j20ku0kudgr.jpg" />
    <div class="chat-container">
      <h3 class="chat-user">
        <span class="chat-name">提按生</span>
        <span class="chat-time">9月30日 21:47</span>
      </h3>
      <p class="chat-content">
        什麼祕密，我以爲你如今跟我說什麼都沒有意義。
      </p>
    </div>
  </li>
  <li class="chat-item" date-chat-self>
    <img class="chat-avator" alt="head" src="https://tvax3.sinaimg.cn/crop.135.0.810.810.180/006LO43wly8frjay2sypvj30u00mita5.jpg" />
    <div class="chat-container">
      <h3 class="chat-user">
        <span class="chat-name">X優秀Y</span>
        <span class="chat-time">剛剛</span>
      </h3>
      <p class="chat-content">
        圍觀戲精現場
      </p>
    </div>
  </li>
</ul>
複製代碼

那麼接下來寫 css。首先，reset css 的時候，padding 並無設置的必要，由於 html 和 body 並無 padding，其餘須要花時間細調的就先不贅述了。

html,
body {
    margin: 0;
    height: 100%;
}

.chat-list {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: auto;
    list-style: none;
}

.chat-item {
    display: flex;
    padding: 0.4375rem;
    margin-bottom: 0.9375rem;
}

.chat-item::after {
    content: '';
    display: inline-block;
    width: 2.75rem;
}

.chat-avator {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    object-fit: cover;
}

.chat-container {
    flex: 1;
    text-align: start;
    padding: 0 0.625rem;
    overflow: hidden;
}

.chat-user {
    margin: 0;
    font-weight: normal;
    font-size: 0.8125rem;
    color: #949ead;
}

.chat-user span {
    display: inline-block;
}

.chat-time {
    padding: 0 0.5rem;
}

.chat-content {
    position: relative;
    display: inline-flex;
    background: #f2f5f9;
    border-color: #f2f5f9;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #2c3038;
    padding: .6rem 1rem;
    text-align: left;
    margin: 0.3125rem 0 0;
    border-radius: 0.375rem;
}

.chat-content::before {
    content: '';
    position: absolute;
    width: 1.4rem;
    height: 1.2rem;
    top: 0;
    margin-inline-start: -3rem;
    border-top-right-radius: 40% 50%;
    border-top-left-radius: 40% 50%;
    border-left: 0.6rem solid;
    border-right: 0.6rem solid;
    border-color: inherit;
}

.chat-item[data-chat-self] .chat-content {
    background: #00afff;
    border-color: #00afff;
    color: #fff;
}
複製代碼

效果以下：

接下來只須要讓本身發送的消息靠右而且顛倒文字順序便可，能夠經過 flex-direction 來實現，不過最好的方式是經過 direction: rtl 來改變文檔流：

.chat-item[data-chat-self] {
    direction: rtl;
}
複製代碼

效果以下：

到這裏基本就完成了整個頁面的佈局，想要繼續優化的話，能夠從自適應屏幕寬度入手，以前能夠經過 js 動態計算根元素的 font-size 大小，如今使用 media 就能夠實現這個效果了：

html{
    font-size: 16px;
}

@media screen and (min-width: 375px) {
    html {
        /* iPhone6 的 375px 尺寸做爲 16px 基準，414px 正好 18px 大小 */
        font-size: calc(100% + 2 * (100vw - 375px) / 39);
        font-size: calc(16px + 2 * (100vw - 375px) / 39);
    }
}

@media screen and (min-width: 414px) {
    html {
        /* 414px ~ 1000px 每 100 像素寬字體增長 1px(18px ~ 22px) */
        font-size: calc(112.5% + 4 * (100vw - 414px) / 586);
        font-size: calc(18px + 4 * (100vw - 414px) / 586);
    }
}

@media screen and (min-width: 600px) {
    html {
        /* 600px ~ 1000px 每 100 像素寬字體增長 1px(20px ~ 24px) */
        font-size: calc(125% + 4 * (100vw - 600px) / 400);
        font-size: calc(20px + 4 * (100vw - 600px) / 400);
    }
}

@media screen and (min-width: 1000px) {
    html {
        /* 1000px 日後是每 100 像素增長 0.5px */
        font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);
        font-size: calc(22px + 6 * (100vw - 1000px) / 1000);
    }
}
複製代碼

效果以下：

能夠看到，隨着屏幕尺寸的減少，總體內容都在不斷的變小。

結束語

這一次的小測主要考察咱們的綜合素質，因此並無太多的細節可講，這裏貼一下張老師總結出來的幾個關鍵點：

• 基準字號使用 16px，不用其它像素值。也不用使用 100px
• media 查詢和 vw 技巧實現 html 基礎尺寸動態化（無需JS）
• 要有統一的類名命名空間，相似 chat-
• 遇到不一樣性質的命名，一般兩種方式
  • 類名，可是命名上明顯區分，例如 chat-item__left
  • 使用屬性選擇器
• 避免不必的嵌套，百害無一益
• 小尾巴的實現。邊框+圓角，box-shadow+ 圓角，徑向漸變
• 左右對稱佈局的實現：direction: rtl 配合 CSS 邏輯屬性
• 不推薦使用 dl 標籤，能夠給每一個列表增長 tabindex=0

最後 在線 Demo 在這裏