如何正确使用媒体查询（css）？

Question

您好，我已经在网站上工作了一会儿。 （我是html / css的新手）我准备发布但我的网站在较小的屏幕分辨率上看起来很糟糕，而且我一直很难学习媒体查询和实现它们。假设我想用它来使div标签在1024 X 768中间缩小50％，我将应用哪些不同的atrributes以及我将使用什么媒体查询？我非常感谢你的帮助

Answer 1

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

假设您的div通常为100%。如果是960px。制作width: 480px等

这可能是你想要的。您还可以指定height，aspect-ratio，orientation和其他人，但max-width可以完成很多工作而不会过于具体。如果你想深入挖掘，那么这是spec。

这是一个有效的example。