CSS小屏幕問題

Question

我的查詢是關於我的WordPress的網站womensfertility n激素。 COM 如果我認爲一個小屏幕上的網站中包含1024×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%; 
    } 

}