使用了@media自适应但是不成功

郑州高端网站定制制作网站时候，遇到手机端需要自适应。于是出现了使用了@media自适应但是不成功的问题。

为睢县等地区用户提供了全套网页设计制作服务，及睢县网站建设行业解决方案。主营业务为做网站、网站设计、睢县网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

下面把代码粘贴出来，以供大家互相学习。

@media screen and (max-width: 800px){

    .problem{

        width: 100%;

        margin: auto;

        background-color: #f2f2f2;

    }

    .problem img{

        width: 100%;

        height:100%;

    }

    .range_classify {

        background: #fff;

        border-radius: 10px;

        height: 100%;

    }

    .range_classify div {

        width: 100%;

        overflow: hidden;

        float: left;

        border-right: 1px #ebebeb solid;

        padding: 25px 0px 0px 25px;

    }

}

从这段代码来看，本身是没有问题的。但是放在css样式里面，就有讲究了。请看分析：

1、需要把这段代码拆分开来，不然手机端就是无法显示，还是显示电脑端的样式。

@media screen and (max-width: 800px){

    .range_classify {

        background: #fff;

        border-radius: 10px;

        height: 100%;

    }

    .range_classify div {

        width: 100%;

        overflow: hidden;

        float: left;

        border-right: 1px #ebebeb solid;

        padding: 25px 0px 0px 25px;

    }

}

@media screen and (max-width: 800px){

    .problem{

        width: 100%;

        margin: auto;

        background-color: #f2f2f2;

    }

    .problem img{

        width: 100%;

        height:100%;

    }

}

看懂了吧，必须把两端代码从一段代码中拆分。郑州高端网站定制实现了很多次，发现只有拆分开后，才可以进行手机端的自适应。至于原因，有可能是在一块加载不了。

2、每一段@media screen代码必须，重要的事情说三遍，必须紧跟着电脑端的样式。这样手机端才可以实现自适应。