[已解决]怎么让代码编程自适应PC和手机显示呢

王到物流公司

下面网站上的代码PC显示正常，但是手机打开不正常，我们该如何提高自己的编程适应性，谢谢大佬

1. <style>
   
2. @charset "utf-8";
   
3. /* CSS Document */
   
4. 
   
5. body{
   
6.     background-color:#FFFFFF;
   
7.   }
   
8. 
   
9. div.__01 {
   
10.     margin:0 auto;
    
11.     width:960px;
    
12.     height:1203px;
    
13. }
    
14. 
    
15. div.baihe-01_ {
    
16.     float:left;
    
17.     background:url(baihe_01.png);
    
18.     width:960px;
    
19.     height:110px;
    
20. }
    
21. 
    
22. div.baihe-02_ {
    
23.     float:left;
    
24.     background:url(baihe_02.png);
    
25.     width:960px;
    
26.     height:361px;
    
27. }
    
28. 
    
29. div.baihe-03_ {
    
30.     float:left;
    
31.     background:url(baihe_03.png);
    
32.     width:960px;
    
33.     height:503px;
    
34. }
    
35. 
    
36. div.baihe-04_ {
    
37.     float:left;
    
38.     background:url(baihe_04.png);
    
39.     width:960px;
    
40.     height:226px;
    
41. }
    
42. 
    
43. div.baihe-05_ {
    
44.     float:left;
    
45.     background:url(baihe_05.png);
    
46.     width:960px;
    
47.     height:3px;
    
48. }
    
49. </style>
    
50. <div class="__01" id="baihe_ID">
    
51.     <div class="baihe-01_"></div>
    
52.     <div class="baihe-02_"></div>
    
53.     <div class="baihe-03_"></div>
    
54.     <div class="baihe-04_"></div>
    
55.     <div class="baihe-05_"></div>
    
56. </div>

复制代码

最佳答案

李植

2021-4-30 08:28:54

按你现在的写法，要适用手机端就要再加样式，例如下面这样，把你那些写死的width、height在不同的屏幕下再写一遍

1. /*手机端*/
   
2. @media (min-width: 480px) and (max-width: 767px) {
   
3.      div._01{
   
4.           ...
   
5.     }
   
6.     ...
   
7. }
   
8. 
   
9. /*平板电脑*/
   
10. @media (min-width: 768px) and (max-width: 979px) {
    
11.    div._01{
    
12.         ...
    
13.    }
    
14.    ...
    
15. }
    
16. 
    
17. /*PC端*/
    
18. @media (min-width: 980px) {
    
19.   div._01{
    
20.        ...
    
21.   }
    
22.   ...
    
23. }

复制代码

现在弹性布局，流式布局都还不错，使用栅格就不用每次都写死width了

跳转到最佳答案楼层

喜扬扬

两个设备分辨率都不一样  
媒体查询 两套代码

李植

按你现在的写法，要适用手机端就要再加样式，例如下面这样，把你那些写死的width、height在不同的屏幕下再写一遍

1. /*手机端*/
   
2. @media (min-width: 480px) and (max-width: 767px) {
   
3.      div._01{
   
4.           ...
   
5.     }
   
6.     ...
   
7. }
   
8. 
   
9. /*平板电脑*/
   
10. @media (min-width: 768px) and (max-width: 979px) {
    
11.    div._01{
    
12.         ...
    
13.    }
    
14.    ...
    
15. }
    
16. 
    
17. /*PC端*/
    
18. @media (min-width: 980px) {
    
19.   div._01{
    
20.        ...
    
21.   }
    
22.   ...
    
23. }

复制代码

现在弹性布局，流式布局都还不错，使用栅格就不用每次都写死width了