如何根據屏幕寬度調整邊距？

我有這個HTML和CSS代碼的網頁。我正在努力使網站適合移動設備，並根據所查看的屏幕大小調整自身。我希望在像智能手機這樣的狹窄屏幕上觀看時，邊緣變得非常小，並且當屏幕更大並且邊緣變得越來越大時，會逐漸重新調整，直到它成爲全屏幕的臺式計算機。但是，這段代碼並不真正起作用。（我沒有包括所有這些代碼的其它CSS部分，但如果需要的話，請提出要求！）如何根據屏幕寬度調整邊距？

我嘗試調整頁邊距，由於屏幕的寬度：

 @media (max-width: 1100px, min-width: 800px) { 
      body { 
       margin-right: 20px; 
       margin-left: 20px; 
      } 

     @media (max-width: 750px, min-width: 501) { 
      body { 
       margin-right: 5vw; 
       margin-left: 5vw; 
      } 
     } 
     @media (max-width: 500px) { 
      body { 
       margin-right: 2vw; 
       margin-left: 2vw; 
      } 
     } 
    </style> 
</head> 
<body> 
    <header> 

     <h1>Blog</h1> 
     <ul> <!-- Menu Tabs --> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Art</a></li> 
      <li><a href="#">Music</a></li> 
     </ul> 
    </header> 
</body>

謝謝，我真的很感謝你的幫助！

來源

2016-07-03 user6544696

運行你的CSS雖然CSS語法檢查器或棉短絨。 –

您在第一次媒體查詢時丟失了一個右大括號。此外，您的媒體查詢中還有一些額外的部分使其無效。媒體查詢的工作方式使您試圖增加不必要的min-width部分。以下代碼在大屏幕上創建了一個20px左/右邊距。當750px的門檻被擊中，5vw踢，等等。

/* Invalid: 
    @media (max-width: 1100px, min-width: 800px) 
*/ 

@media (max-width: 1100px) { 
    body { 
    margin-right: 20px; 
    margin-left: 20px; 
    } 
} 

@media (max-width: 750px) { 
    body { 
    margin-right: 5vw; 
    margin-left: 5vw; 
    } 
} 

@media (max-width: 500px) { 
    body { 
    margin-right: 2vw; 
    margin-left: 2vw; 
    } 
}

如果你的目的是用默認20px左/右緣開始，對屏幕比1100px更大，你可以創建你的CSS將通過媒體查詢規則來覆蓋默認的保證金。然後，您可以在較窄的屏幕尺寸下開始媒體查詢。

/* default size */ 
body { 
    margin-left: 20px; 
    margin-rights: 20px; 
} 

@media (max-width: 750px) { 
    body { 
    margin-right: 5vw; 
    margin-left: 5vw; 
    } 
} 

@media (max-width: 500px) { 
    body { 
    margin-right: 2vw; 
    margin-left: 2vw; 
    } 
}

https://jsfiddle.net/5vez3rdc/

來源

2016-07-03 19:23:29

你改變了什麼？ –

我刪除了'，min-width'位，因爲它們是無關的。 –

他們有什麼問題，如果他出於某種原因想保留他們，他應該如何解決這些問題？ –

如何根據屏幕寬度調整邊距？

回答

相關問題