开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

媒体查询(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

相关搜索:媒体查询在bootstrap移动模式下不工作如何使用Stylelint防止在媒体查询中使用"max-width“媒体查询在iPad上不能完全工作媒体查询在错误的屏幕尺寸上工作为什么媒体查询在支架上停止工作？无法使媒体查询在移动设备上正常工作 Css媒体查询在chrome和safari中不能正常工作如何让下面的媒体查询在480px下工作？我可以让这个媒体查询在我的javascript中工作吗？媒体查询(最小宽度: 1800px)无法在1800px下工作？我似乎不能让我的媒体查询在响应式网站上工作为什么我的媒体查询即使在成功响应测试后也不能正常工作？媒体查询在chrome和Firefox桌面中工作，但在移动设备中不起作用为什么在devtools“切换设备工具栏”模式下工作的媒体查询在Chrome浏览器中不能工作？为什么我的查询在没有等待的情况下不能工作？如何修复'query.orderBy‘不是一个函数？媒体查询在opera迷你浏览器上不起作用，但在firefox和chrome浏览器上工作正常 CSS媒体查询在chrome和Mozilla中未按预期在特定范围内工作，并且未在其他浏览器中进行测试为什么我的CSS只能工作在546px以上(使div居中)，即使媒体查询被编程来处理这一点？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Bootstrap 响应式框架第一集

Query的技术来判断设备的尺寸 - 最重要 ex: 1、设备的宽度 w <= 767px 背景色红色 2、设备的宽度768px<=w<=991px...背景色绿色 3、设备的宽度w>=992px 背景色为粉色 5、CSS3 Media Query CSS3 媒体查询技术作用：可以根据不同的媒体类型以及特性去执行不同的...的规则进行声明 @media MEDIA-TYPE and (MEDIA-FEATURE) and (MEDIA-FEATURE) MEDIA-TYPE : 媒体类型...(PC,PAD,PHONE)下,宽度在768~991之间，将body的背景改为绿色 @media screen and (min-width:768px) and (max-width...:991px){ body{ background:green;

1.2K5 0

HTML+CSS实现响应式布局页面，响应式布局入门教程

响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。在移动互联网高度发达的今天，我们在桌面浏览器上开发的网页已经无法满足在移动设备上查看的需求。...响应式开发的原理是使用CSS3中的Media Query（媒体查询）针对不同宽度的设备设置不同的布局和样式，从而适配不同的设备。...CSS3 @media 查询定义和使用: 使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。...CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。...: 500px; margin-left: 50px; } /*屏幕宽度小于991px,改变布局和样式*/ @media screen and (max-width:991px) { header

14.5K5 0

JustNews主题显示友链图标教程

justify; width: 9.5%; border: 4px solid #f1f1f1; margin: 2px; background:#f1f1f1; } @media (max-width...: 1240px){ .list-links .links { width: 32.2%; } } @media (max-width: 991px){ .list-links .links...normal; text-overflow: ellipsis; overflow: hidden; line-height: inherit; margin:0; } 最终的效果，可以在本站首页页脚查看...任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

7221 0

JS:用rem来做响应式开发

2.媒体查询：这个是css3中给出的，我们要解决的问题是适应手机屏幕，这个媒体查询正是为解决这个问题而生，媒体查询的功能就是为不同的媒体设置不同的css样式，这里的“媒体”包括页面尺寸，设备屏幕尺寸等...，最常用的形式 phone:@media screen and (max-width：767px) {/手机中样式/} pad：@media screen and (max-width：991px)and...（你还可以设置更多节点）用媒体查询的话要保证每个像素下都有对应的适配效果显然你要设置更小的宽度范围； 3.还有就是css3的单位rem： rem就是将根节点html的font-size的值作为整个页面的基准尺寸...那就要用到js在页面加载时获取window的宽度（浏览器窗口的宽度）$(window).width();在开发手机页面的时候，一般我们设置最大宽度为640px，因为640px可以保证在至今最宽的手机上显示时网页两端刚好贴合屏幕...3 css html{font-size: 20px;} .container{ max-width

6.1K1 0

移动前端兼容操作总结

手机设备屏幕尺寸不一，做移动端的Web页面，需要考虑在安卓/IOS的各种尺寸设备上的兼容，这里总结的是针对移动端设备的页面，设计与前端实现怎样做能更好地适配不同屏幕宽度的移动设备。...最主流的方法就是在服务端/客户端查询这个字段: //检测是否是移动端 function checkMobile() { if (!...Phone)/i))) { alert("请在移动端查看（或者开发者模式）"); } } JS: 判断window和screen 屏幕可用工作区高度..."phone" : "laptop"; CSS: @媒体查询通过查询屏幕宽度判断手机,只局限于css样式; 特点是,媒体查询动态更新,非常方便,而且不仅适应屏幕大小,还动态兼容窗口尺寸的改变: @CHARSET..."UTF-8";@media (max-width: 991px) { /*do something*/}@media (min-width: 1601px) { /*do something

1K3 0

CSS网页布局框架设计指南

为了实现响应式网站，我们需要使用媒体查询。...宽度以下屏幕上将.col-md-4类更改为.col-xs-6类 */ @media only screen and (max-width: 991px) { .col-md-4 { width...，我们定义了三个媒体查询。...第一个媒体查询在768px宽度以下的屏幕上隐藏了具有 .slide 类的元素。第二个媒体查询将 .container-fluid 类更改为 .container 类以适应小屏幕并增加外边距和内边距。...第三个媒体查询更改了 .col-md-4 类为 .col-xs-6 类以适应小屏幕，并使图片在小屏幕上缩小。其他设计考虑因素除了上述提到的设计指南外，还有一些其他的设计考虑因素。

2571 0

hexo优化bilibili显示

以butterfly主题为例子：在source/css/_ global/function.styl下底部添加以下css代码： .bilibili{ position: relative; ...@media可以查询到设备的以下属性设备屏幕的高度设备的方向（如移动设备横屏）可视窗口的宽高屏幕解析度...和上面一样，在指定位置插入css代码： .bilibili { position: relative; width: 100%; } @media only screen and (max-width...and (max-width: 991px) { .bilibili {height: 20em;max-width: 30em;} } @media only screen and (min-width...: 992px) and (max-width: 1199px) { .bilibili {height: 30em;max-width: 40em;} } @media only screen

2761 0

Bootstrap 响应式框架第二集

2、尺寸尽量使用相对尺寸 1、文字尺寸：em ，rem 2、容器尺寸：%,auto 3、图片尺寸：%,auto (max-width...media MEDIA-TYPE and (MEDIA-FEATURE) w <= 767px : PHONE 768px 5、引入两个兼容性 JS 文件作用：让老版本的IE(IE8及以下) 支持 H5的新标记以及 C3 媒体查询技术...src="js/html5shiv.min.js"> 2、respond.min.js 第三方JS，自调函数，用于让老版本的IE支持CSS3媒体查询技术...992px <= w <= 1199px 普通PC机显示器 3、小型屏幕(sm [small]) 768px <= w <= 991px

2.6K3 0

获取Bilibili视频直链并挂载至网站

前言这几天一直在写一些小教程，文字觉得太枯燥了，配上图片有时候不全面，于是只能录教程视频了，可是一录视频就是几分钟几百兆的视频，压缩后空间也极大，贫穷的我只能借助Bilibili视频网站了。...网站添加CSS /*视频挂载*/ .iframe_video { position: relative; width: 100%; } @media only screen and (max-width...{ .iframe_video { height: 15em; } } @media only screen and (min-width: 768px) and (max-width...: 991px) { .iframe_video { height: 20em; } } @media only screen and (min-width: 992px...) and (max-width: 1199px) { .iframe_video { height: 30em; } } @media only screen and

10.1K4 0

Django响应式图像库django-pictures

响应式设计是指网页在不同尺寸的设备上都有良好的显示效果。响应式设计的网页图像，就是响应式图像。 django-pictures是使用现代代码（如 AVIF 和 WebP）的响应式跨浏览器图像库。...纵横比指定为带斜杠的字符串在宽度和高度之间。例如16/9，将图像裁剪为16：9。...容器宽度：容器通常用于限制布局的最大宽度，在更大的屏幕上提高可读性。默认为1200px，可以通过PICTURES["CONTAINER_WIDTH"]设置覆盖此设置。...1/100w.webp", "200": "…" } }, "media": "(min-width: 0px) and (max-width...: 991px) 100vw, (min-width: 992px) and (max-width: 1199px) 33vw, 25vw" } } } } 注意：仅当指定了断点时

520 0

Bootstrap实用手册

MEDIA-FEATUER:媒体特性 ①. width ：指定浏览器窗口宽度大小 ②. min-width ：指定浏览器窗口宽度最小值 ③. max-width ：指定浏览器窗口宽度最大值 A....在屏幕下，宽度在 767 以内，执行操作 @media screen and (max-width:767px){} B....在屏幕下，宽度在 768~991 之间，执行操作 @media screen and (min-width:768px) and (max-width:991px){} C....IE(IE8 及以下)支持 HTML5 新标记 header、footer、aside ②. respond.min.js，第三方的 JS，自调函数，用于让老 IE(IE8 及以下)支持 CSS3 媒体查询技术...指定列在特定屏幕下不显示 A. .hidden-lg : 在 lg 下隐藏 B. .hidden-md : 在 md 下隐藏 C. .hidden-sm : 在 sm 下隐藏 D. .hidden-xs

5.9K2 0

使用 HTML、CSS 和 JavaScript 创建下拉菜单

我们的目标是展示一个时尚、多功能的下拉菜单，能够在不同的屏幕尺寸下无缝适配，提升用户体验，而无需繁琐的教程。...概述：在这个项目展示中，我们将深入介绍如何创建一个不仅外观吸引人，而且在各种设备上都能正常工作的下拉菜单。...0.21rem);}.icon.active::after { transform: rotate(45deg) translate(-0.21rem, -0.21rem);}@media (max-width...: 991px){ .toggle-btn{ display: block; } .menu{ width:100%; position:absolute

4711 0

安全文件管理器 Wordpress 插件 V 2.9.3 - 远程代码执行

安全文件管理器 0day 描述：在安全文件管理器 Wordpress 插件 V 2.9.3 和可能之前，经过身份验证的用户可以通过更改内容类型并将 .php 重命名为扩展名为 .phtml 来上传 php...#bcbcbc;\n }\n\n #shell {\n background: #222;\n max-width...: 991px) {\n #shell-logo {\n font-size: 6px;\n margin...#shell {\n height: 100%;\n width: 100%;\n max-width...shell {\n margin-top: 0;\n }\n }\n\n @media (max-width

3242 0

前端响应式布局为什么是个坑？

媒体查询：Media Queries，是响应式布局的核心，浏览器会根据条件选择需要渲染的html和css内容。...超小屏幕手机 (<768px) 小屏幕平板 (≥768px) 中等屏幕桌面显示器 (≥992px) 大屏幕大桌面显示器 (≥1200px) 媒体查询有两种引入方式：内部引入和外部引入。...，媒体查询代码放到最后。...写媒体查询的时候要按照屏幕从小到大的设置。外层包裹的元素宽度处理要使用百分比。图片缩放处理的时候容易失真，所以尝试给图片添加最大最小的宽度。...bootstrap框架用的就是媒体查询原理，我们做响应式布局的时候，基本都会借用bootstrap框架提高工作效率。四、响应式优缺点 4.1、优点：面对不同分辨率设备灵活性强。

1.7K1 0

Web前端之响应式 Gulp 中文网

方法本次实验主要应用了CSS3中的多媒体查询语句（@media），多媒体查询可以在指定的设备上使用对应的样式替代原有的样式。试题中使用到的css属性：！...可以覆盖父级的样式,优先显示 display：none 表示此元素不会被显示 position: absolute 生成绝对定位的元素，相对于定位以外的第一个父元素进行定位实验结果与讨论前期准备工作.../* CSS3的多媒体查询 */ @media screen and (max-width:1400px) { nav .content, main.clear section, main.clear...important; } } 2.3 宽度 max-width 为 650px 时，头部导航隐藏，并在右侧显示图标，底部列表的宽度为 100%。...position: absolute; top: 13px; right: 10px; } } 结语本次实验解决的问题为Web蓝桥杯线上模拟赛：响应式Gulp中文网,运用技术Css3中的@media（多媒体查询

2K2 0

前端响应式布局为什么是个坑？

媒体查询：Media Queries，是响应式布局的核心，浏览器会根据条件选择需要渲染的html和css内容。...超小屏幕手机 (<768px) 小屏幕平板 (≥768px) 中等屏幕桌面显示器 (≥992px) 大屏幕大桌面显示器 (≥1200px) 媒体查询有两种引入方式：内部引入和外部引入。...，媒体查询代码放到最后。...写媒体查询的时候要按照屏幕从小到大的设置。外层包裹的元素宽度处理要使用百分比。图片缩放处理的时候容易失真，所以尝试给图片添加最大最小的宽度。...bootstrap框架用的就是媒体查询原理，我们做响应式布局的时候，基本都会借用bootstrap框架提高工作效率。四、响应式优缺点 4.1、优点：面对不同分辨率设备灵活性强。

9252 0

前端响应式布局为什么是个坑？

媒体查询：Media Queries，是响应式布局的核心，浏览器会根据条件选择需要渲染的html和css内容。...超小屏幕手机 (<768px) 小屏幕平板 (≥768px) 中等屏幕桌面显示器 (≥992px) 大屏幕大桌面显示器 (≥1200px) 媒体查询有两种引入方式：内部引入和外部引入。...，媒体查询代码放到最后。...写媒体查询的时候要按照屏幕从小到大的设置。外层包裹的元素宽度处理要使用百分比。图片缩放处理的时候容易失真，所以尝试给图片添加最大最小的宽度。...bootstrap框架用的就是媒体查询原理，我们做响应式布局的时候，基本都会借用bootstrap框架提高工作效率。四、响应式优缺点 4.1、优点：面对不同分辨率设备灵活性强。

9674 0

CSS媒体查询_css网页

媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。...媒体查询与弹性盒布局的适用情况：媒体查询：当页面的结构发生变化的话最好使用媒体查询。 ...可以通过它让选中的样式在老式浏览器中不被应用 media="only screen and (max-width:1000px)"{ ...} ...所以，在使用媒体查询时，only最好不要忽略在Media Query中如果没有明确指定Media Type，那么其默认为all，如：在样式中，还可以使用多条语句来将同一个样式应用于不同的媒体类型和媒体特性中，指定方式如下所示 <link

1.6K3 0

详细的聊一聊如何使用响应式图片，提升网页加载速度

顺序很重要如果您的sizes属性中有多个媒体查询，将选择第一个为true的媒体查询对应的图像。这意味着您的媒体查询的顺序很重要。...原因是第一个媒体查询（max-width: 800px）100vw 在所有小于800像素的屏幕尺寸下都为真。...这意味着第二个媒体查询（max-width: 500px）50vw 将永远不会被使用，因为只有在屏幕小于500像素时才为真，而在这些尺寸范围内第一个媒体查询将始终为真，因此它将始终被优先选择。...为了解决这个问题，您需要重新排序媒体查询，使最具体的媒体查询排在最前面，最不具体的媒体查询排在最后。...它的工作方式类似于sizes属性中的媒体查询，但是在source元素的media属性中，您只能定义一个媒体查询。这些查询与sizes属性一样，从上到下逐个检查，只有第一个匹配的媒体查询会被使用。

4903 0

Scss 封装媒介查询，快乐使用轻松实现

Scss 对媒介查询的封装确实能带来 “一次封装，终生轻松” 的效果。以下是进一步阐述这种优势：当你使用 Scss 封装媒介查询后，在整个项目的开发过程中，你无需反复书写复杂的媒介查询语句。...scss 代码 // 定义一个名为 $breakpoints 的变量，并包含五个媒体查询的断点和对应的最小、最大宽度 $breakpoints: ( 'phone': (320px, 480px...1024px), 'desktop': (1025px, 1200px), 'tv': 1201px ); // 定义一个名为 diffTypes 的 mixin，用于创建不同类型的媒体查询...，当屏幕宽度在最小值和最大值之间时应用样式 @media (min-width: $min) and (max-width: $max) { @content;...@content; } } } // 定义一个名为 repod-to 的 mixin，根据传入的断点名称生成相应的媒体查询 @mixin repod-to($breakname

1171 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭