在线咨询
微信咨询
服务热线
服务热线:15639912513
TOP
当前位置:
首页 > 新闻中心> 前端设计>使用了@media自适应但是不成功

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

发布时间:2020-04-09 浏览:294次

w88高端网站定制制作网站时候,遇到手机端需要自适应。于是出现了使用了@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%;

    }

}

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

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

TAG
294
该内容对我有帮助