我有一个使用“卡片” View 的网站。在桌面上查看时，我将卡片的 CSS 设置为:
width: 75%
margin: auto
我这样做是为了让“卡片”不会占据整个宽度，这在桌面上看起来更漂亮:
但我想弄清楚的是，当屏幕尺寸变为移动较小的屏幕时，如何自动关闭宽度和边距。出于显而易见的原因，我希望卡片在移动 View 中的宽度为 100%。如何根据窗口宽度更改 CSS？
最佳答案
这是一个标准的引导媒体查询。确保你把这个元标签放在头上
<meta name="viewport" content="width=device-width, initial-scale=1.0">
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
}
关于html - 基于宽度的不同 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35546721/