css 媒体查询大小 |css 卡片 拖拽

要正确使用媒体查询，您需要了解不同的屏幕尺寸和媒体查询语法。通常，您将使用以下媒体查询尺寸：

/* Extra small devices (phones) */
@media only screen and (max-width: 600px) {...}
/* Small devices (tablets) */
@media only screen and (min-width: 600px) {...}
/* Medium devices (desktops) */
@media only screen and (min-width: 992px) {...}
/* Large devices (laptops/desktops) */
@media only screen and (min-width: 1200px) {...}

这些是最常用的媒体查询尺寸，但您也可以使用其他尺寸进行适应不同设备的网站。要使用更大或更小的屏幕尺寸，请更改“max-width”和“min-width”属性。

媒体查询不仅可以帮助您为不同的屏幕尺寸设计网站，还可以帮助您在不同的媒体类型上显示网站。例如，您可以使用以下媒体查询语法来为打印机和屏幕显示不同的样式：

/* Screen styles */
@media only screen {...}
/* Print styles */
@media print {...}

使用媒体查询可以使您的网站更加适用于不同的设备、屏幕和媒体类型。了解媒体查询的不同尺寸和语法将有助于您为您的网站设计出最佳的用户体验。