2回答
我已经编写了一个响应网站，在其中我有CSS媒体查询，以检测屏幕大小(像素)的设备，用户正在导航。
只是标准媒体。示例：
@media (max-width: 1199px){
/*code*/
}
@media (max-width: 991px){
/*code*/
}
@media (max-width: 767px){
/*code*/
}
当我用手机测试我的网站时，我的网站显示了移动版本，在这个例子中，@media查询的最大宽度为767 of。S4是三星Galaxy的1920x1080像素。
我知道，如果我的手机尊重12 be字体大小这样的精确标准，大多数东西都太小了，看不见
浏览 2提问于2014-09-26得票数 0
回答已采纳
我正在处理一封html电子邮件，我的android4.2.2(Nexus4)手机没有接收到我尝试过的任何媒体查询。请注意，litmus.com (它在不同设备上呈现电子邮件的屏幕截图)显示，媒体查询至少在Android4.0上是有效的。
我试过了：
@media only screen and (max-width: 480px) {}
@media only screen and (max-width: 2000px) {}
@media only screen {}
似乎什么都不起作用。有什么建议吗？
浏览 0提问于2013-03-22得票数 1
回答已采纳
我正在一个.jspf文件中实现两个头菜单。一个标题菜单用于移动屏幕，另一个是桌面屏幕。但问题是，当加载页面时，所有链接都会加载小屏幕标题菜单和桌面屏幕标题菜单。当页面在移动屏幕中加载时，我不想加载桌面标题菜单屏幕链接。
现在我正在使用媒体查询来隐藏小屏幕和桌面屏幕的标题。
我有另一个想法，隐藏和显示的标题，即javascript。
$(Document).ready(函数() { var windowViewWidth = $(window).width()；if (windowViewWidth <= 767) {..})；
一个移动屏幕标题菜单屏幕截图：
当我看到查
浏览 2提问于2015-11-10得票数 1
1回答
您是否知道是否有一种方法可以将媒体查询的相同内容以更少的方式呈现到类中？
为了解释我的情况:我首先做的是移动，并试图避免被媒体查询覆盖。不幸的是，这最终不包括ie8和以下，因为桌面的大多数样式都进入了媒体查询。我只为IE8提供桌面页面(固定宽度)。
最后，我想把以下几点结合起来：
@media (min-width: 769px) {
color: red;
}
.ie8 & {
color: red;
}
用逗号链接它不起作用，因为它无效(@media (最小宽度:769‘s)，.ie8 {})。在Sass中，我可以通过使用@content来实现这一点。但我不能在更短
浏览 0提问于2014-11-13得票数 1
回答已采纳
2回答
我正在用MailChimp制作自定义模板。我还没有在几个电子邮件客户端上测试它，但到目前为止，我用gmail进行的测试显示，当我添加这个媒体查询时，它不仅不起作用，而且会导致整个html电子邮件呈现没有css。另一个CSS在没有查询的情况下对gmail工作得很好。在其他客户端上，媒体查询可以工作，并且不会阻止其他CSS工作。
这是gmail (和其他邮件)的一个已知问题吗，或者有办法解决这个问题吗？
@media only screen
and (max-device-width : 480px) {
.bodyContent div{
浏览 0提问于2012-07-28得票数 0
3回答
已忽略媒体查询
、、
我有一个小问题，我的css媒体查询被忽略了，或者主css被忽略了。
我正在尝试更改媒体查询中的大小字体的值，桌面是75px，手机的(max-width:320px;)是40px左右。但它不起作用。
我的css媒体查询代码是：
/* Smartphones (portrait) ----------- */
@media only screen and (min-width : 320px) {
h1.site-title {
color: #fff;
font-family: 'Open Sans', sans-serif;
font-size:
浏览 3提问于2013-04-20得票数 2
回答已采纳
2回答
我尝试在媒体查询中使用 (新的逻辑属性)，但似乎不起作用。
英文是max-width:1000px，日语是max-height:1000px
/*Not Working*/
@media (max-inline-size:1000px){
.main-content{
background:Red;
grid-template-columns:auto;
}
}
浏览 3提问于2018-12-03得票数 0
我想找到所有的MediaStore存储桶，包括那些没有任何照片的存储桶。发布在SO上的所有解决方案都会查询照片，然后提取存储桶名称，但由于存储桶为空，因此对于该特定存储桶，查询将不会返回任何照片。Gallery应用程序本身不会显示空的存储桶/文件夹。
浏览 6提问于2016-08-02得票数 1
回答已采纳
我有一种像这样的柔性盒风格：
.myclass {
display:flex;
}
和这样的媒体查询：
@media (orientation:portrait) {
.myclass {
display:none;
}
}
我希望元素在纵向模式中是不可见的，但事实并非如此。在Chrome中，display:flex优先，尽管媒体查询更具体。
为何会这样呢？
编辑:只有在CSS中媒体查询放在第一位时，才会发生这种情况。在我的应用程序中，这是无法避免的，因为它是一个相当复杂的MeteorJS应用程序，由几个SCSS文件组成。如果我在显示之后重复相同的媒体查
浏览 2提问于2016-08-02得票数 3
在上，它说：
only关键字向不支持媒体查询的旧浏览器隐藏样式表：
然而，在这一页的下方，它也说，
涉及未知媒体类型的媒体查询总是错误的。
那么，当样式表设置为screen and (color)时，不支持媒体查询的浏览器如何显示样式表呢？它不会理解and color，所以不应该显示它？如果Mozilla所指的浏览器实际上对media属性的支持为零，为什么添加only会阻止它们显示样式表呢？
有人能解释旧浏览器解析(或不解析)媒体属性的过程吗？
浏览 1提问于2012-02-15得票数 16
回答已采纳
在chrome中，将视频dom节点的src属性设置为空字符串( "“)可以释放与视频节点关联的内存。在FF中，从16.0.1到现在的每晚构建19.0a1，这是行不通的。夜间构建具有视频节点上可用的属性mozSrcObject，有人建议您可以将该属性设置为null，但这似乎也不起作用。我还尝试从DOM中删除节点，希望它们能够被垃圾收集，但这也不起作用。
浏览 2提问于2012-10-18得票数 0
2回答
我已经在css类中附加了这个媒体查询。
CSS
@media all and (max-width: 600px) {
.details{
display:block;
}
}
.details{
margin-left: 20px;
font-size: 15px;
color: black;
}
HTML
<p class="details" > My career has taken a natural progression fro m client websites, to UI template
浏览 0提问于2018-07-10得票数 0
回答已采纳
我用wordpress创建了一个简单的页面。我定制了wordpress的主题。当我进入我的页面部分，在wordpress页面的wyswig编辑器中，我放了一张图片。问题是我有图片帖子，我已经在wyswig中对齐了，但当我在实际页面中看到它时，图像没有居中，当我转到移动视图时，我的图像无法响应，我也创建了一个css媒体查询，但仍然不起作用。
下面是我的代码：
<?php
/*
Template Name: Custom Page
*/
get_header(); ?>
<div id="wrapper">
<section id="
浏览 0提问于2016-10-21得票数 0
我在一个高级查询中有一个规则：
@media (max-width: 3000px) {
.dropdown-w:hover .dropdown-content-w {
display: block;
}
}
在此媒体查询中继承的：
@media (max-width: 767.98px) {
/*.dropdown-w:hover .dropdown-content-w {
}*/
.dblock {
display: block;
}
}
由于在较低宽度的媒体查询中，我使用“
浏览 5提问于2022-05-15得票数 0
回答已采纳
2回答
我有以下媒体查询，可以在移动设备上使用，但默认设置不能在桌面上使用：
@media (min-width:481px) {
.header-section { width: auto; }
.search-block { display:none; }
}
@media (min-width:320px) {
.header-section { width: auto; }
.search-block { display:none; }
}
这些在手机上工作，但当我在桌面上查看时，显示在下方而不是在任何媒体查询下的默认CSS不起作用。在我的谷歌检查器中，我可以看到这些规则的media="
浏览 1提问于2013-09-12得票数 0
当我在浏览器中使用响应性设计模式时，我的媒体查询适用于我指定的所有大小。当我在另一个设备上打开我的web应用程序时，这些相同的媒体查询将无法工作。例如，我为其中一个div设置的高度是：197px表示屏幕max-height: 700px，290px设置为屏幕max-width: 1382px。当我使用响应式的网页设计时，对这两种大小的媒体查询都很好。当我调整浏览器的大小或在我的手机中打开相同的web应用程序(最大高度低于700 of )时，媒体查询仍然呈现为1382 of的屏幕宽度。
同样，当我调整浏览器的大小(在我的笔记本电脑上)而不是使用响应性设计模式时，媒体查询不起作用。
我所理解的是，
浏览 3提问于2022-06-05得票数 0
您能否检测到用户是在从启用触摸的设备上查看您的网站，还是在使用鼠标？
有非常大的平板电脑和微型笔记本电脑，所以我觉得基于屏幕大小的媒体查询不起作用。
对于上下文:我有一些带有额外元素的按钮。我希望在默认情况下，在从电话或平板电脑查看时显示该元素，在从膝上型计算机/台式机查看时，在悬停状态下显示该元素。
这有可能吗？
浏览 3提问于2021-06-14得票数 1
回答已采纳
上面的网站在ie8中显示隐藏的布局。这意味着只能在低屏幕分辨率下显示。我在css媒体查询中使用了"display:none“。它在其他浏览器中运行良好。但在IE8中，它不起作用。
浏览 3提问于2014-01-24得票数 0
1回答
响应不同行的HTML表
、、、
我正在从db构建简单的项目列表。此列表中的每个项包含5个元素。在桌面屏幕上，我有足够的空间连续显示它们，如下所示：
原则上，上面的示例是使用这个css表生成的：
<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell img">PHOTO</div>
浏览 1提问于2017-10-04得票数 1
回答已采纳
我有一个简单的HTML5页面：
<!DOCTYPE html>
<html>
<head>
<title>trial</title>
</head>
<body>
<p>
<a href="500.jpg" media="screen and (max-width:500px)">here is a link</a>
<a href="1000.jpg" media
浏览 3提问于2014-10-12得票数 0
我试着在互联网上寻找解决方案，但我没有得到。我也尝试了一些方法，但仍然不起作用。我只使用了音频播放器的音频和颤动音频查询插件，并尝试使用音频服务插件来使其在后台运行和通知控件。我不知道如何实现List<SongInfo> to。<MediaItem>
用于音频查询的示例代码
List<SongInfo> songs = [];
void getTracks() async {
songs = await audioQuery.getSongs();
setState(() {
songs = songs;
});
}
浏览 10提问于2021-03-11得票数 0
我花了一段时间才弄明白为什么这不管用：
@md: ~"only screen and (min-width: 48.9375em)";
.col-2 { width: 50%; }
.block1, .block2 {
@media @md {
&:extend(.col-2, .pull-left);
}
}
我研究并找出了这不起作用的原因。更少的:extend()会忽略它，因为它们不在同一个媒体查询中。那么，如何以更少的方式重新创建下面的内容呢？
.col-2 { width: 50%; }
@media only screen and
浏览 4提问于2016-05-04得票数 0
回答已采纳
1回答
我最近创建的一个网页有两个视频，但是内联媒体查询不起作用。
这位玩家只是从来源列表中提取了第一个视频。
这是我的代码：
<video class="intro-video" controls poster="lineandgrid-video-intro-cover.gif">
<source media="(max-width: 750px)" src="lineandgrid-introduction-video-mobile.mp4" type="video/
浏览 3提问于2021-04-13得票数 1
回答已采纳
3回答
有人知道为什么我的媒体查询代码不起作用吗?谢谢！
@media only screen and (min-width:450px){
.dark-blue{
width: 25%;
}
.blue{
width: 75%;
}
}
我的github 中的更多细节
浏览 5提问于2017-11-10得票数 0
回答已采纳
我创建了两个媒体查询，试图获得一个响应式页面，但底部的媒体查询不起作用。
@media screen and (min-width: 1920px) and (max-width: 1920px) {
.header-my-account-btn {
position: absolute;
top:-64px;
right: -240px;
}
.header-cart-withlist-links-container-inner {
position: absolute;
top:-5
浏览 0提问于2021-07-21得票数 0
我正在编码一个电子邮件时事通讯。
我想在桌面上显示一个高度为400px的<td>，然后在移动设备上缩小到200px。
我不想使用媒体查询，因为它们在一些电子邮件客户端上不起作用，我想让它在尽可能多的电子邮件客户端上工作。
有没有人能提供帮助，告诉我最好的方法。我正在考虑在两个单独的<td>上有一个移动显示/移动隐藏，内容相同，只是为内联样式指定了不同的高度。
有没有一种方法可以完全内联，而不需要在标题/媒体查询中使用样式。
浏览 1提问于2019-03-09得票数 1
是否可以通过媒体查询来识别Safari iOS7中的工具栏显示时间？
(max-height: 215px)将被忽略。
谢谢你的建议，詹姆斯
浏览 1提问于2013-09-17得票数 3
媒体查询在某些情况下不起作用。
我已经写了两次媒体查询，当第三次写屏幕尺寸"@ media (max-device-width:360) and (max-device-height:640)“时，它不工作。
我刚开始写代码，还不能让它工作。所以任何帮助对我来说都是非常有价值的。
import { MediaQueryStyleSheet } from "react-native-responsive";
...//code is here.
const styles = MediaQueryStyleSheet.create(
浏览 11提问于2019-07-06得票数 1
1回答
见此处：
我正在尝试建立一个响应电子邮件，用于所有电子邮件客户端。Gmail正在从head/body中剥离我的样式标记，因此查询也被删除。
我已经测试过使用电子邮件在Acid和Gmail只显示这两个版本！
这里的解决方案是什么：
( 1)使用框架？-甚至这些查询都使用样式/媒体查询。
( 2)外部样式表--是否有任何方法使其工作？
有没有人找到了这个问题的永久解决方案。如有任何意见，我将不胜感激！)
浏览 0提问于2014-02-27得票数 3
1回答
我在buddypress网站上使用了rtMedia插件。我使用了简短的代码<?php echo do_shortcode('[rtmedia_gallery global="true" media_type="all" count="4" loadmore="false"]'); ?>来删除媒体画廊的项目。但计数和装载更多不起作用。它显示了超过4个项目现在。怎么解决这个问题？
浏览 0提问于2014-01-02得票数 1
回答已采纳
我正在尝试在dotnetnuke框架中实现媒体查询。有没有办法有条件地选择要使用的css？我正在尝试停止不支持媒体查询的IE6/7/8，使其无法访问媒体查询CSS：
下面是从我的代码中提取出来的代码，它不起作用：
<%@ Register TagPrefix="ddn" TagName="MENU" src="~/DesktopModules/DDRMenu/Menu.ascx" %>
<%@ Register TagPrefix="ddn" TagName="MOBMENU" src="
浏览 0提问于2012-09-03得票数 0
回答已采纳
2回答
我们的网站有一个固定的边栏包含一个粘性页脚。在浏览器高度大于侧栏内容高度的显示器上查看时，这很好，但在较小的显示上，页脚被“切断”。
为了弥补这一点，我添加了一个媒体查询，该查询将将页脚更改为在侧栏中相对定位，并在侧栏上设置overflow: auto：
/* sidebar padding + menu height + footer height */
@media screen and (max-height: 580px) {
.sidebar .footer {
position: relative;
}
}
尽管这至少允许在较小的显示上查看完整的侧边
浏览 4提问于2013-03-20得票数 0
回答已采纳
1回答
SCSS中的媒体查询无法正常工作
、、、、
我试着遵循一个教程，让网站通过媒体查询来做出响应。我在SCSS中制作了一个媒体查询文件，并编写了这些断点。
然后，在主SCSS文件中导入该文件
但它不起作用。然而，教程视频很好。我到底做错了什么？
浏览 13提问于2021-11-28得票数 0
由于某些原因，此视频将仅在HTML电子邮件中以横向模式自动播放。它只是在纵向模式下闲置，直到您将其翻转到横向模式。在纵向模式下，您也不能单击电子邮件上的播放按钮。有人能帮我吗？这是我的代码。这是Android/三星设备的播放错误吗？不幸的是，我不能包括视频，因为它是专有的。
<video width="600" height="626" autoplay="autoplay" loop="loop" class="video" controls>
<source src="
浏览 0提问于2017-12-01得票数 0
嘿伙计们,
我附上了一张照片，以显示和了解为什么我的媒体查询没有正常工作。在这张照片中，我想向大家展示我想要制作一个联系页面，并且我用HTML和CSS对其进行了样式化。完成样式设计后，我想让它响应，所以我使用了媒体查询。但是，如图所示，它是在css之后出现的，它影响了我的媒体查询，并阻止了它的响应。我只想知道为什么会这样。我也检查了链接和资产目标，但我无法解决这个问题。伙计们，请帮我解决这个错误。提前谢谢你。
浏览 5提问于2022-11-01得票数 -1
目前我想使电子邮件模板，我通常是使我的电子邮件模板与每个内容/行，但这一次我必须做一个电子邮件模板，它有2列在桌面上，并将其更改为1列在移动，完全像引导网格，如果你这样应用它：<div class="col-12 col-md-6"></div>，但由于我使用媒体查询，当我发送电子邮件时，显然样式不起作用，因为你只能使用内联的电子邮件模板和由于媒体查询不能在内联风格，我的模板变得崩溃，有人能帮我解决这个问题吗？ 这是我的css代码行： .col-md-6 {
display: flex;
flex-flow: column wrap;
浏览 29提问于2020-10-17得票数 0
大家好，我正在我的asp.net MVC CSHTML页面中使用媒体查询，但它不起作用，它没有显示我的代码正在休眠的元素
@@media (min-width: 320px) and (max-width: 480px) {
.MenSection{
height: 600px;
width: 460px;
}
#menuicon{
display:table;
}
.trMobile{
display:table;
}
#
浏览 4提问于2018-11-22得票数 0
3回答
我知道有两种方法可以添加媒体查询：
HTML链接：
<LINK REL="stylesheet" TYPE="text/css" MEDIA="(max-width: 1024px)" HREF="foo.css">
CSS:
@media all and (max-width: 1024px) {
......
}
我已经阅读了这些文档，并且理解了这两种方法之间的明显区别。不过，以下是我怀疑你能否澄清的两个问题：
浏览器是否处理HTML媒体链接与CSS媒体查询不同？我的意思是，我知道如果css中添加了cs
浏览 5提问于2014-09-07得票数 14
回答已采纳
我似乎不能让我的媒体查询真正显示出来..我正在尝试最终获得它，以便我的文本将根据浏览器的大小重新调整大小，但我只是试图做一个测试运行，看看它是否可以工作。
我正在尝试让它，以便当浏览器大小调整为1200px的宽度时，页面背景变为红色。这是我的css：
@media screen and (min-width: 500px) and (max-width: 1200px) {
.main {
background-color: red;
}
}
下面是我的样式表链接：
<link rel="stylesheet" media=
浏览 1提问于2013-04-30得票数 2
回答已采纳
6回答
我试图使用css3中的媒体查询来使我的网站响应，看起来我做得不错，但它不起作用，下面是我的代码：
@media screen and (max-width: 480px) {
body{
background-color: blue;
}
}
}
body {
background-color: #fcfcfc;
}
和标题：
<link rel="stylesheet" type="text/css" href="style.css">
css文件工作，但是所有的媒体查询都不能.
浏览 12提问于2017-06-15得票数 0
回答已采纳
1回答
我的app.css包含这个css变量，它在我的css头组件中使用，并且运行良好。
:root {
--fs-subtitle-spartan: 1rem;
}
在头组件中使用它的类：
.menu__items {
font-size: var(--fs-subtitle-spartan);
}
但是，当我想在标题的媒体查询中修改变量时，它不起作用。
@media (width < 48em) {
:root {
--fs-subtitle-spartan: 1.5rem;
}
如何在其他组件的媒体查询中更改css变量？
只有当我在app.css的媒体查询中更改css
浏览 3提问于2022-05-16得票数 0
1回答
我在我的网站上使用媒体查询进行响应性设计，并使用确保它在不支持媒体查询的浏览器中工作。但是当我在IE8上测试它时，它没有工作。
从其他问答中，我确保：
但没有人解决这个问题。
浏览 7提问于2014-07-14得票数 0
回答已采纳
我的标题有一个小问题，我添加了一个媒体查询，当窗口的宽度缩小时，它会变得更高，但实际上它正在重叠我的容器。我尝试添加另一个媒体查询，以降低容器的顶部位置，但它不起作用
header {
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 100;
background: black;
background-position: center;
height: 200px;
color: white;
}
#menu li {
display: inline;
}
@media scree
浏览 2提问于2016-03-23得票数 1
回答已采纳
@support规则允许对CSS属性执行功能查询。我想知道是否有可能对具体的@媒体规则进行功能检查？
例如，我想知道浏览器是否支持@media指针或任何指针条件：
@supports @media (pointer:fine) {
或
@supports @media (pointer) {
这似乎行不通。它应该有效吗？
编辑：这不是引用问题的重复。也许我应该澄清这个问题，以解释为什么这是一个不同的问题。
我不想在媒体中嵌套“支持”，反之亦然。我希望能够检测@media查询本身是否受支持，特别是指针的@media规则。这是一个完全不同的场景，只在媒体查询中嵌套一个随机的支持查询。
浏览 2提问于2017-05-29得票数 10
回答已采纳
1回答
我正在试验响应SVG文件，并且真的希望独立于HTML页面选择合适的图像。
我想要一个设置，在那里我可以将一个SVG传递给一个img标记，而不需要任何进一步的依赖。然后让SVG在返回之前呈现，以便显示。
据我所知，如果我将一个样式的标记放入SVG中，那么它将在页面加载之后进行评估，并且只能访问页面的DOM元素，而不是封装“仅在SVG中”的元素。加载页面之前评估样式的唯一方法是将CSS放入整个svg标记的样式属性中。在那里进行媒体查询会很棒。
这对你有意义吗？有可能吗？
浏览 1提问于2013-04-23得票数 2
在Chrome开发人员工具的样式部分，如何显示@media查询？我找到的所有内容都是关于如何使用省略号在窗口中显示媒体查询，但没有任何关于如何在Styles部分显示@media以便我可以在那里使用它的内容。我如何让它们显示出来？ ?
浏览 27提问于2021-07-15得票数 0
我有一个网站，当浏览器的宽度低于某个像素宽度时，我使用媒体查询链接元素来应用一些覆盖CSS。
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" media='screen and (max-width: 960px)' href='css/mainNarrow.css' />
问题是，在50%的情况下，当浏览器的宽度改变时，第二个样式表似乎不起作用。我使用的是Chrome 58.0.3029.96 (64
浏览 1提问于2017-05-12得票数 1
我正在开发一个应用程序，它需要根据用户的设备显示图像。因此，我使用以下Javascript代码来显示菜单及其图标：
var $imgsrc;
if(dummy_url_decode(results.rows.item(i).title) == "Web Info")
$imgsrc = "icons/web_info.png";
if(dummy_url_decode(results.rows.item(i).title) == "Misc.")
$imgsrc = "icons/misc.png&
浏览 0提问于2013-04-15得票数 0
1回答
我试图使用@import样式的媒体查询来包含特定于浏览器的CSS，如下所示：
<style type="text/css">@import url(foo.css) all and (-moz-box-sizing: content-box);</style>
然后，foo.css有：
.myStyle { -moz-box-sizing: border-box; }
我的想法是，我将包括foo.css的火狐(壁虎/Mozilla)浏览器。然而，看起来foo.css从未应用于火狐。所以：
如何在Firefox中调试?为什么@import媒体查询没有计
浏览 1提问于2013-01-12得票数 0
回答已采纳
1回答
我正在使用MS Report builder3.0创建我的report.The报告之一是表格报告，有时表格的大小会变得很长，大约有2到3页。但我希望在单页中显示整个报告，而不必单击下一页按钮。我试着增加页面大小，但不起作用。请帮帮我！我不熟悉报表生成器。
浏览 4提问于2013-06-07得票数 9
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
