CSS媒体查询“@media”在调试中切换移动设备时不起作用。

最新推荐文章于 2024-05-05 11:58:16 发布

VIP文章 m0_57927664

最新推荐文章于 2024-05-05 11:58:16 发布

阅读量2.1k

点赞数 2

文章标签： css 媒体 javascript

本文链接：https://blog.csdn.net/m0_57927664/article/details/124504874

版权

今天在学习CSS响应式网页设计中的媒体查询，遇到个有趣的问题，主要就是在调试过程中切换移动设备和电脑，同样的代码将有不同的结果。在切换移动设备调试时@media对于"max-width=979px"及以下的设置失去作用。（主要的疑问，在 max-width>=980px 的设置时，它是有作用的）

首先这段是我代码的关键语句。

<style>
	@media only screen and (max-width:979px){
		body{
		background-color:lightblue;
		}
	}
</style>
/*屏幕低于979像素时，body颜色变为浅蓝色*/

现在我打开chrome调试。

也就是媒体查询@media max-width:979px 时移动端调试不起作用。

紧接着我开始了一些无用的代码调整，直到最后添加一条视口viewport代码后，终于可以正常显示了。

<head>
    <meta name="viewport" content="width=device-width" initial-scale="1.0">
</head>

最后：我也发现

最低0.47元/天解锁文章

优惠劵

m0_57927664

关注关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS媒体查询“@media”在调试中切换移动设备时不起作用。

今天在学习CSS响应式网页设计中的媒体查询，遇到个有趣的问题，主要就是在调试过程中切换移动设备和电脑，同样的代码将有不同的结果。在切换移动设备调试时@media对于"max-width=979px"及以下的设置失去作用。（主要的疑问，在 max-width>=980px 的设置时，它是有作用的）首先这段是我代码的关键语句。<style> @media only screen and (max-width:979px){ body{ background-color:li
复制链接

扫一扫

使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法

11-21

有无数的理由要求我们在任何时候都应该知道用户是使用的什么设备浏览我们的网站——宽屏，普通屏，平板，手机？知道这些特征，我们web应用的CSS和JavaScript才能同步做相应的操作。在给Mozilla Developer Networks改版设计的过程中，我发现使用CSS媒体查询(media queries)虽然非常的有效，但有时，JavaScript却不能及时知道用户浏览设备的状态。浏览网站的用户使用的是桌面电脑，还是平板，还是手机？这对于CSS来说很容易，但CSS却无法将这些信息告诉JavaScript。我发明了一种基于CSS媒体查询和z-index属性的方法，能告诉JavaScript

css：viewport解决@media媒体查询不生效

彭世瑜的博客

11-02

1416

<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style> .container { display: block; } /* 手机端隐藏效果*/ @media only screen and (max-width: 768px) { .container { display: block; } }

参与评论您还未登录，请先登录后发表或查看评论

关于@media样式不生效的问题

欢迎

12-01

1074

@media样式没作用

CSS3 @media 媒体查询 实例源代码,调整浏览器窗口大小。当宽度小于300时，背景色变成淡蓝，否则淡绿色.zip

01-10

CSS3 @media 媒体查询 实例源代码,调整浏览器窗口大小。当宽度小于300时，背景色变成淡蓝，否则淡绿色 1.用手机浏览:H5移动端app 2.用电脑浏览:宽度大于300,宽度小于300

全面解析CSS Media媒体查询使用操作（推荐）

01-19

前面的话　　一说到响应式设计，肯定离不开媒体查询media。一般认为媒体查询是CSS3的新增内容，实际上CSS2已经存在了，CSS3新增了媒体属性和使用场景(IE8-浏览器不支持)。本文将详细介绍媒体查询的内容媒介类型　　在CSS2中，媒体查询只使用于<style>和<link>标签中，以media属性存在　　media属性用于为不同的媒介类型规定不同的样式 screen 计算机屏幕（默认值） tty 电传打字机以及使用等宽字符网格的类似媒介 tv 电视类型设备（低分辨率、有限的屏幕翻滚能力） projection

@media 响应式在手机上没有生效

思渝崖

11-03

1310

如题，如下代码在电脑端浏览器缩放是响应效果，但是在模拟手机的时候响应式样式没有生效在手机端打开页面也是没有生效用的是nuxtjs 框架 @media screen and (max-width: 900px) { //css //... } 解决： –原因： nuxtjs 框架不想vue 框架,没有index.html ，所以一般html 里都会有的meta标签之类，它都没有，所以说需要手动加入该响应式的meta标签 –方法：在 nuxtjs 的nuxt.config.js 里加入meta //

关于css媒体查询不起作用的解决方法

nuanpang的博客

06-03

4919

1、关于媒体查询：在网页制作中，利用@media screen实现网页布局的自适应，匹配不同访问设备。这样无需插件和独立的手机主题，对移动设备友好，能够适应各种窗口大小。2、可能的原因：（1）首先确认是不是css本身的问题，而不是媒体查询没有生效。比如 div{display:flex;} 如果写入了此代码，那么div所有的display效果都将无法生效；（2）格式书写错误and后面必须有空格，例如下面代码： /*屏幕小于640px时的样式*/ @media screen and (max-width:

@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 @media适配iphoneXR无效的问题记录

u010258569的博客

10-15

566

嵌入到app中的页面，前端适配头部导航发现的问题，最初以为iphoneXR的逻辑像素是414* 896 @2x，查了好多资料也都是这样写的，没想到没有生效。后来在github看到有人遇到了同样的问题，说是iphoneXR 是375*812 @2x ，试了试果然有效果。 /* iphoneXR */ @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-rat.

使用媒体查询实现移动端适配，媒体查询meta标签配置（@media screen and，min-width和max-width）

weixin_65793170的博客

04-26

3902

媒体查询可以帮助开发人员针对不同的设备创建响应式设计，它可以使网站或应用程序自适应不同的屏幕尺寸和分辨率，以确保在所有设备上具有良好的用户体验，还可以通过将媒体查询与其他技术（如弹性网格布局和响应式图像）结合使用，创建功能强大的适配方案

详解CSS3中@media的实际使用

09-25

主要介绍了详解CSS3中@media的实际使用,是CSS3入门学习中的基础知识,需要的朋友可以参考下

CSS3媒体查询Media Queries基础学习教程

11-21

如果媒体查询中的媒体类型与文档要展示的设备相符则查询结果为真，并且媒体查询中的所有表达式为真。 CSS Code复制内容到剪贴板 <!– link元素中的CSS媒体查询 –> <link rel="stylesheet" media="(max...

摘录 -------------------------- css3 @media不起作用是什么原因？怎么解决？

歌布衣的博客

09-07

453

https://www.jiangweishan.com/article/yidogn20200601.html

CSS媒体查询

fqq_5280的博客

01-27

517

CSS媒体查询 使用媒体查询，可以针对不同的媒体类型定义不同的样式。如果希望做出响应式的页面，@media是身份必要的。语法 @media mediatype and|not|only (media feature) { CSS-Code; } 你也可以针对不同的媒体使用不同stylesheets（css2） <link rel="stylesheet" media="medi...

CSS媒体查询@media and screen指令在部分（360、奇安信等）浏览器不生效的解决方案

PureSky12的博客

11-23

1251

@media and screen指令在chrome、edge等浏览器也生效，但是在360浏览器等其它浏览器进行测试时，发现这段代码的指令没有被执行

关于@media不生效的问题和meta总结

weixin_34167043的博客

06-27

1165

1：之前做的是两套页面。现在改成响应式布局。发现加上 @media only screen and (max-width: 500px){ .gridmenu{width:100%; } .gridmain{width:100%; } .gridright{width:100%; }} 诸如上面的样式表...

CSS 媒体查询 @media【详解】

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交