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

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

我在想，如果有人可以帮助我弄清楚如何正确地重新调整我的图像和文本的所有设备，而不必弄清楚媒体查询对于每个设备都有。我很感激！

来源

2015-11-14 Sam

是的谷歌响应式设计，基本上你可以使用％宽度/高度/边距或VW，例如， 'width：100vw;'应该是屏幕的宽度。用文字保留px，否则在小屏幕上显示得太小。但是在大多数情况下，如果切换到％，则您应该为所有带有少量规则的设备进行4/5媒体查询。我使用http://mobiletest.me/获取不同的屏幕尺寸，但基本上媒体查询为400,600,800和1000.它在90％的时间内都能很好地工作。但请仔细阅读，您需要为父容器定义高度，以便按预期工作等。 – David

谢谢。你介意指出是什么让网站不响应？另外，为什么没有和我一样问题的人（见下面的链接）不得不按照我的方式去解决问题？ https://siteorigin.com/thread/page-builder-background-image-wont-rescale-for-mobile-devices/ – Sam

我认为像px一样测量像cm，20px总是相同的大小。但是，屏幕尺寸的20％将会缩放（确保您的视口语句正确）并始终保持20％的屏幕尺寸。等等。 – David

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

来源

2015-11-14 03:14:17 cijanzen

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

回答

相关问题