CSS小屏幕问题 [英] CSS small screen issue

问题描述

我的查询是关于我的wordpress网站womensfertility n激素。 com
如果我在分辨率为1024 x 768
的较小屏幕上查看网站，网站将如下所示：

My query was about my wordpress site womensfertility n hormones. c o m if I view the site on a smaller screen with resolution like 1024 x 768 the site would look like this:

但如果我在我的正常电脑屏幕大分辨率看起来不错，
那么如果我缩放到iphone和ipad它会缩放正常，因为它是响应。我使用optimizepress。我刚刚添加了一个代码，使网站框布局，并有一个背景图像，而不是全宽。我添加的代码是：

but if I view it on my normal computer screen with big resolution it looks good, then if I scale it to iphone and ipad it would scale normal as it is responsive. I'm using optimizepress. I've just added a code to make the site boxed layout and to have a background image instead of full width. my code that I've added was:

.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％ code>和 .banner .logo img {width：200px; } 使网站看起来像这样，但我不知道如何使网站看起来像盒装没有这样的代码。任何想法？

I guess the width: 75%; and the .banner .logo img { width: 200px; } makes the site looks that way, but I have no idea how to make the site look like boxed without doing that code. Any idea?

推荐答案

使用 CSS媒体查询

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

}

这篇关于CSS小屏幕问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！