Xiaomi Mall レスポンシブ ラーニング_html/css_WEB-ITnose

タオバオのモバイル ウェブページは、私が常に切望していたものです - rem を介して本当に応答性が高いのですが、PC での元のアプローチとはまったく異なるといつも感じています。おそらく私にはそれが理解できないのでしょう。週末に、Xiaomi のモバイル Web ページも em モードで書かれていることを偶然発見しました。ソース コードを見ると、これが私が追求しているレスポンシブ WAP Web ページであることがわかりました。学習の記録~

ウェブサイト: http://m.mi.com

基本設定

1. 背景をクリックするためのタグ blue-webkit-tap-highlight-color: rgba(0,0,0,0) ;
   
2. Webkit カーネルブラウザのテキストサイズ調整機能を無効にする -webkit-text-size-adjust: none;
   
3. 長い単語を次の行に折り返すことを許可 word-wrap:break-word;

要素単位(em )

1. 含まれるもの: パディング、マージン、幅、高さ、フォントサイズ、行の高さなど
   

2. グローバルボディを通じて基本フォントサイズを設定します

   body {    font-size: 20px;}@media only screen and (max-width: 710px) and (min-width: 640px)body {    font-size: 17.77778px;}

iconFont

1. Globalスタイル設定

   @font-face {    font-family: iconfont;    src: url(/static/fonts/iconfont_2337a86.eot?9owfml);    src: url(/static/fonts/iconfont_2337a86.eot?#iefix9owfml) format("embedded-opentype"),url(/static/fonts/iconfont_53935e1.woff?9owfml) format("woff"),url(/static/fonts/iconfont_bfbfeef.ttf?9owfml) format("truetype"),url(/static/fonts/iconfont_7a400bd.svg?9owfml#icomoon) format("svg");    font-weight: 400;    font-style: normal}[class^=icon-], [class*=" icon-"], .iconfont {    font-family: iconfont!important;    speak: none;    font-style: normal;    font-weight: 400;    font-variant: normal;    text-transform: none;    line-height: 1;    -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale;}

2. iconfont要素の追加

   .page-index .nav-index li a .icon:before {    font-size: 4em;    color: #5c6066;    line-height: 1.375em;}

   .icon-huafeichongzhi:before {    content: "\e608";}

3. その他の設定

   .page-index .nav-index li a .icon {    display: block;    margin: 0 auto .5em;    width: 5em;    height: 5em;    -webkit-background-size: 5em 5em;    -moz-background-size: 5em 5em;    -ms-background-size: 5em 5em;    -o-background-size: 5em 5em;    background-size: 5em 5em;}

レイアウト

1. display: table;、display: table-row;、display: table-cell;、border-collapseを使用float:left レイアウトの代わりに、display: box;, box-flex: 1;
   差分処理には first-child などの疑似クラスを使用します
2. 
   親の幅と高さ

.imgurl img {    width: 100%;}li, img, label, input {    vertical-align: middle;}

3. 背景画像 サイズはbackground-sizeで渡されます: 3.85em 2.7em; 設定

4. 
   コンテンツの垂直方向のセンタリングとコンテンツの水平方向のセンタリング

div#DemoArea {    display: box;    box-align: start;    -moz-box-align: start;    -webkit-box-align: start;    box-align: start;}

div#DemoArea {    display: box;    box-align: start;    -moz-box-pack:center;    -webkit-box-pack:center;    box-pack:center;}

5. 概要の反映

CS s3新しい技術が適用されていて新鮮です

1. ユニットとしてのemはレムの方が使いやすいですか？