媒体查询及代码初始化

  /* 媒体查询： 具备查询当前设备的能力 */
    /*@media tv {*/
      /*.container{*/
        /*background-color: red;*/
      /*}*/
    /*}*/


    /* 大屏的适配的 媒体查询代码 >1200px */
    @media screen and (min-width: 1200px) {
      .container{
        background-color: pink;
        width: 1100px;
      }
    }


    /* 中等屏幕  992-1200*/
    @media screen and (min-width: 992px) and (max-width: 1200px) {
      .container{
        background-color: green;
        width: 980px;
      }
    }


    /* 小屏幕  768-992 pad*/
    @media screen and (min-width: 768px) and (max-width: 992px) {
      .container{
        background-color: yellow;
        width: 768px;
      }
    }


    /* 超小屏幕  <768px 手机*/
    @media screen and  (max-width: 768px) {
      .container{
        width: 100%;
        background-color: red;
      }

    }

//js原生响应式代码

responsive();
    //当页面宽度 大于 960 像素的时候 页面为红色并显示computer
    //当页面宽度 大于 640 小于 960 页面为绿色并显示tablet
    //剩下的情况为黄色并显示mobile
    //窗口大小发生改变的时候才执行
    window.onresize = function () {
        responsive();
    };
    //封装
    function responsive() {
        if (client().width > 960) {//说明是电脑
            document.body.style.backgroundColor = "red";
            document.body.innerHTML = "computer";
        } else if (client().width > 640) {//说明是平板
            document.body.style.backgroundColor = "green";
            document.body.innerHTML = "tablet";
        } else {//是手机
            document.body.style.backgroundColor = "yellow";
            document.body.innerHTML = "mobile";
        }
    }
    //封装
    function client() {
        return {
            width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,
            height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
        };
    }

/*代码初始化*/

@charset "UTF-8";
/*css 初始化 */
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {
    margin: 0;
    padding: 0;
}


/*各浏览器显示不同，去掉蓝色边框*/
fieldset, img, input, button {
    border: none;
    padding: 0;
    margin: 0;
    outline-style: none;
}


ul, ol {
    list-style: none;
}


/*统一组合框的默认样式*/
input {
    padding-top: 0;
    padding-bottom: 0;
    font-family: "SimSun", "宋体";
}


select, input, button {
    vertical-align: middle;
}


select, input, textarea {
    font-size: 12px;
    margin: 0;
}


/*防止拖动 影响布局*/
textarea {
    resize: none;
}


/*去掉行内替换元素空白缝隙*/
img {
    border: 0;
    vertical-align: middle;
}


table {
    border-collapse: collapse;
}


body {
    font: 12px/150% Arial, Verdana, "\5b8b\4f53"; /*宋体 unicode */
    color: #666;
    background: #fff;
}


/*清除浮动*/
.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}


.clearfix:after {
    clear: both;
}


.clearfix {
    *zoom: 1; /*IE/7/6*/
}


a {
    color: #666;
    text-decoration: none;
}


a:hover {
    color: #C81623;
}


h1, h2, h3, h4, h5, h6 {
    text-decoration: none;
    font-weight: normal;
    font-size: 100%;
}


s, i, em {
    font-style: normal;
    text-decoration: none;
}


/*京东色*/
.col-red {
    color: #C81623 !important;
}


/*公共类*/
.w {
    /*版心 提取 */
    width: 1210px;
    margin: 0 auto;
}


.fl {
    float: left;
}


.fr {
    float: right;
}


.al {
    text-align: left;
}


.ac {
    text-align: center;
}


.ar {
    text-align: right;
}


.hide {
    display: none;
}