此媒体查询代码在Chrome中可用，但在Firefox Developer中不可用。
但是，如果我在Firefox中打开WebTools，并在样式表中的任何位置添加换行符，那么它就可以工作了。
#Line_98 {
fill: transparent;
stroke: rgba(112,112,112,1);
stroke-width: 1px;
stroke-linejoin: miter;
stroke-linecap: butt;
stroke-miterlimit: 4;
shape-rendering: auto;
}
.Line_98 {
overflow: visible;
position: absolute;
width: 600px;
height: 1px;
left: 0px;
top: 143.5px;
transform: matrix(1,0,0,1,0,0);
}
#Line_99 {
fill: transparent;
stroke: rgba(112,112,112,1);
stroke-width: 1px;
stroke-linejoin: miter;
stroke-linecap: butt;
stroke-miterlimit: 4;
shape-rendering: auto;
}
.Line_99 {
overflow: visible;
position: absolute;
width: 600px;
height: 1px;
left: 0px;
top: 195.5px;
transform: matrix(1,0,0,1,0,0);
}
#Show_when_view_less_than_line_ {
display: none;
left: 46px;
top: 161px;
position: absolute;
overflow: visible;
width: 255px;
height: 16px;
text-align: left;
font-family: Helvetica Neue;
font-style: normal;
font-weight: normal;
font-size: 14px;
color: rgba(160,160,160,1);
letter-spacing: 0.5px;
}
/** show when less than width */
@media (max-width: 600px) {
.Show_when_view_less_than_line_ {
display: block !important;
}
}
#Show_when_view_more_than_line_ {
display: none;
left: 46px;
top: 222px;
position: absolute;
overflow: visible;
width: 299px;
height: 16px;
text-align: left;
font-family: Helvetica Neue;
font-style: normal;
font-weight: normal;
font-size: 14px;
color: rgba(160,160,160,1);
letter-spacing: 0.5px;
}
/** show when more than width */
@media (min-width: 600px) {
.Show_when_view_more_than_line_ {
display: block !important;
}
}<div id="Responsive_Parts_VI">
<svg class="Line_98" viewBox="0 0 600 1">
<path id="Line_98" d="M 0 0 L 600 0">
</path>
</svg>
<svg class="Line_99" viewBox="0 0 600 1">
<path id="Line_99" d="M 0 0 L 600 0">
</path>
</svg>
<div id="Show_when_view_less_than_line_" class="Show_when_view_less_than_line_">
<span>Show when view less than line width</span>
</div>
<div id="Show_when_view_more_than_line_" class="Show_when_view_more_than_line_">
<span>Show when view more than line width</span>
</div>
</div>我将在StackOverflow视图中查看这是否有效。
在Firefox中测试调整浏览器大小。
这是完整的页面代码(您可以在本地保存(：
https://goonlinetools.com/snapshot/code/#9ioj8td2o5o6gjygd7com3
这里是完整的页面代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media</title>
<style id="applicationStylesheet" type="text/css">
.mediaViewInfo {
--web-view-name: Media;
--web-view-id: Media;
--web-scale-on-resize: true;
--web-refresh-for-changes: true;
--web-enable-deep-linking: true;
}
:root {
--web-view-ids: Media;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
border: none;
}
#Media {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(255,255,255,1);
overflow-x: hidden;
overflow-y: auto;
--web-view-name: Media;
--web-view-id: Media;
--web-scale-on-resize: true;
--web-refresh-for-changes: true;
--web-enable-deep-linking: true;
}
#Line_99 {
fill: transparent;
stroke: rgba(112,112,112,1);
stroke-width: 1px;
stroke-linejoin: miter;
stroke-linecap: butt;
stroke-miterlimit: 4;
shape-rendering: auto;
}
.Line_99 {
overflow: visible;
position: absolute;
width: 600px;
height: 1px;
left: 0px;
top: 195.5px;
transform: matrix(1,0,0,1,0,0);
}
#Show_when_view_less_than_line_ {
display: none;
left: 46px;
top: 161px;
position: absolute;
overflow: visible;
width: 255px;
height: 16px;
text-align: left;
font-family: Helvetica Neue;
font-style: normal;
font-weight: normal;
font-size: 14px;
color: rgba(160,160,160,1);
letter-spacing: 0.5px;
}
/** show when less than width */
@media (max-width: 600px) {
.Show_when_view_less_than_line_ {
display: block !important;
}
}
#Show_when_view_more_than_line_ {
display: none;
left: 46px;
top: 222px;
position: absolute;
overflow: visible;
width: 299px;
height: 16px;
text-align: left;
font-family: Helvetica Neue;
font-style: normal;
font-weight: normal;
font-size: 14px;
color: rgba(160,160,160,1);
letter-spacing: 0.5px;
}
/** show when more than width */
@media (min-width: 600px) {
.Show_when_view_more_than_line_ {
display: block !important;
}
}
</style>
</head>
<body>
<div id="Media">
<svg class="Line_99" viewBox="0 0 600 1">
<path id="Line_99" d="M 0 0 L 600 0">
</path>
</svg>
<div id="Show_when_view_less_than_line_" class="Show_when_view_less_than_line_">
<span>Show when view less than line width</span>
</div>
<div id="Show_when_view_more_than_line_" class="Show_when_view_more_than_line_">
<span>Show when view more than line width</span>
</div>
</div>
</body>
</html>我使用的是Firefox Developer 91.0b2(64位(OSX
更新：
问题出在我这边的一些代码上，而不是浏览器上。
您需要为firefox 做一个额外的css样式
@-moz-document url-prefix() {
// put your styles here
}或者你可以使用这个
@media all and (min--moz-device-pixel-ratio:0) and (max-width: 680px){
// put your styles here
}