关于媒体查询不能生效的原因

已于 2023-12-06 17:12:45 修改
阅读量668 收藏 8
点赞数 11
文章标签： 媒体
于 2023-12-04 00:09:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73172034/article/details/134720242
版权

问题

今天写媒体查询，遇到了个问题，卡了很久，引入三个样式：mainPageCommon.css、mainPageBig.css、mainPageSmall.css。其中的两个样式可以生效，但是大尺寸的媒体查询不能生效，这里很奇怪！！

我尝试了很多，在小尺寸的媒体查询的css中设置不同的宽度，边距，颜色等等，尝试了增加样式的权重……

尝试了将不生效的放到前面，还有修改他的尺寸范围，这些都解决不了问题。

解决

  • 在确定不是css样式的问题之后，可能是在and后面没有空格，而且不容易发现，格式化也不能自动修正。
  • 括号中的内容内容不能写结束符“;”

  • 每个语句结束要加分号 

 

明里灰
关注
  • 11
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
详解关于使用媒体查询@meda失效原因的总结
09-22
主要介绍了详解关于使用媒体查询@meda失效原因的总结的相关资料，对@meda失效原因做个小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS3媒体查询Media Queries基础学习教程
11-21
此外，多个媒体查询可以使用逗号分隔，这意味着只要其中任何一个查询匹配，样式就会生效，这相当于逻辑操作符`or`。例如，以下媒体查询将针对两种情况应用样式：设备视口宽度至少为700像素，或者设备是横屏的手持...
【CSS】@media媒体查询无效
哈哈哈
04-14 2023
用@media媒体查询写的CSS样式无效 1.问题 用@media媒体查询写的CSS样式对html无效。 2.解决 尝试一： ‘and’ 和 ‘(’ 之间要有空格 @media screen and (max-width:768px){ body { padding-top:150px; padding-bottom: 20px; } } 尝试二：保证htm...
这可能是最全的总结：css 媒体查询@media 不生效的原因
最新发布
weixin_57818879的博客
05-16 740
css 媒体查询@media 不生效的原因，不仅介绍了重灾区样式覆盖问题，还介绍了标签，环境匹配，仿真设备等因素
【踩坑】vue中使用媒体查询方法和不生效问题总结
seeeeeeeeeee的博客
07-27 5586
在vue中是不能直接使用@media的，我们必须结合less或者sass来使用它 一、安装依赖项 只要你安装了sass就行。 npm install sass-loader node-sass --save-dev 二、@/assets/scss/media.scss 这一步，自己创建一个scss文件，这路径不用跟我一样，自己改就行。 @media screen and (min-width:1400px) { .time_comparison_wrap{ margin-top:
css中媒体查询不生效的原因
hwm75的博客
02-17 532
缺少空格 优先级
关于media媒体查询不生效的问题原因总结
热门推荐
一个在全能之路上越走越远的男人。
08-12 2万+
1.and  后面一定要有空格~~~  切记 2.meta 里面需要加上一句话： <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 3.代码写错了，选择器写错了，样式备覆盖了·等等低级问题，可以先在里面，写个简单的并...
前端css媒体查询不生效问题和如何使用案例最新(源码全)
m0_49714202的博客
05-19 1919
目录一. 不生效问题总结1. 语法里面`screen ` 和`and`前后都有空格2.引入meta标签语句(1)原生html引入方法(2)vue项目引入方法3.择器的权重问题（样式被覆盖）(1)相同class名写在下面的权重高于上面的权重，所以样式会覆盖上面的(2)html引入link标签样式(3)css选择器权重可以百度一下(4)样式后面加`!important`可以增加权重例如下面二. 媒体查询的使用1.首先引入meta标签兼容移动设备（手机、平板），上面已经有步骤2.参数解释：3. 兼容IE8，需要加
关于css媒体查询不起作用的解决方法
nuanpang的博客
06-03 5030
1、关于媒体查询：在网页制作中，利用@media screen实现网页布局的自适应，匹配不同访问设备。这样无需插件和独立的手机主题，对移动设备友好，能够适应各种窗口大小。2、可能的原因：（1）首先确认是不是css本身的问题，而不是媒体查询没有生效。 比如 div{display:flex;} 如果写入了此代码，那么div所有的display效果都将无法生效； （2）格式书写错误and后面必须有空格，例如下面代码： /*屏幕小于640px时的样式*/ @media screen and (max-width:
媒体查询展示页面资源
06-11
此外，媒体查询还可以结合`only`关键字来更精确地控制特定类型的媒体，如`@media only screen and (max-width: 600px)`，这将确保样式仅对屏幕设备生效。 通过这个媒体查询展示页面，你可以观察到随着屏幕尺寸的...
responsive-email:没有媒体查询的响应式电子邮件
05-30
"responsive-email:没有媒体查询的响应式电子邮件"这个主题聚焦于如何在不使用CSS媒体查询的情况下实现电子邮件的响应性。 在传统的响应式设计中，媒体查询是核心工具，它允许我们根据设备的屏幕尺寸应用不同的样式...
react-media：ReactCSS媒体查询
02-24
是ReactCSS媒体查询组件。 组件侦听与匹配的内容，并根据查询是否匹配来呈现内容。 安装 使用npm： $ npm install --save react-media 然后，像使用其他任何东西一样使用： // using ES modules import Media ...
vue中媒体查询不起效原因总结
一只程序喵
01-06 6873
vue中 用less或scss都可以使用媒体查询不生效无非以下几种错误，若还有，欢迎在下方评论补充 错误一：在html结构文件里必须引入代码 <meta name="viewport" content="user-scalable=0,width=device-width, initial-scale=1.0"> width=device-width 是指可视化宽度 initial-...
媒体查询media不生效的原因
baidu_39188121的博客
08-01 4627
媒体查询@media不生效的原因 格式书写错误 and后面必须有空格 @media screen and (max-width:500px){ } 样式冲突 @media查询带的css写在后面 @media查询的css写在前面会被后面的css所覆盖。 p { background-color:lightgreen; } @media scr...
操作元素之修改样式属性
leechoy
06-12 638
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>..
CSS媒体查询@media and screen指令在部分（360、奇安信等）浏览器不生效的解决方案
PureSky12的博客
11-23 1349
@media and screen指令在chrome、edge等浏览器也生效，但是在360浏览器等其它浏览器进行测试时，发现这段代码的指令没有被执行
@media 媒体查询失效的原因总结
weixin_39920509的博客
03-21 1万+
1. 选择器的权限是否正确：div p{ font-size: 14px; }@media screen and (min-width:500px) and (max-width:1024px){ p{ font-size: 12px; } }例如：设置屏幕宽度在500px到1024px之间，p标签的文字大小为12px；但是如果部分p标签的css权限 [ 上...
css的mediaquery查询几种不生效的原因
qq_37558379的博客
06-30 6411
今天上午搞了半个小时，在webstrom中修改了css样式，用chrom浏览器浏览不生效，在网上查了半天，看是不是webstrom的有写保护，或者chorm浏览器不支持，最后发现少and后面少了一个空格导致css mediaquery查询不生效，即使在chrom中的network中css样式文件已经被加载了。@media screen and 不起作用原因汇总。首先确认是不是css本身的问题，而不...
怎么取消媒体查询的样式
08-09
要取消媒体查询的样式，你可以采取以下几种方法之一： 1. 删除媒体查询的样式：在你的CSS文件中找到媒体查询的样式块，并将其删除。这将使媒体查询的样式不再生效。 2. 重写媒体查询的样式：在你的CSS文件中添加新的样式规则来覆盖媒体查询的样式。你可以使用更具体的选择器或更高 3. 使用JavaScript动态添加或删除样式：通过JavaScript，你可以使用`querySelector`方法选择具有媒体查询样式的元素，并使用`removeAttr
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

明里灰

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值