使用视口作为响应而不是媒体查询 [英] Using viewport for responsiveness instead of media queries

问题描述

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

My wordpress theme and the plugins I have installed conflict with one another forcing me to do my own CSS coding. After toying around with CSS and the inspect element tool on chrome, I fixed the responsiveness (not really fixed, more like hacked I guess..) of my website thevandreasproject.com. I used this code to make it work on the iPhone 5 screen:

@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;
    }
}

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

I was wondering if anyone could help me figure out how to rescale my images and text correctly for ALL devices instead of having to figure out media queries for every device there is. I appreciate it!

推荐答案

从可以想象的最小屏幕开始，然后展开视口，直到看起来像垃圾。放置断点。重复此过程，直到达到要容纳的最大屏幕尺寸。我认为戴夫·鲁伯特在某个地方说。反正简短的答案是不使用基于流行的设备，而是基于您的内容的媒体查询。没有简单的答案。

Start with the smallest screen size imaginable then expand the viewport until it looks like crap. Put a breakpoint in. Repeat process until you reach largest screen size you want to accommodate. I think Dave Rupert said that somewhere. Anyways short answer is don't use media queries based on popular devices but instead based on your content. There is no easy answer.

这篇关于使用视口作为响应而不是媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！