H 5開発実践−内容まとめ

ボックスモデル要素の幅の計算方法
IE標準ボックスモデルなし

     = width + padding + border
      =      + margin

CSS 3には、計算ボックスモデルのcss属性box-sizingが追加されている

box-sizing: content-box | padding-box | border-box;
   ：content-box

ボックスモデルのサイズの変化によるWebページのレイアウトの問題を回避するために、一般的にスタイルリセットのルールでは、ボックスモデルを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のクラス名を実用的かつ自己解釈可能にし、より高い開発友好性をもたらすことができる.–『大工場H 5開発実戦マニュアル』
スタイルを書く場合、CSSの前処理言語を組み合わせることで、cssスタイルの書き方を簡略化することができます.

//     SCSS   
.search-bar {
  &__input { ... }
  &__button { ... }
}

ClassNameの命名はできるだけ短く、明確にし、英語の単語で命名し、すべてのアルファベットを小文字にし、意味不明な略語の間に下線を統一的に使用しないようにしなければならない.または-接続学習BEMの考え方を学び、姓命名法規範を用いてスタイルモジュールを定義し、コードの多重性を高める
レスポンスページの開発
rem単位と組み合わせてページのレイアウトを実現できます.remフレキシブルレイアウトの核心は、ウィンドウのサイズの変化に基づいてルート要素のフォントサイズを動的に変更することであり、ルート要素のフォントサイズにウィンドウの変化に伴って変化するvw単位を設定することで、他の要素のテキストサイズ、レイアウトの幅、間隔、白を動的に変更するためにrem単位を使用することができます.ルート要素のフォントサイズの最大最小値を制限し、bodyと最大幅と最小幅を合わせてレイアウト幅の最大最小制限を実現します.–『大工場H 5開発実戦マニュアル』

// 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;
}