求助一个wordpress博客自动适应手机终端的方法

Ruclinux

blink 发表于 2020-4-30 21:49
不应该啊，我在你网站上F12测试了的

没问题啊

我修改完后在手机上进行打开了，还是没变。

Ruclinux

blink 发表于 2020-4-30 21:49
不应该啊，我在你网站上F12测试了的

没问题啊

我的步骤是这样的，修改完css后，我将博客缓存和本地缓存先删除了，然后再手机上打开，但是却没有效果，太麻烦您了。

流河旱树

我这看是正常的 自适应了
你尝试手机上用隐身模式看看

Ruclinux

流河旱树 发表于 2020-4-30 22:10
我这看是正常的 自适应了
你尝试手机上用隐身模式看看

这是我另外一个自适应的博客，像这样的用手机打开就很正常。但正在修改的这个博客在同样的手机下面还是会排版错乱。麻烦并谢谢您了。

流河旱树

Ruclinux 发表于 2020-4-30 23:23
这是我另外一个自适应的博客，像这样的用手机打开就很正常。但正在修改的这个博客在同样的手机下面还是会 ...

我大致看了下 你这个是主题本身就没有任何自适应...
会复杂些, 我帮你简单设计了下页面(如下图)
假设手机的breakpoint是550px的话

1. @media only screen and (max-width: 550px) {
   
2. body {
   
3.         overflow-x: hidden;
   
4. }
   
5. 
   
6. #access .menu-header, div.menu, #colophon, #branding, #main, #wrapper {
   
7.     width: calc(95vw - 2em);
   
8. }
   
9. 
   
10. #branding img {
    
11.     width: 100%;
    
12.     object-fit: cover;
    
13. }
    
14. 
    
15. #access {
    
16.     display: flex;
    
17.     width: 100%;
    
18. }
    
19. 
    
20. #container {
    
21.     width: 100%;
    
22. }
    
23. 
    
24. .format-gallery .gallery-thumb, .category-gallery .gallery-thumb {
    
25.     float: none;
    
26.     display: flex;
    
27.     justify-content: center;
    
28. }
    
29. 
    
30. #content {
    
31.         margin: 0;
    
32. }
    
33. 
    
34. #main {
    
35.     display: flex;
    
36.     flex-direction: column;
    
37. }
    
38. 
    
39. #content, #content input, #content textarea {
    
40.     width: 100%;
    
41. }
    
42. 
    
43. #primary, #secondary {
    
44.     width: 100%;
    
45. }
    
46. }

复制代码

Ruclinux

流河旱树 发表于 2020-5-1 09:47
我大致看了下 你这个是主题本身就没有任何自适应...
会复杂些, 我帮你简单设计了下页面(如下图)
假设手机 ...

谢谢您了，有内地朋友要来海南，我要接待，这事只能迟点再调试了，谢谢了