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代码必须，重要的事情说三遍，必须紧跟着电脑端的样式。这样手机端才可以实现自适应。
