如何解决PC端和移动端自适应问题?
宽度自适应:
关于最小宽度和最大宽度
//html部分
<div id='container'>
<div class='one'></div>
<div class='two'></div>
<div class='three'></div>
</div>
//css部分
#container{width:100%;}
.one{width:20%;background:red;}
.one,.two,.three{float:left; height:100px;}
.two{width:60%;background:yellow;}
.three{width:20%;background:blue;}
@media (max-width:800px){ //--如果浏览器小于800px
.one{width:40%;}
.two{width:60%}
.three{width:100%}
}
@media (max-width:400px) //--如果浏览器宽度小于400px
{
.one{width:100%}
.two{width:100%}
.three{width:100%}
}
理解什么叫最小宽度和最大宽度,最小宽度指为元素设置的最小宽度,到达最小宽度后,缩放文本不会起到任何作用
最大宽度是所有元素所能达到的一个上限,不能再继续往上增加。
如何理解主流浏览器: