盒模型元素寬度的計算方式

IE沒有標準盒模型

元素寬度 = width + padding + border
盒子總寬度 = 元素寬度 + margin

CSS3中增加了一個計算盒模型的css屬性box-sizing

box-sizing: content-box | padding-box | border-box;
預設值：content-box

為了避免盒模型大小變化造成網頁排版問題，一般在樣式重置的規則中，將盒模型設定為border-box

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing
 
: border-box;
  box-sizing: border-box;
}

設定之後，盒子寬度的計算方式為：

盒子總寬度 = width

CSS命名規範-BEM命名規範

BEM 是一種基於元件的命名方式，它的基本思想是將使用者介面劃分為獨立的模組，即使是複雜的使用者介面，也能讓開發過程變得簡單、快速。並且可以在一定程度上提高程式碼的可複用性，而不用純粹的複製貼上。
BEM 的意思是模組（Block）、元素（Element）、修飾符（Modifier），使用這種命名方式可以讓 CSS 的類名變得有實際意義且能自我解釋，具有更高的開發友好性。
–《大廠 H5 開發實戰手冊》

書寫樣式時，搭配CSS的預處理語言，可以簡化css樣式的書寫。

// 以下是 SCSS 程式碼
.search-bar {
  &__input { ... }
  &__button { ... }
}

ClassName 的命名應該儘量精短、明確，以英文單詞命名，且全部字母為小寫，避免意義不明的縮寫
單詞之間統一使用下劃線 _ 或 - 連線
學習 BEM 的思想，參考使用姓氏命名法規範
定義樣式模組，提高程式碼的可複用性

響應式頁面的開發

我們可以結合 rem 單位來實現頁面的佈局。rem 彈性佈局的核心在於根據視窗大小變化動態改變根元素的字型大小，那麼我們可以通過以下步驟來進行優化：
給根元素的字型大小設定隨著視窗變化而變化的 vw 單位，這樣就可以實現動態改變其大小
其他元素的文字字號大小、佈局高寬、間距、留白都使用 rem 單位。
限制根元素字型大小的最大最小值，配合 body 加上最大寬度和最小寬度，實現佈局寬度的最大最小限制。
–《大廠 H5 開發實戰手冊》

// rem 單位換算：定為 75px 只是方便運算，750px-75px、640-64px、1080px-108px，如此類推
$vw_fontsize: 75; // iPhone 6尺寸的根元素大小基準值
@function rem($px) {
     @return ($px / $vw_fontsize ) * 1rem;
}
// 根元素大小使用 vw 單位
$vw_design: 750;
html {
    font-size: ($vw_fontsize / ($vw_design / 2)) * 100vw; 
    // 同時，通過Media Queries 限制根元素最大最小值
    @media screen and (max-width: 320px) {
        font-size: 64px;
    }
    @media screen and (min-width: 540px) {
        font-size: 108px;
    }
}
// body 也增加最大最小寬度限制，避免預設100%寬度的 block 元素跟隨 body 而過大過小
body {
    max-width: 540px;
    min-width: 320px;
}