为什么@media screen在我的网站上不工作？
@media screen是CSS中的一个媒体查询规则，用于指定在特定屏幕尺寸或设备上应用不同的样式。它可以根据屏幕宽度、高度、分辨率、方向等条件来选择性地应用样式。
如果@media screen在你的网站上不起作用，可能有以下几个原因：
- 错误的语法：请确保你的@media screen规则的语法正确。它应该像这样：@media screen and (max-width: 768px) { /* 样式规则 */ }
- 优先级问题：可能其他CSS规则的优先级比@media screen高，导致它被覆盖。你可以通过使用!important来提高@media screen规则的优先级，或者检查其他CSS规则的优先级并进行调整。
- 媒体查询条件不匹配：请确保你的媒体查询条件与你的目标设备匹配。例如，如果你想在屏幕宽度小于768像素时应用样式，那么媒体查询条件应该是(max-width: 768px)。
- 缓存问题：有时候浏览器可能会缓存旧的CSS文件，导致@media screen规则不起作用。你可以尝试清除浏览器缓存或强制刷新页面来解决这个问题。
- 其他CSS规则冲突：可能存在其他CSS规则与@media screen冲突，导致它不起作用。你可以检查其他CSS规则并进行调整，或者使用浏览器的开发者工具来查看元素的样式规则是否被覆盖。
总结起来，如果@media screen在你的网站上不起作用，你需要检查语法、优先级、媒体查询条件、缓存以及其他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
- 移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mobile
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 区块链（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯会议：https://cloud.tencent.com/product/tcmeeting
相关·内容
@media查询相关错误。我的HTML代码-- <div class="Card"><div class="
浏览 22提问于2020-04-18得票数 0
1回答
我的网站有问题。
在我的“切换设备”工具栏中，我选择了iPhone 7Plus、Galaxy8等的响应选项。我的网站确实看起来不错，但当我在iPhone(7+/6S+)上打开我的网站时，我的网站并不能像我想的那样工作。我不知道为什么它看起来不是我想
浏览 0提问于2018-03-14得票数 0
2回答
我试图通过覆盖bootstrap媒体查询来使我的应用程序上的字体对于小型设备更大。我尝试这样做，通过使用bootstrap媒体查询设置h1的字体大小 h1{font-size: 5rem}只有我收到这个Invalid CSS after "...ia (min-width: ": expected expression (e.g.
浏览 6提问于2017-02-12得票数 0
1回答
我正在用自制的media-queries在我自己的网站上工作.图像示例(移动屏幕)正如你所看到的，它可以很好的工作在桌面上，但我不知道为什么在移动显示高分辨率。@media only screen and (max-height: 700p
浏览 0提问于2014-04-09得票数 0
好的，我已经通过媒体查询很好地调整了设备的大小。现在我需要在浏览器调整大小时重现它。是否可以只使用CSS？为了可伸缩性，我尽量避免多个命名div(例如，添加另一个更改，最小宽度等，它仍然可以工作)但是，在浏览器调
浏览 3提问于2015-05-11得票数 0
3回答
对于响应式布局，您推荐的宽度应该是多少？) */ @media only screen and (max-width: 767px) {}
/* Mobile Landscape Size to TabletPortrait
浏览 0提问于2012-04-05得票数 24
回答已采纳
2回答
我了解了媒体查询，并了解到应该有主要断点用于布局的戏剧性更改，而次要断点用于填充和字体大小等内容。我认为这比改变4或5个媒体查询的整体布局要好。
浏览 5提问于2017-11-10得票数 1
回答已采纳
我在我的iPhone6上使用了这个： @media only screen and (max-device-width : 812px) {styles} 但它在iphone X中呈现出不正常的效果 我把这个用在iphone X上： @media only screen320p
浏览 26提问于2020-02-03得票数 0
1回答
好的，我使用Galaxy S7在同一服务器上的两个不同网站上进行了这些媒体查询
在一个网站上，它在纵向移动视图、横向平板视图和电脑上都能很好地工作，
浏览 14提问于2020-03-01得票数 2
回答已采纳
1回答
我的网站的设计是为最小分辨率1200 in (大型设备台式机在引导)。我要那些分辨率较低的人有水平卷轴。我有以下模板： <div class="container//...filters
浏览 1提问于2014-01-18得票数 0
回答已采纳
我使用media query在窗口缩小时缩放字体大小。我将宽度和高度值与rem单位分配给我的容器。 当我打开dev tools并调整窗口大小时，一切都像预期的那样工作。但是在我的手机上，这个设计是坏的。 使用Safari和chrome在Iphone 7 plus和Iphone xr上进行了测试。screen and (max-width: 1800px) {
浏览 24提问于2021-04-20得票数 1
1回答
我在一个Angular 6网站上工作。我有一个名为our-work.ts的组件，我在一个文件global.scss中全局定义了它的媒体查询，就像这样。@media only screen and (max-width: 767px){ float: none; .popular-work, .popular-work
浏览 0提问于2018-10-08得票数 1
1回答
我很难自动改变黑莓7“和黑莓Q10 (720 X 720)在我目前正在开发的网站上的分辨率。这个问题在屏幕截图中得到了说明(稍作解释:在包含Nivo滑块的页面上，所有内容都比同一网站的其他页面小)。屏幕截图是在BB Playbook平板电脑上拍摄的。这是垂直显示的媒体查询：
@media screen and (orientat
浏览 0提问于2014-02-28得票数 1
回答已采纳
我的手机版(max-width : 479px)没有显示#111作为背景色。相反，#000显示为背景颜色。请帮帮我。@media only screen and (max-width: 1024px) { background-color:#ff0000;}
{ background-color:#000;}
@media o
浏览 0提问于2013-04-02得票数 14
回答已采纳
我在这个网站上的第一个问题。如果我做错了什么，我很抱歉 这是我的@media查询代码； @media only screen and (min-device-width:992px) and (max-device-width:1199px){ max-width: 100%; width: 100%;} 我</e
浏览 18提问于2021-08-31得票数 0
我正在尝试修改一个现有的网站，通过添加下面这行代码来响应：...}它在我的开发环境中工作得很好，但当涉及到生产时，不知何故在Google Chrome中的检查过程中没有发现@media行。无论如何，在检查页面的源代码时，.css都会更新。
有什么建议吗？
浏览 0提问于2018-10-05得票数 0
1回答
我目前在一个网站上工作，这个网站应该根据屏幕的大小在不同的样式表之间切换。当我在我的笔记本电脑浏览器上测试它时，它工作得很好，随着我调整浏览器窗口的宽度而改变样式，但它在我的手机上不起作用。我只得到了桌面样式表，我不确定为什么。我用来浏览网站的</e
浏览 8提问于2016-08-03得票数 0
回答已采纳
1回答
在我的网站上，我有3个css <link rel="stylesheet" type="text/css" media
浏览 0提问于2011-12-16得票数 12
回答已采纳
2回答
在移动视图中隐藏广告横幅
、、、
我被困在解决这个问题上。请任何人帮帮我。 line-height: 60px; color: #fff;}
@mediascreen and (m
浏览 2提问于2017-07-25得票数 0
2回答
我有一个日历asp页面，用户计划时间，每个人的时间都显示在这个表上(类似于谷歌日历，但只有月视图)。我已经启动并运行它，它工作得很好，但我需要在打印时编辑页面，以确保所有内容都能放在一页上。span class='dnPrint'><br/></span><
浏览 0提问于2013-05-10得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
