开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

为什么我的媒体查询会影响每个宽度，而不是只针对我设置的(max- width : 860px)？

媒体查询是一种用于响应式网页设计的CSS技术，它允许开发者根据设备的特性（如屏幕宽度、设备类型等）来应用不同的样式规则。在你提到的情况中，媒体查询影响了每个宽度，而不仅仅是(max-width: 860px)。

可能的原因有以下几点：

CSS规则的优先级：媒体查询的CSS规则可能与其他CSS规则具有相同的优先级，导致它们同时生效。在这种情况下，你需要确保媒体查询的CSS规则具有更高的优先级，可以通过使用更具体的选择器或者使用!important来实现。
媒体查询的嵌套：媒体查询可以嵌套在其他媒体查询中，这可能导致多个媒体查询同时生效。你需要仔细检查代码，确保媒体查询的嵌套关系正确，并且每个媒体查询都只应用于特定的宽度范围。
媒体查询条件的错误：媒体查询的条件可能存在错误，导致它适用于不同于预期的宽度范围。你需要仔细检查媒体查询的条件，确保它们与你的预期一致。
其他CSS规则的影响：除了媒体查询外，其他CSS规则可能会影响元素的宽度。你需要检查其他CSS规则，并确保它们不会干扰媒体查询的效果。

总结起来，要解决媒体查询影响每个宽度的问题，你需要仔细检查CSS规则的优先级、媒体查询的嵌套关系、媒体查询条件的准确性以及其他CSS规则的影响。确保你的媒体查询只应用于你想要的特定宽度范围，并且没有其他因素干扰了媒体查询的效果。

腾讯云相关产品和产品介绍链接地址：

腾讯云官网：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
云存储（COS）：https://cloud.tencent.com/product/cos
人工智能（AI）：https://cloud.tencent.com/product/ai
物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs

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

有帮助

没帮助

相关·内容

总结CSS3新特性(媒体查询篇)

总结CSS3新特性(媒体查询篇) CSS3的媒体查询是对CSS2媒体类型的扩展,完善; CSS2的媒体类型仅仅定义了一些设备的关键字,CSS3的媒体查询进一步扩展了如width...,例: @media not all and (max-width: 500px){} /*等价于*/ @media not (all and (max-width: 500px)){} /*而不是*/...screen , (min-width: 800px){ /*匹配电脑屏幕或者宽度大于800px的设备*/ } Media Type(只说几个常用的,其余会给出链接): All: all是默认值,...(min-width:600px){ /*此条匹配宽度大于600px的非打印机设备*/ } } 这样省去了将 not print 写两遍的冗余.这样写也是有一定好处的,因为有些浏览器也许只支持...Media Type 而不支持 Media Query- -(不要问我为什么知道,栽过坑) Media Query(仅指上边那几个)的值的单位可以是 px em rem (%/vh/vw/vmin/vmax

1.4K10 0

CSS：使用CSS媒体查询创建响应式布局

追究Bootstrap的内在原理，其实就是通过媒体查询来完成对不同屏幕大小、不同分辨率、不同设备导致的不同场景下的Css样式的选择。今天我就对媒体查询这一工具或者说方法来进行一个总结。　　...”是应用媒体查询的媒体类型，例如“all”，意思是所有媒体都使用接下来的css样式表；或者“(min-width:800px)”，意思是屏幕最小宽度为800px时使用接下来的CSS样式表，如果屏幕宽度大于...由此我们可以扩展出很多的媒体查询类型。　　3、在Css的媒体查询中，可以使用三种逻辑运算，也即“and”，“or”，“not”，意思我当然不用解释。...举几个例子一眼就明白了： /*在将某个媒体查询应用于所有媒体类型时，会省略 all*/ @media (min-width:800px) { ... } /*宽度在800~1200px之间时激活*/ @...:portrait) { ... } 　　不带max-或min-的查询，当然这种查询的的可用性不是很大： @media (width:800px) and (height:400px) { ... }

2.9K2 0

静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

网页中主要的划分区域的尺寸使用百分数（搭配min-*、max-*属性使用），例如，设置网页主体的宽度为80%，min-width为960px。...1、布局特点：屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。 2、设计方法：使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。...，都是检测设备，根据不同的设备采用不同的css，而且css都是采用的百分比的，而不是固定的宽度，不同点是响应式的模板在不同的设备上看上去是不一样的，会随着设备的改变而改变展示样式，而自适应不会，所有的设备看起来都是一套的模板...那么为什么一般多是 html{font-size:62.5%;} 而不是 html{font-size:10px;}呢？...针对这个现象，可以尝试设置html字体为100px，body 修正为16px，这样 0.1rem 就是 10px，而body的字体仍然是默认大小，不影响未设置大小的元素的默认字体的大小。

10.1K3 3

随方逐圆--全面理解CSS媒体查询

在媒体查询出现之前，针对不同尺寸设备的设计常常依靠JS或PHP等依靠userAgent来勉强实现，而现在自适应的响应式设计成为了家常便饭 [I]....例如width, height, color等 CSS3中的媒体查询让内容的呈现可以根据设备进行变化, 而不需要改变内容本身 1.1 CSS2中的媒体查询在CSS2中，媒体查询只使用于和...– 输出设备渲染区域（如可视区域的高度或打印机纸盒的高度）的高度 device-width – 输出设备的宽度（整个屏幕或页的高度，而不是仅是渲染区域） device-height – 输出设备的高度（...整个屏幕或页的高度，而不是仅是渲染区域） orientation – 设备处于横屏（宽度大于高度）模式还是竖屏（高度大于宽度）模式 aspect-ratio – 输出设备目标显示区域的宽高比 device-aspect-ratio...媒体特性 3.1 根据媒体特性的范围查询指定一个固定的宽度通常是没有意义的，更多的情况下，我们需要限定的是类似“小于等于”或“大于等于”这样的范围，而大多数媒体特性可以通过添加“max-”和“min-

1.2K2 0

网页布局的几种方式有哪些_做网页建议用哪种布局

大家好，又见面了，我是你们的朋友全栈君固定布局　　为网页设置一个固定的宽度，通常以px做为长度单位，常见于PC端网页。　　...流式布局的代表作栅格系统（网格系统）。　　例如设置网页主体的宽度为80%，min-width为960px。...=1, user-scalable=no" /> 然后使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。...在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。但媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。...自适应对页面的屏幕适配实在一定的范围，比如：pc 端 > 1024px; 平板 768 ~ 1024px; 手机端 < 768px; 响应式是一套页面同时兼容在 pc 端、平板和手机端的各个不同视口，而不是为每个终端做一个特定的版本

3K2 0

实践 HTML5 的 CSS3 Media Queries

先来介绍下 media，确切的说应该是 CSS media queries（CSS 媒体查询），媒体查询包含了一个媒体类型和至少一个使用如宽度、高度和颜色等媒体属性来限制样式表范围的表达式。...-- link元素中的CSS媒体查询 --> 标签上带有媒体查询的样式表仍将被下载（只不过不会被应用）。...有去测试的同学会发现，div 的背景色并没有想代码中设置的那样，在不同的 devicePixelRatio 属性值下，展现出不同的颜色，这是为什么呢？...的值，所有如果你在切换不同 devicePixelRatio 属性值的屏幕时，没有重新设置 Canvas 的宽高的话，绘制出来的画面将不是最佳的效果。

1.3K2 0

实践 HTML5 的 CSS3 Media Queries

先来介绍下 media，确切的说应该是 CSS media queries（CSS 媒体查询），媒体查询包含了一个媒体类型和至少一个使用如宽度、高度和颜色等媒体属性来限制样式表范围的表达式。...-- link元素中的CSS媒体查询 --> 标签上带有媒体查询的样式表仍将被下载（只不过不会被应用）。...有去测试的同学会发现，div 的背景色并没有想代码中设置的那样，在不同的 devicePixelRatio 属性值下，展现出不同的颜色，这是为什么呢？...的值，所有如果你在切换不同 devicePixelRatio 属性值的屏幕时，没有重新设置 Canvas 的宽高的话，绘制出来的画面将不是最佳的效果。

1.8K10 0

基于 CSS3 Media Queries 的 HTML5 应用

先来介绍下 media，确切的说应该是 CSS media queries（CSS 媒体查询），媒体查询包含了一个媒体类型和至少一个使用如宽度、高度和颜色等媒体属性来限制样式表范围的表达式。...-- link元素中的CSS媒体查询 --> 标签上带有媒体查询的样式表仍将被下载（只不过不会被应用）。...有去测试的同学会发现，div 的背景色并没有想代码中设置的那样，在不同的 devicePixelRatio 属性值下，展现出不同的颜色，这是为什么呢？...的值，所有如果你在切换不同 devicePixelRatio 属性值的屏幕时，没有重新设置 Canvas 的宽高的话，绘制出来的画面将不是最佳的效果。

9825 0

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

这可能会让人困惑，因为w不是CSS单位，实际上w代表图像的实际宽度，以像素为单位。您可以通过在文件浏览器/资源管理器中检查图像来轻松找到这个宽度。...在小屏幕上，我的博客内容（包括图像）占据了整个屏幕的宽度，但在较大屏幕上，我将内容居中显示，并设置了一个有限的最大宽度。...sizes属性接受一个以逗号分隔的媒体查询和尺寸列表。为了理解其中的内容，让我们逐个解析列表中的每个项。我们的第一个项（max-width: 800px）100vw 有两个部分。...如果没有任何媒体查询匹配，则使用img标签作为备选项，这也是为什么我们没有针对较大屏幕尺寸专门设置source元素的原因。...为什么要使用picture元素而不是其他替代方案对于picture元素的一个大误解是，为什么要使用它而不是img元素的sizes属性或CSS。

4033 0

响应式设计

首先，它告诉浏览器当解析 CSS 时将设备的宽度作为假定宽度，而不是一个全屏的桌面浏览器的宽度。其次当页面加载时，它使用 initial-scale 将缩放比设置为 100%。...媒体查询里面的规则仍然遵循常规的层叠顺序。它们可以覆盖媒体查询外部的样式规则（根据选择器的优先级或者源码顺序，同理，也可能被其他样式覆盖。媒体查询本身不会影响到它里面选择器的优先级。...然后是针对中等屏幕的媒体查询，其中的规则基于移动端样式构建并且会覆盖移动端样式。最后是针对大屏幕的媒体查询，在这里添加网页最后的布局。有的设计可能只需要一个断点，有的设计可能需要多个断点。...max-width 是用来排除某些规则的方式，而不是一个常规手段。...用 Flexbox 布局也可以，设置弹性元素的 flex-grow 和 flex-shrink（更重要），让元素能够始终填满屏幕。要习惯将容器宽度设置为百分比，而不是任何固定的值。

2K1 0

让访问者禁用响应式布局界面

虽然我不认为这会影响一大批人，但是绝大多数人肯定不懂响应式网站设计。如果有个人在电脑、平板电脑或者智能手机上访问同一个网站结果发现外观效果不同，他可能会感到很困惑。...有些人的浏览器窗口可能比 960px 还窄，也可能比 1200px 窄，或者是他们自己拖动设置的大小，虽然满足了媒体查询中定义的宽度，但是能在网页中显示“切换成桌面版”？...我觉得只有在媒体查询工作的时候才显示这个切换开关——如果响应式布局没有被触发，那切换个毛啊。我选择直接把这个切换链接写进 HTML 中，而不是使用 JavaScript 临时生成。...你可能会产生浏览器是否应该增加切换响应式布局功能的疑问。浏览器可能需要禁止他们自身对媒体查询的支持，而是通过网站的设置来默认显示“全尺寸”或者“桌面版”。...这就是为什么我个人喜好直接开发网站，但是其他开发者却相反的先使用媒体查询功能开发“手机端”的网站，然后再开发“桌面端”布局。如果你使用媒体查询为老的浏览器隐藏 CSS3 的功能，这也会产生问题。

1.1K3 0

大厂前端面试考什么?5

viewport只针对于移动端，只在移动端上才能看到效果介绍一下HTTPS和HTTP区别HTTPS 要比 HTTPS 多了 secure 安全性这个概念，实际上， HTTPS 并不是一个新的应用层协议，...媒体查询由⼀个可选的媒体类型和零个或多个使⽤媒体功能的限制了样式表范围的表达式组成，例如宽度、⾼度和颜⾊。...style>简单来说，使用 @media 查询，可以针对不同的媒体类型定义不同的样式。...@media 可以针对不同的屏幕尺寸设置不同的样式，特别是需要设置设计响应式的页面，@media 是非常有用的。当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。...以 iPhone XS 为例，当写 CSS 代码时，针对于单位 px，其宽度为 414px & 896px，也就是说当赋予一个 DIV元素宽度为 414px，这个 DIV 就会填满手机的宽度；而如果有一把尺子来实际测量这部手机的物理像素

9492 0

两个 viewports 的故事-第二部分

旋转方向会影响高度，但不会影响宽度。 ? 测算视觉视图视觉视图通过 window.innerWidth/Height 测算。...媒体查询媒体查询的工作方式和在桌面端相同。 width/height 将布局视图作为参照，使用 CSS 像素计算。而 device-width/height 将设备屏幕作为参照，使用物理像素计算。...举例来说，你需要不同宽度的布局视图适应设备宽度。可是，你也可以使用，没有必要使用 device-width 的媒体查询。那么 width 是更重要的媒体查询吗？...也许是，有线索表示浏览器厂商认为这一数值对于设备上的网站是友好的宽度。但仍然有些含糊不清 width 的媒体查询没有提供更多的其他信息。因此我仍然不确定。...现在你可能会设置 html {width: 320px} 。元素收缩了，其他元素的宽度是 320px 的 100%。

1.7K7 0

Html和CSS布局技巧（转）

CSS中的有些元素也是这样，他们有的只对牛奶感兴趣，有的只喜欢吃坚果和果冻，而讨厌牛奶。...而vertical-align呢，是个比较挑食的家伙，它只喜欢吃果冻，从小吃果冻长大，没有了果冻，它就会闹脾气，对你不理不睬。...当作left与right之间的边距，右侧利用overflow:hidden 进行形成bfc模式如果我们需要将两列设置为等高，可以用下述方法将“背景”设置为等高，其实并不是内容的等高 .left{width...一个页面在屏幕上显示时使用无衬线字体, 而在打印时则使用衬线字体, screen 和 print 是两种已定义的媒体类型, 媒体查询让样式表有更强的针对性, 扩展了媒体类型的功能;媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成..., 媒体查询中可用于检测的媒体特性有width、height和color（等）, 使用媒体查询, 可以在不改变页面内容的情况下, 为特定的一些输出设备定制显示效果。

4.8K2 0

你不知道的height常识

这点与宽度是不同的，父元素宽度为auto的时候，子元素也可以拿到宽度。 ?...important的权重是很大的，而min- max- 设置的值比width height中设置的important还要大。 //最终生效的样式为50px .demo{ height:100px!...important; max-height:50px; } 流体特性流体特性主要体现在了宽度上，在我们做流体或者自适应布局的时候，通常希望设置边界。媒体查询也是部分依赖了这个原理。....container{ min-width:1000px; max-width:1400px; min-height:700px;} 图片具有不确定宽高的特性，尤其在移动端我们需要友好的显示同时不会出现布局错乱...important是为了避免图片本身有高度时宽度百分比导致变形。 img{ max-width:100%; height:auto!important;} 参考案例本文heightDemo案例地址

8793 0

为什么你永远不应该在CSS中使用px来设置字体大小

em 和 % 单位在其他情况下并不总是等价的；例如， width: 1em 和 width: 100% 很可能会非常不同，因为此时百分比是基于父容器的宽度而不是其字体大小。...即便如此，我仍建议使用 clamp() 或媒体查询来设置最小和最大值，因为屏幕尺寸往往远远超出我们所期望或测试的范围。...如果用户设置了非常大的字体大小，则可能不是这种情况，将媒体查询设置为 rem 而不是 px 可以帮助我们避免这种假设并响应用户的偏好。我在这个网站上遇到了这个问题；我把所有的断点都设置在 px 上。...然而，当我将默认字体大小设置得更大时，我的媒体查询没有响应，因为它们仍然只查看屏幕的像素宽度。因此，我仍然有一个微小的侧边栏，里面塞满了难以辨认的巨大文本，因为我没有考虑用户的偏好。...在那之后，我立即改为 rem ，问题得到了解决。简而言之：在媒体查询中，除非您确定自己知道在浏览器中设置自己的字体大小会对用户产生什么影响，否则一定要避免使用 px 。

1.6K2 0

响应式设计笔记

媒体查询让样式表有更强的针对性，扩展了媒体类型的功能。..."> 媒体查询还能使我们根据设备的各种功能特性来设定相应的样式，而不仅仅只针对设备类型： <link rel="stylesheet" media="screen and (orientation:...本例中，样式<em>会</em>应用于所有的投影仪。可以在CSS样式表中使用<em>媒体</em><em>查询</em>。...<em>媒体</em><em>查询</em><em>的</em>不足 <em>媒体</em><em>查询</em>尽其所能，根据设备特性应用了对应<em>的</em>样式。但问题是，例子中<em>的</em><em>媒体</em><em>查询</em><em>只</em>覆盖了小范围<em>的</em>视口。...ul li a { font-size: 1.1em; } } 根据视口<em>宽度</em>来改变文字大小，这是<em>媒体</em><em>查询</em>和流动布局和谐共存<em>的</em>又一证据：<em>媒体</em><em>查询</em>约束流动布局<em>的</em>变动范围，<em>而</em>流动布局则简化了从一组<em>媒体</em><em>查询</em>样式过渡到另一组<em>的</em>改变过程

1K2 0

2.HTML根部头部主体标签元素介绍

-- 示例4.用于指定用户是否可以缩放Web页面及针对移动设备进行了优化 -- width和height指令分别指定视区的逻辑宽度和高度。...-- 包含媒体 (media) 选择，视图宽度小于 500px 时生效 --> p { color: blue...温馨提示: 值描述 width 规定目标显示区域的宽度。...可使用 “min-“ 和 “max-“ 前缀。例子：media=”screen and (max-height:700px)” device-width 规定目标显示器/纸张的宽度。...-- 示例3.使用 defer 属性的script标签（推迟执行脚本）如果标签带有 defer 属性，浏览器会另外开辟一个进程来加载 js 资源，而不会阻塞 html 加载注：带有 defer 属性的

1.2K2 0

居中“魔法”总结

因此总结了几种关于居中的实现方法，可能不是很全面，希望大家共勉，我们只需要掌握自己喜欢的几种便捷的方式，在之后开发的过程中，可以大大提高工作的效率。...，未设置高度时候是失效的；可以完美支持图片居中；支持跨浏览器，包括IE8-IE10；支持高度，宽度百分比%属性值和min-/max-属性；如果没有使用box-sizing属性时，是否设置padding...min-/max-属性设置。...，内容块高度会随着实际内容的高度变化，浏览器兼容性也较好； 4:行内块元素 inline-block .contain{ margin: 200px 100px; position:relative...关键在于边上设置高100%，宽度为0的伪元素，也可以用一个宽度为0 的行内块元素代替伪元素 5:transform .contain{ position:relative; height:200px

68810 0

面试官：CSS 面试题集锦

Bootstrap框架中的网格系统就是将容器平分成12份。你用过媒体查询，或针对移动端的布局/CSS 吗？...通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适合相应的设备显示；即响应式布局 @media screen and (min-width: 400px) and (max-width: 700px...默认情况下，block元素宽度自动填满其父元素宽度。 block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。...display:inline inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。...4.流动布局流动布局是各个区块的位置都是浮动的，不是固定不变的。 float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚到前面元素的下方，不会再水平方向溢出，避免了水平滚动条的实现。

3.3K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭