如何正確使用媒體查詢（css）？

Question

嗨我一直在一個網站上工作了一會兒。 （我是html/css的新手）我即將發佈，但我的網站在較小的屏幕分辨率上看起來很殘酷，我一直很難學習媒體查詢並實施它們。假設我想用它在1024 X 768處將div標籤中間縮小50％，我將不得不應用哪些不同的複合件以及我將使用哪些媒體查詢？我真的很感謝你的幫助

Answer 1

@media screen and (max-width: 1024px){ 
    div { width: 50%;} 
} 

假設你div通常100%。如果它是960px。使width: 480px等

這可能是你想要的。您也可以指定height，aspect-ratio,orientation等，但max-width完成了很多而沒有太具體。如果你想深入挖掘，這裏是spec。

這是一個工作example。