怎么让代码编程自适应PC和手机显示呢
下面网站上的代码PC显示正常，但是手机打开不正常，我们该如何提高自己的编程适应性，谢谢大佬<style>
@charset "utf-8";
/* CSS Document */
body{
background-color:#FFFFFF;
}
div.__01 {
margin:0 auto;
width:960px;
height:1203px;
}
div.baihe-01_ {
float:left;
background:url(baihe_01.png);
width:960px;
height:110px;
}
div.baihe-02_ {
float:left;
background:url(baihe_02.png);
width:960px;
height:361px;
}
div.baihe-03_ {
float:left;
background:url(baihe_03.png);
width:960px;
height:503px;
}
div.baihe-04_ {
float:left;
background:url(baihe_04.png);
width:960px;
height:226px;
}
div.baihe-05_ {
float:left;
background:url(baihe_05.png);
width:960px;
height:3px;
}
</style>
<div class="__01" id="baihe_ID">
<div class="baihe-01_"></div>
<div class="baihe-02_"></div>
<div class="baihe-03_"></div>
<div class="baihe-04_"></div>
<div class="baihe-05_"></div>
</div>
两个设备分辨率都不一样
媒体查询 两套代码 按你现在的写法，要适用手机端就要再加样式，例如下面这样，把你那些写死的width、height在不同的屏幕下再写一遍
/*手机端*/
@media (min-width: 480px) and (max-width: 767px) {
div._01{
...
}
...
}
/*平板电脑*/
@media (min-width: 768px) and (max-width: 979px) {
div._01{
...
}
...
}
/*PC端*/
@media (min-width: 980px) {
div._01{
...
}
...
}
现在弹性布局，流式布局都还不错，使用栅格就不用每次都写死width了
页:
[1]