CSS 媒体查询冲突：如何精准控制 991 像素断点样式？

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《CSS 媒体查询冲突：如何精准控制 991 像素断点样式？ 》，聊聊，希望可以帮助到正在努力赚钱的你。

CSS 媒体查询样式冲突解决方案

在宽度刚好等于 991 像素时，会出现媒体查询 min-width: 991px 和 max-width: 991px 部分样式同时生效的问题，导致样式混乱。理想情况下，应该有三种样式类型：

• 公共样式：任何时候都生效

• 媒体查询样式：根据屏幕宽度变化而修改样式，分为以下三类：

  • 大于 991 像素的样式
  • 小于 991 像素的样式
  • 等于 991 像素的样式

问题在于如何定义一个媒体断点，只让当前媒体查询样式和公共样式生效。以下解决方案可以解决此问题：

解决方案：

在媒体查询中，添加一个精确的值作为 последней 规则。

例如：

@media (width: 991px){
  /* 仅作用于 991px 宽的屏幕 */
}

到这里，我们也就讲完了《CSS 媒体查询冲突：如何精准控制 991 像素断点样式？ 》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！