Jingdong mobile recording project practice

The basic layout and flow requirements of the mobile terminal adapted

    /*流式布局：就是百分比布局，非固定像素，内容向两侧填充，理解成流动的布局，称为流式布局*/
    /*视觉窗口：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;

Several ways to bind events

on only bind an event, but can be compatible with various browsers
addeventlistener for a variety of Google-related browser, you can bind multiple events

attachEvent for IE, but there can be many times the binding event name on there

eg: touch event

           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！")
           });

Supplementary touch event, note a few differences coordinates

In each of the touch point will record the current touch point coordinates e.touches [0] first touch point
clientX clientY based browser window (viewport)
the pageX pageY based on the page (viewport)
screenX screenY-Screen

Set the countdown minutes and seconds

was down hour = function () {
were hour = 2 * 60 * 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)

Adaptive two columns

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

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

Crop icon to enhance the response area

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

Two boxes, above the height of the box after setting, is provided below the height of the box to occupy the remaining

.jd_main{
    /*占满剩余的高度*/
    width: 100%;
    height: 100%;
    padding-top: 45px;
}

The image processing method of the gap

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

Achieve a center box, the use of margin: 0 auto; is centered in the parent container, to set the width. However, if the cassette positioning setting, margin centrally unavailable.
Inline elements, as long as the height and the line height is provided, so that the text can be centered horizontal and vertical

About selector spaces problem

No spaces represent sibling elementsli.now

When there is a space between the case of two selectors, it represents a subclass selector

.a .b{}
/*代表的是a类的b子类 */
<div class="a b"></div>
/*.a.b{}两个选择器之间没有空格的情况下，代表的是同时拥有两个类名的标签*/

Clear float (when the child element sets the float property, and a height and width of the parent element is not set, but it is supported by the sub-elements, will lead to the collapse of the parent element height (the original height was later set to 0))

That child element to float, the parent element is necessary to remove the floating, or sub-element is not there.

Clear float ways:
- Adding redundant elements within the parent element clear: both;
- Setting properties in the parent element overflow: hidden || auto
- after process (pseudo-element selector method)
```
.clearFix::before,
.clearFix::after{
    content: "";
    display: block;
    visibility: hidden;
    height: 0;
    line-height: 0;
    clear: both;
}
```
13. Sprite common style set, then set again to the position of each icon separately
```
[class^="icon-"],[class*=" icon-"]{
    background-repeat: no-repeat;
    background-image: url("../images/sprites.png");
    background-size: 200px 200px;
} ```
```
14. Pseudo-elements may be substituted for some of the span, for setting a small icon, the default inline elements, to set block

15. Some small details

H3 not set bold font-weight: normal
Contains more than content to use div, for example, which put more span
Background image does not need to set the write center position
Provision of the floating element will be converted into block-level
FIG have a set to Block, width may not be provided
margin setting a img centrally disposed bottom margin width setting block Elimination

Jingdong mobile recording project practice

Jingdong mobile recording project practice

Guess you like