Question

我的wordpress主题和我安装的插件相互冲突，迫使我做自己的CSS编码。在使用CSS和Chrome上的inspect元素工具进行操作后，我修复了我的网站thevandreasproject.com的响应性（不是真正修复，更像是黑客猜测..）。我使用此代码使其在iPhone 5屏幕上运行：

@media (min-width: 680px) {
    .home-background .textwidget {
        font-size: 50px;
        font-style: normal;
        font-weight: 500;
        letter-spacing: 8px;
        font-family: 'Roboto';
        min-height: 880px;
        padding-top: 20px;
    }   
}

@media (max-width: 679px) {
    .home-background .textwidget {
        padding-top: 20px;
        padding-bottom: 175px;
        font-style: normal;
        font-weight: 500;
        font-family: 'Roboto';
    }

.site-content {
    height: 0!important;
    }
#footer-banner {
    padding:50px;
    }
}

我想知道是否有人可以帮我弄清楚如何正确地为所有设备重新调整我的图像和文本，而不必为每个设备找出媒体查询。我很感激！

Answer 1

从可想象的最小屏幕尺寸开始，然后展开视口，直到它看起来像垃圾。放入断点。重复此过程，直到达到您想要容纳的最大屏幕尺寸。我认为Dave Rupert在某个地方说过。无论如何，简短的回答是不使用基于流行设备的媒体查询，而是根据您的内容。没有简单的答案。

使用视口进行响应而不是媒体查询

1 个答案: