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

Posted 2023-03-06

【中文标题】使用视口进行响应而不是媒体查询

【英文标题】：Using viewport for responsiveness instead of media queries

【发布时间】：2016-02-15 16:19:46

【问题描述】：

我的 wordpress 主题和我安装的插件相互冲突，迫使我自己编写 CSS 编码。在玩弄了 CSS 和 chrome 上的检查元素工具之后，我修复了我的网站 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;
    

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

【问题讨论】：

是的谷歌响应式设计，基本上你可以使用 % widths/heights/margins 或 vw，例如width: 100vw; 应该是屏幕的宽度。文本保持 px，否则在小屏幕上会变得太小。但是在大多数情况下，如果您切换到 %.我使用mobiletest.me 来获得不同的屏幕尺寸，但基本上媒体查询是 400、600、800 和 1000。它在 90% 的情况下都能正常工作。但是请阅读它，您需要为父容器定义高度，以使 % height 按预期工作等

谢谢。您介意指出是什么导致网站没有响应吗？另外，为什么和我有同样问题的人（见下面的链接）不必像我一样去解决问题？ siteorigin.com/thread/…

我想将 px 视为像 cm 一样的度量，20px 始终是相同的大小。但是，屏幕大小的 20% 会缩放（确保您的视口声明正确）并且始终保持屏幕大小的 20%。等

【参考方案1】：

从可以想象的最小屏幕尺寸开始，然后扩大视口，直到看起来像垃圾。放一个断点。重复这个过程，直到你达到你想要容纳的最大屏幕尺寸。我认为戴夫鲁珀特在某处说过。无论如何，简短的回答是不要使用基于流行设备的媒体查询，而是基于您的内容。没有简单的答案。

【讨论】：

谢谢。您介意指出是什么导致网站没有响应吗？另外，为什么和我有同样问题的人（见下面的链接）不必像我一样去解决问题？ siteorigin.com/thread/…