css – 媒体查询中“不”运算符的问题

2023年6月13日 238次阅读

我正在开发一个响应式网站,我的客户希望某些样式以768px应用于桌面,但不适用于该大小的平板电脑.我尝试了多个媒体查询,但我只能让Firefox合作. Chrome,Safari和IE都忽略了媒体查询.这是我试过的.

 @media only screen and (min-width: 768px), not (min-device-width: 768px) and (max-device-width: 1024px) {
    /* styles for desktop only here */
 }

我认为这与“非”操作符有关,但我没有看到我做错了什么.还值得一提的是,ipad(在我的模拟器中)忽略了媒体查询,这正是我想要的.我只是无法在桌面上安装Chrome,Safari和IE来阅读这些东西.

最佳答案 用逗号分隔的每个媒体查询字符串应该是完全形成的(我不知道在规范中有什么东西从一个到另一个延续……虽然有些浏览器可能支持“快捷方式”,但谨慎地坚持最小共同点：规范). (除此之外,这使得测试更容易,因为简单的文本模块允许您一次测试一个媒体查询.)当然,“仅”和“不”是互斥的选项.所以我认为语法应该是

@media only screen and (min-width: 768px), not screen and (min-device-width: 768px) and (max-device-width: 1024px) {

(xxx-device-width：和xxx-width：[包含或排除“-device”]分别指代屏幕宽度和视口/布局宽度[对于“桌面”设备通常是相同的,对于大多数如果指定了< meta name =“viewport”content =“width = device-width”>手持设备,但对于没有页面HTML源中的“视口”规范的智能手机可能不一样.我通常不会在单个Media Query语句中看到两者的混合,所以[尽管我还没有尝试详细了解这个例子]我怀疑某些事情有点不对劲.)

点赞