CSS小屏幕问题

Question

我的查询是关于我的wordpress网站womensfertility n hormones。 c o m 如果我在较小的屏幕上查看网站，分辨率如1024 x 768 该网站将如下所示：

但如果我在普通电脑屏幕上以高分辨率查看它看起来不错， 然后，如果我将它缩放到iphone和ipad，它会响应正常。我正在使用optimizepress。我刚刚添加了一个代码，使网站装箱布局，并有一个背景图像，而不是全宽。我添加的代码是：

.banner .logo img{width:200px}

.banner.centered-banner > .fixed-width .banner-logo {
       width: 100%;
}

.container {
   margin: auto;
   overflow: hidden;
   padding: 0;
   position: relative;
  width: 75%;
}

我想width: 75%;和.banner .logo img { width: 200px; }会使网站看起来那样，但我不知道如何在不执行该代码的情况下使网站看起来像盒装。有什么想法吗？

Answer 1

使用CSS Media Queries

@media (max-width: 600px) {
  /*code for screen with max with 600px*/
}

@media (max-width: 480px) {
  /*code for screen with max with 480px*/
}

或

body { color: white; background: gray; font-size: .5in }

@media screen and (min-width: 1024px){
    body { background: red; }
}

@media screen and (min-width: 641px) and (max-width: 1023px){
    body { background: yellow; }
}

@media screen and (max-width: 640px){
    body { background: green; }
}

例如：

@media (max-width: 480px) {

    .banner .logo img{width:140px}

    .banner.centered-banner > .fixed-width .banner-logo {
           width: 80%;
    }

    .container {
      width: 35%;
    }

}