媒体查询及代码初始化

  /* 媒体查询： 具备查询当前设备的能力 */

    /*@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;

}