Jingdongは、モバイルレコーディングプロジェクトの実践

携帯端末の基本的なレイアウトと流れの要件が適応しました

    /*流式布局：就是百分比布局，非固定像素，内容向两侧填充，理解成流动的布局，称为流式布局*/
    /*视觉窗口：viewport,是移动端特有。这是一个虚拟的区域，承载网页的。
      承载关系：浏览器---->viewport---->网页
    */
    /*适配要求：
        1. 网页宽度必须和浏览器保持一致（因为只要横向不出现滚动条就好）
        2. 默认显示的缩放比例和PC端保持（缩放比例为1.0时和网页上一致）
        3. 不允许用户自行缩放网页（否则破坏了网页的显示方式）
        满足这些要求达到了适配，国际上通用的适配方案，标准的移动端适配方案。
    */
     /*防止内容溢出  不出现滚动条  提供用户体验*/
            box-sizing: border-box;
 /*手机端的浏览器大多数都是使用webkit内核，故要这么适配*/
 -webkit-box-sizing: border-box;
 /*点击高亮效果的清除*/
 tap-highlight-color: transparent;
 -webkit-tap-highlight-color: transparent;

イベントをバインドするにはいくつかの方法
- 上の唯一のイベントを結合するが、さまざまなブラウザと互換性を持つことができます
- Googleの関連ブラウザのさまざまなaddEventListenerを、あなたは複数のイベントをバインドすることができます
- IEのためのattachEventが、そこに何度も結合イベント名があることができ
  
  例えば：タッチイベント
```
           var div=document.querySelector(".div1");
           div.addEventListener("touchstart",function(){
               console.log("start！")
           });
           div.addEventListener("touchmove",function(){
               console.log("start move！")
           });
           div.addEventListener("touchend",function(){
               console.log("end move！")
           });  
```
補足タッチイベントは、いくつかの相違点の座標の点に注意してください。

タッチポイントの各々における現在の接触点の座標e.touchesを記録する[0]が最初のタッチポイント
clientX clientYプロパティベースブラウザウィンドウ（ビューポート）
ページ（ビューポート）に基づいてpageX pageY
がscreenX screenYのスクリーン

カウントダウン分、秒を設定します。

時間=関数（）{ダウンであった
* 60 = 2 * 60時間でした。

setInterval(function() {
 time--;//使用定时器，自动减时间，更新时间
 var h = Math.floor(time / 3600);//小时
 var m = Math.floor(time % 3600 / 60);//分钟
 var s = time % 60;//秒
 var spans = document.querySelectorAll(" .all-time span");
 spans[0].innerHTML = Math.floor(h / 10);//向下取整得到十位数
 spans[1].innerHTML = Math.floor(h % 10);//取余得到个位数
 spans[3].innerHTML = Math.floor(m / 10);
 spans[4].innerHTML = Math.floor(m % 10);
 spans[6].innerHTML = Math.floor(s / 10);
 spans[7].innerHTML = Math.floor(s % 10);
}, 1000)

適応2列

 </head>
 <body>
     <div class="box1">
     </div>
     <div class="box2">
     我是内容我是内容我是内容我是内容我是内容我是内容我是内容
     我是内容我是内容我是内容我是内容我是内容我是内容我是内容
     我是内容我是内容我是内容我是内容我是内容我是内容我是内容
     我是内容我是内容我是内容我是内容我是内容我是内容我是内容
     我是内容我是内容我是内容我是内容我是内容我是内容我是内容
     我是内容我是内容我是内容我是内容我是内容我是内容我是内容
     我是内容我是内容我是内容我是内容我是内容我是内容我是内容
     我是内容我是内容我是内容我是内容我是内容我是内容我是内容
     我是内容我是内容我是内容我是内容我是内容我是内容我是内容
     我是内容我是内容我是内容我是内容我是内容我是内容我是内容
     我是内容我是内容我是内容我是内容我是内容我是内容我是内容
     我是内容我是内容我是内容我是内容我是内容我是内容我是内容
     </div>

     .box1{
            /*设置浮动和宽度*/
             width: 100px;
             height: 100px;
             background-color: pink;
             float: left;
         }
         .box2{
             /*可以清楚浮动，可以让自己绝对绝缘 bfc*/
                /*不让其他浮动元素影响自己*/
            /*不让自己的浮动去影响别的元素*/
             overflow:hidden;
         }

応答エリアを強化するために、アイコンクロップ

 a{
    width: 40px;
    height: 44px;
    padding: 12px 10px;
    position: absolute;
    top: 0;
    /*让背景从内容开始平铺*/
    background-origin: content-box;
    /*没有做背景裁剪 背景图默认就是从边框显示*/
    /*默认的就是
    border-box  边框以外被裁剪掉
    padding-box 内边距以外被裁剪掉
    content-box 内容以外被裁剪掉
    */
    background-clip: content-box;
}

2つのボックスは、設定後のボックスの高さの上に、残りを占有するボックスの高さの下方に設けられています。
```
.jd_main{
    /*占满剩余的高度*/
    width: 100%;
    height: 100%;
    padding-top: 45px;
}     
```

ギャップの画像処理方法

    body{
        /*font-size: 0px;*/
    }
    /*img{
        display: block;
    }*/
    img{
        vertical-align: middle;
    }

幅を設定するために、親コンテナの中央に配置され; 0オート：中央ボックス、マージンの使用を達成します。しかし、カセットの位置の設定、マージン一元利用できない場合。
インライン要素は、限り高さと行の高さが提供されるので、テキストは、水平及び垂直センタリングすることができます
セレクタスペースの問題について
- いいえスペースは兄弟要素を表していませんli.now
- 2つのセレクタの場合の間にスペースがある場合には、サブクラスセレクタを表します
```
.a .b{}
/*代表的是a类的b子类 */
<div class="a b"></div>
/*.a.b{}两个选择器之间没有空格的情况下，代表的是同时拥有两个类名的标签*/
```
透明フロート（子要素がフロートプロパティを設定し、親要素の高さと幅が設定されていないが、それはサブエレメントによって支持され、親要素の高さの崩壊につながる（元の高さ）が0に後で設定されました）

フロートにその子要素は、親要素は、フローティング、またはサブ要素がないと除去することが必要です。

クリアフロート方法：
- 明確な親要素内の冗長要素の追加：両方を、
- 親要素のオーバーフローのプロパティを設定：隠された||オート
- 処理後（擬似要素セレクタ法）
```
.clearFix::before,
.clearFix::after{
    content: "";
    display: block;
    visibility: hidden;
    height: 0;
    line-height: 0;
    clear: both;
}
```
13.スプライト共通スタイルセットは、その後、個別に各アイコンの位置に再設定します
```
[class^="icon-"],[class*=" icon-"]{
    background-repeat: no-repeat;
    background-image: url("../images/sprites.png");
    background-size: 200px 200px;
} ```
```
14.擬似要素は、デフォルトのインライン要素が設定されたブロックに、小さなアイコンを設定するために、スパンの一部を置換することができます

15.いくつかの小さな細部

H3は太字フォントの太さを設定していない：通常の
より多くのスパンを入れている、例えば、div要素を使用するために、より多くのコンテンツよりも含まれてい
背景画像は、ライト中心位置を設定する必要はありません。
フローティング要素の提供は、ブロックレベルに変換されます
図は、ブロックのセットを有する、幅が設けられていなくてもよいです
中央に配置された下余白幅設定部除去をIMG設定マージン

Jingdongは、モバイルレコーディングプロジェクトの実践

Jingdongは、モバイルレコーディングプロジェクトの実践

おすすめ