你能帮我处理移动媒体查询吗？

Posted 2023-03-06

【中文标题】你能帮我处理移动媒体查询吗？

【英文标题】：Can you help me with mobile media queries?

【发布时间】：2019-12-11 07:33:46

【问题描述】：

我对平板电脑进行了媒体查询，但我似乎无法让它们在移动设备上工作。

平板电脑 @media(min-width:768px) 和 (max-width:1024px) 移动的 @media (min-width:480px) 和 (max-width:767px)

在我编写一些更改时在移动查询中它们不起作用。

【问题讨论】：

你的@media (max-width: 479px)在哪里？因为那将是移动媒体。

【参考方案1】：

您需要确保处理所有维度。你现在拥有它的方式是忽略任何小于 480 像素的尺寸。请参阅下面的一些基本介质尺寸。

/* XL */
@media (min-width: 1200px)  
    /* style */


/* Large */
@media (min-width: 768px) and (max-width: 979px)  
    /* style */


/* Medium */
@media (max-width: 767px)  
    /* style */


/* Small */
@media (max-width: 480px)  
    /* style */