本帖最后由 流河旱树 于 2020-5-1 10:01 编辑
我大致看了下 你这个是主题本身就没有任何自适应...
会复杂些, 我帮你简单设计了下页面(如下图)
假设手机的breakpoint是550px的话
- @media only screen and (max-width: 550px) {
- body {
- overflow-x: hidden;
- }
- #access .menu-header, div.menu, #colophon, #branding, #main, #wrapper {
- width: calc(95vw - 2em);
- }
- #branding img {
- width: 100%;
- object-fit: cover;
- }
- #access {
- display: flex;
- width: 100%;
- }
- #container {
- width: 100%;
- }
- .format-gallery .gallery-thumb, .category-gallery .gallery-thumb {
- float: none;
- display: flex;
- justify-content: center;
- }
- #content {
- margin: 0;
- }
- #main {
- display: flex;
- flex-direction: column;
- }
- #content, #content input, #content textarea {
- width: 100%;
- }
- #primary, #secondary {
- width: 100%;
- }
- }
复制代码
|