媒体查询(max-width: 991px)在991px下不工作
媒体查询是一种CSS技术，用于根据设备的特定属性（如屏幕宽度）来应用不同的样式。其中，max-width: 991px是一个媒体查询的条件，表示当屏幕宽度小于等于991像素时，应用该样式。
媒体查询的主要作用是响应式设计，使网页能够适应不同尺寸的设备，提供更好的用户体验。通过使用媒体查询，开发人员可以根据设备的屏幕宽度、高度、方向等属性，为不同的设备提供不同的布局和样式。
在991像素以下，媒体查询可能不起作用的原因有以下几种可能性：
- CSS规则错误：请确保媒体查询的语法正确，包括正确的选择器和条件。检查是否有拼写错误或缺少必要的符号。
- 媒体查询位置错误：请确保媒体查询的位置正确。媒体查询应该在其他样式规则之前，以确保其优先级正确。
- 其他样式规则的优先级高：如果在媒体查询之后有其他具有更高优先级的样式规则，那么这些规则可能会覆盖媒体查询的样式。请检查其他样式规则，并确保它们的优先级正确。
- 设备不支持媒体查询：某些旧版本的浏览器可能不支持媒体查询，或者可能存在一些兼容性问题。在这种情况下，可以考虑使用JavaScript等其他技术来实现响应式设计。
对于解决媒体查询在991像素以下不工作的问题，可以尝试以下方法：
- 检查媒体查询的语法和位置，确保没有错误。
- 检查其他样式规则，确保没有更高优先级的规则覆盖了媒体查询的样式。
- 确保使用的浏览器支持媒体查询。
如果以上方法都没有解决问题，可以尝试使用JavaScript或其他前端框架来实现响应式设计，以替代媒体查询的功能。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎 TKE：https://cloud.tencent.com/product/tke
- 人工智能平台 AI Lab：https://cloud.tencent.com/product/ai
- 物联网平台 IoT Hub：https://cloud.tencent.com/product/iothub
- 移动开发平台 MSDK：https://cloud.tencent.com/product/msdk
- 云存储 COS：https://cloud.tencent.com/product/cos
- 区块链服务 BaaS：https://cloud.tencent.com/product/baas
- 腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe
相关·内容
我的media.css文件中有以下规则： .menu nav { display: none; }.menu nav ul li { border-top: 1px solid #fff;}
浏览 2提问于2018-02-13得票数 7
回答已采纳
1回答
这是一个响应页面在lg，md，sm屏幕大小。蓝色方框只关闭几个像素，并在屏幕大小变化时移动。为什么他们不能在绿色的盒子里完美地对齐？蓝色和绿色的盒子都是ps。
浏览 1提问于2016-04-23得票数 0
回答已采纳
3回答
CSS固定位置和媒体查询
、、、、
我有一个问题的媒体查询和侧栏div与一个固定的位置。基本上，当视区变得太窄时，主要内容会移到左侧，然后位于侧边栏的下方。我尝试使用媒体查询将位置设置为静态，但它不能按照我想要的方式工作/看起来。这是最初的小提琴： #sidebar { }这是一个静态位置的例子：
@media(max-width: 991px
浏览 0提问于2013-11-29得票数 0
5回答
我为项目列表创建了一个媒体查询，以便针对不同的屏幕宽度进行不同的对齐。但我似乎无法让我的媒体查询运行。17px;}
margin-left:40%;.a-checkpoint-list > ul {
margin-left: 15% !
浏览 5提问于2016-03-21得票数 0
回答已采纳
我在SASS中的嵌套媒体查询以意外的方式编译，我不知道为什么。在相同的SASS文件中，我使用类似方式嵌套的媒体查询，这些查询可以正确编译。我使用3.2.19 sass宝石和4.0.5 sass-rails宝石。当然，我可以重写这段代码并使其正常工作，但是我想问你们中是否有人知道什么可能会导致这个奇怪的错误？
编辑:我测试了其他一些东西，因为这个bug重新出现在一个完全不同的“新鲜”文件中。当我在嵌套媒体查询
浏览 1提问于2015-10-19得票数 2
2回答
在正常视图中，一切都很好，但当我调整窗口大小时，它显示如下所示。
注意:什么是媒体查询？我必须写3种不同大小的css吗？
浏览 0提问于2015-08-27得票数 0
2回答
我从一家机构收到了移动导航的一些模板，并看到他们对同一个断点(本例中为991 in )有不同的媒体查询，如下所示。通常，我只使用第三个选项编码，该选项只指定最大宽度而不指定方向。这样做有什么意义吗，，尤其是当我并排比较时，注意到他们的第一次和第二次媒体查询几乎没有什么区别。我应该把这三者结合起来吗？@media (max-width:991px) and (orientation:portrait) {}
@media (max-width:991px
浏览 8提问于2020-10-14得票数 0
回答已采纳
2回答
你好，我有一个关于媒体查询特定宽度而不是其他宽度的问题。@media (max-width:769px) and (min-width:768px) {}@media (max-width:769px) and (min-width:768px) {
浏览 0提问于2016-08-12得票数 1
1回答
我在“悬停”菜单元素下面使用了边框，所以当您在菜单项上悬停时，会产生一条出现在菜单项下面的线条的效果。但我的菜单折叠版有几个问题。
1)在我的垂直折叠菜单中，边框不会消失。看起来很可笑。( 2)锂元素在药片上看上去很糟糕。它们仍然在行中出现，它们在页面的左角(这是一个在我的代码链接中看不到的图像)上撞上了徽标。
浏览 1提问于2015-08-08得票数 4
回答已采纳
Bootstrap 3在响应式实用程序中有很好的CSS类，允许我根据屏幕分辨率隐藏或显示一些块。我该怎么做呢？
浏览 62提问于2014-01-12得票数 55
回答已采纳
我目前有一个引导导航，将显示移动导航汉堡768 at，但链接不显示在垂直列表中，直到767 at。我需要让导航显示的链接，在移动肖像和ipad肖像相同。right; @include breakpoint(smmax) { } .nav>li { display: block;
floa
浏览 1提问于2017-01-23得票数 0
我正在使用一个简单的代码，991的媒体查询不能正常工作，就像991px不是包含的，这不应该是这样的，这是我的代码，有什么帮助吗？ background-color: blue; } @media screen and (max-width: 991px) { background-color: olive;
color: w
浏览 1提问于2020-09-17得票数 0
我试图应用一个@media查询，因此当将最大宽度reach 991px a padding-left添加到类中时，但是当max-width reach 991px和页面的主页面开始在aside下面包装时，什么都不会发生，我使用的是引导程序，下面是代码的一部分：@media(max-width : 991px) { padding-left: 47pxsubtitle">design the fut
浏览 0提问于2014-12-30得票数 0
回答已采纳
我正在为一个网站的媒体查询工作。我已经完成了几乎95%的工作，没有任何问题。
你们能帮我解决哪里出了问题吗？
浏览 1提问于2018-08-04得票数 1
2回答
我已经编写了一个响应网站，在其中我有CSS媒体查询，以检测屏幕大小(像素)的设备，用户正在导航。@media (max-width: 1199px){} /*code*/@media (max-width: 767px){}
当我用手机测试我的网站时，我的网站显示了移动版本，在这
浏览 2提问于2014-09-26得票数 0
回答已采纳
1回答
媒体查询(减)
、、
我对媒体查询有点陌生，而且我正在努力找出一些可能在业界共享的最佳实践，这些做法也可能具有技术上的优势。关于较少的语法，我注意到一件事是，您可以在媒体查询中包装一个元素，也可以在元素中包装媒体查询。示例： @media(max-width: 991px){ margin-bottom: -350px;padding: 0 0 35
浏览 0提问于2014-01-19得票数 0
回答已采纳
1回答
我是新来的引导，我有一个困难的时间设置我的媒体查询与正确的断点，我觉得我的网站没有适当的缩放。当我设置@media(最小宽度:1200 My )时，我的站点看起来很完美。
浏览 0提问于2015-11-03得票数 1
回答已采纳
我将引导3用于导航，在媒体查询991px中，导航设置为对齐中心。block;}
display: inline-block;}
但问题是，当它到达媒体查询
浏览 4提问于2017-05-15得票数 0
回答已采纳
2回答
我正在为一个网页编写一个媒体查询，并设法为768及以下的页面编写媒体查询。但是它不能正常工作。我创建的网页适用于768px及以上，但不适用于768px以下的媒体查询 .navbar-brandmin-width: 768px){ margin-left: 100px;
浏览 0提问于2018-07-22得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
