媒体查询 CSS 仅在本地和网络上有效
Media Query CSS work only locally and in the web
我正在建立网站，但遇到了问题。我在网上搜索了几个小时，但没有找到答案。
最初 - 在查询响应媒体的最后阶段 - 我制作了一个单一且独特的 .css 并且在内部我使用 @media only 屏幕划分了分辨率类别和 (...) {} 等。但我不得不放弃这种方式，因为有些事情重叠。例如，虽然我的分辨率是 1900px 宽度，但浏览器将采用较低分辨率的规则。
所以，我决定把.css文件按照分辨率分开（有的css和分辨率范围有关，有的是具体分辨率）。所以，一旦创建了 css 文件，我就在 html 文档中添加了这个：
<!-- Custom CSS -->
<link href="/css/style.css" rel="stylesheet">
<!-- @MEDIA QUERY CSS -->
<link rel="stylesheet" media="screen and (min-device-width: 320px) and (max-device-width: 480px)" href="/css/media/320-480.css" />
<link rel="stylesheet" media="screen and (device-width: 480px) and (device-height: 320px)" href="/css/media/480-320.css" />
<link rel="stylesheet" media="screen and (min-device-width: 768px) and (max-device-width: 1024px)" href="/css/media/768-1024.css" />
<link rel="stylesheet" media="screen and (device-width: 1024px) and (device-height: 768px)" href="/css/media/1024-768.css" />
<link rel="stylesheet" media="screen and (device-width: 1024px) and (device-height: 600px)" href="/css/media/1024-600.css" />
<link rel="stylesheet" media="screen and (min-device-width: 1025px)" href="/css/media/1025.css" />
<link rel="stylesheet" media="screen and (min-device-width: 1680px)" href="/css/media/1680.css" />
<link rel="stylesheet" media="screen and (device-width: 1200px)" href="/css/media/1200.css" />
<link rel="stylesheet" media="screen and (device-width: 1152px)" href="/css/media/1152.css" />
<link rel="stylesheet" media="screen and (device-width: 1280px) and (device-height: 1024px)" href="/css/media/1280-1024.css" />
<link rel="stylesheet" media="screen and (min-device-width: 481px) and (max-device-width:767px)" href="/css/media/481-767.css" />
<link rel="stylesheet" media="screen and (device-width: 568px) and (device-height: 320px)" href="/css/media/568-320.css" />
<link rel="stylesheet" media="screen and (device-width: 375px) and (device-height: 667px)" href="/css/media/375-667.css" />
<link rel="stylesheet" media="screen and (device-width: 667px) and (device-height: 375px)" href="/css/media/667-375.css" />
<link rel="stylesheet" media="screen and (device-width: 414px) and (device-height: 736px)" href="/css/media/414-736.css" />
<link rel="stylesheet" media="screen and (device-width: 736px) and (device-height: 414px)" href="/css/media/736-414.css" />
<link rel="stylesheet" media="screen and (device-width: 360px) and (device-height: 640px)" href="/css/media/360-640.css" />
<link rel="stylesheet" media="screen and (device-width: 640px) and (device-height: 360px)" href="/css/media/640-360.css" />
<!-- Bootstrap -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/bootstrap-theme.min.css" rel="stylesheet">
尝试更改 Firefox 中的视口，一切正常。因此，我继续在 Altervista 上发布以查看网络上的结果。
但是，在这一点上，无论是在智能手机上，还是在电脑上，也不是改变视口，我都得到了想要的结果。
通过 Firefox 分析发布的页面，唯一识别的 css 文件是 bootstrap css 的文件。但是，例如，在该文件中没有任何关于 320px 分辨率的信息 - 然而就好像他忽略了我的 320-480.css 文件。
一开始以为是相对URL的错误，其实不是。
我出不去。有人会知道帮助我吗？
提前谢谢你。
在 <link> 中的 href 参数中，您有一个类似于 href="/css/media/320-480.css" 的字符串，但您需要有 href="css/media/320-480.css"。文件夹名称前没有 /。
Here一个不错的demo，媒体查询是如何工作的，请查看！
/*
CSS-Tricks Example
by Chris Coyier
http://css-tricks.com
*/
@charset "utf-8";
* { margin: 0; padding: 0; }
body { font: 14px Georgia, serif; background: #ccc; }
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
h2 { font: 24px Georgia; margin: 0 0 10px 0; }
h3 { margin: 0 0 8px 0; }
p { margin: 0 0 20px 0; }
#fluid-wrap {
width: 70%;
margin: 60px auto;
padding: 20px;
background: #eee;
overflow: hidden;
}
#sidebar {
width: 35%;
float: left;
}
#sidebar ul {
list-style: none;
}
#sidebar ul li a {
color: #900;
text-decoration: none;
padding: 3px 0;
display: block;
}
@media (min-width: 1001px) {
#sidebar ul li a:after {
content: " (" attr(data-email) ")";
font-size: 11px;
font-style: italic;
color: #666;
}
}
@media (max-width: 1000px) and (min-width: 700px) {
#sidebar ul li a:before {
content: "Email: ";
font-style: italic;
color: #666;
}
}
@media (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
#sidebar ul li a {
padding-left: 21px;
background: url(../images/email.png) left center no-repeat;
}
}
#main-content {
width: 65%;
float: right;
}
<!DOCTYPE html>
<head>
<meta charset='UTF-8'>
<title>CSS Media Queries Sidebar</title>
<link rel='stylesheet' href='css/style.css' />
<!--[if IE]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script src='js/example.js'></script>
</head>
<body>
<div id="demo-top-bar">
<div id="demo-bar-inside">
<h2 id="demo-bar-badge">
<a href="/">CSS-Tricks Example</a>
</h2>
<div id="demo-bar-buttons">
</div>
</div>
</div>
<div id="fluid-wrap">
<div id="sidebar">
<h3>Super team:</h3>
<ul id="nav">
<li><a data-email="chriscoyier@gmail.com" href="mailto:chriscoyier@gmail.com">Chris Coyier</a></li>
<li><a data-email="isuredo@likeher.com" href="mailto:isuredo@likeher.com">Elisabeth Moss</a></li>
<li><a data-email="marry@me.com" href="mailto:marry@me.com">Amanda Righetti</a></li>
</ul>
</div>
<div id="main-content">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div>
<style type="text/css" style="display: none !important;">
* {
margin: 0;
padding: 0;
}
body {
overflow-x: hidden;
}
#demo-top-bar {
text-align: left;
background: #222;
position: relative;
zoom: 1;
width: 100% !important;
z-index: 6000;
padding: 20px 0 20px;
}
#demo-bar-inside {
width: 960px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
#demo-bar-buttons {
padding-top: 10px;
float: right;
}
#demo-bar-buttons a {
font-size: 12px;
margin-left: 20px;
color: white;
margin: 2px 0;
text-decoration: none;
font: 14px "Lucida Grande", Sans-Serif !important;
}
#demo-bar-buttons a:hover,
#demo-bar-buttons a:focus {
text-decoration: underline;
}
#demo-bar-badge {
display: inline-block;
width: 302px;
padding: 0 !important;
margin: 0 !important;
background-color: transparent !important;
}
#demo-bar-badge a {
display: block;
width: 100%;
height: 38px;
border-radius: 0;
bottom: auto;
margin: 0;
background: url(/images/examples-logo.png) no-repeat;
background-size: 100%;
overflow: hidden;
text-indent: -9999px;
}
#demo-bar-badge:before, #demo-bar-badge:after {
display: none !important;
}
</style>
</body>
</html>
你附上的截图很清楚。它声明您尝试使用的媒体查询已被弃用，不应再使用。例如according to the MDN docs for device-width
This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Do not use it in old or new projects. Pages or Web apps using it may break at any time.
另请参阅其他 Whosebug 问题：Should I use max-device-width or max-width?
您还应该能够检查您的浏览器开发工具网络选项卡，以查看您的 CSS 文件是否正在加载，以及是否在尝试加载文件时出现任何错误。
我正在建立网站，但遇到了问题。我在网上搜索了几个小时，但没有找到答案。
最初 - 在查询响应媒体的最后阶段 - 我制作了一个单一且独特的 .css 并且在内部我使用 @media only 屏幕划分了分辨率类别和 (...) {} 等。但我不得不放弃这种方式，因为有些事情重叠。例如，虽然我的分辨率是 1900px 宽度，但浏览器将采用较低分辨率的规则。
所以，我决定把.css文件按照分辨率分开（有的css和分辨率范围有关，有的是具体分辨率）。所以，一旦创建了 css 文件，我就在 html 文档中添加了这个：
<!-- Custom CSS -->
<link href="/css/style.css" rel="stylesheet">
<!-- @MEDIA QUERY CSS -->
<link rel="stylesheet" media="screen and (min-device-width: 320px) and (max-device-width: 480px)" href="/css/media/320-480.css" />
<link rel="stylesheet" media="screen and (device-width: 480px) and (device-height: 320px)" href="/css/media/480-320.css" />
<link rel="stylesheet" media="screen and (min-device-width: 768px) and (max-device-width: 1024px)" href="/css/media/768-1024.css" />
<link rel="stylesheet" media="screen and (device-width: 1024px) and (device-height: 768px)" href="/css/media/1024-768.css" />
<link rel="stylesheet" media="screen and (device-width: 1024px) and (device-height: 600px)" href="/css/media/1024-600.css" />
<link rel="stylesheet" media="screen and (min-device-width: 1025px)" href="/css/media/1025.css" />
<link rel="stylesheet" media="screen and (min-device-width: 1680px)" href="/css/media/1680.css" />
<link rel="stylesheet" media="screen and (device-width: 1200px)" href="/css/media/1200.css" />
<link rel="stylesheet" media="screen and (device-width: 1152px)" href="/css/media/1152.css" />
<link rel="stylesheet" media="screen and (device-width: 1280px) and (device-height: 1024px)" href="/css/media/1280-1024.css" />
<link rel="stylesheet" media="screen and (min-device-width: 481px) and (max-device-width:767px)" href="/css/media/481-767.css" />
<link rel="stylesheet" media="screen and (device-width: 568px) and (device-height: 320px)" href="/css/media/568-320.css" />
<link rel="stylesheet" media="screen and (device-width: 375px) and (device-height: 667px)" href="/css/media/375-667.css" />
<link rel="stylesheet" media="screen and (device-width: 667px) and (device-height: 375px)" href="/css/media/667-375.css" />
<link rel="stylesheet" media="screen and (device-width: 414px) and (device-height: 736px)" href="/css/media/414-736.css" />
<link rel="stylesheet" media="screen and (device-width: 736px) and (device-height: 414px)" href="/css/media/736-414.css" />
<link rel="stylesheet" media="screen and (device-width: 360px) and (device-height: 640px)" href="/css/media/360-640.css" />
<link rel="stylesheet" media="screen and (device-width: 640px) and (device-height: 360px)" href="/css/media/640-360.css" />
<!-- Bootstrap -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/bootstrap-theme.min.css" rel="stylesheet">
尝试更改 Firefox 中的视口，一切正常。因此，我继续在 Altervista 上发布以查看网络上的结果。 但是，在这一点上，无论是在智能手机上，还是在电脑上，也不是改变视口，我都得到了想要的结果。
通过 Firefox 分析发布的页面，唯一识别的 css 文件是 bootstrap css 的文件。但是，例如，在该文件中没有任何关于 320px 分辨率的信息 - 然而就好像他忽略了我的 320-480.css 文件。
一开始以为是相对URL的错误，其实不是。
我出不去。有人会知道帮助我吗？ 提前谢谢你。
在 <link> 中的 href 参数中，您有一个类似于 href="/css/media/320-480.css" 的字符串，但您需要有 href="css/media/320-480.css"。文件夹名称前没有 /。
Here一个不错的demo，媒体查询是如何工作的，请查看！
/*
CSS-Tricks Example
by Chris Coyier
http://css-tricks.com
*/
@charset "utf-8";
* { margin: 0; padding: 0; }
body { font: 14px Georgia, serif; background: #ccc; }
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
h2 { font: 24px Georgia; margin: 0 0 10px 0; }
h3 { margin: 0 0 8px 0; }
p { margin: 0 0 20px 0; }
#fluid-wrap {
width: 70%;
margin: 60px auto;
padding: 20px;
background: #eee;
overflow: hidden;
}
#sidebar {
width: 35%;
float: left;
}
#sidebar ul {
list-style: none;
}
#sidebar ul li a {
color: #900;
text-decoration: none;
padding: 3px 0;
display: block;
}
@media (min-width: 1001px) {
#sidebar ul li a:after {
content: " (" attr(data-email) ")";
font-size: 11px;
font-style: italic;
color: #666;
}
}
@media (max-width: 1000px) and (min-width: 700px) {
#sidebar ul li a:before {
content: "Email: ";
font-style: italic;
color: #666;
}
}
@media (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
#sidebar ul li a {
padding-left: 21px;
background: url(../images/email.png) left center no-repeat;
}
}
#main-content {
width: 65%;
float: right;
}
<!DOCTYPE html>
<head>
<meta charset='UTF-8'>
<title>CSS Media Queries Sidebar</title>
<link rel='stylesheet' href='css/style.css' />
<!--[if IE]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script src='js/example.js'></script>
</head>
<body>
<div id="demo-top-bar">
<div id="demo-bar-inside">
<h2 id="demo-bar-badge">
<a href="/">CSS-Tricks Example</a>
</h2>
<div id="demo-bar-buttons">
</div>
</div>
</div>
<div id="fluid-wrap">
<div id="sidebar">
<h3>Super team:</h3>
<ul id="nav">
<li><a data-email="chriscoyier@gmail.com" href="mailto:chriscoyier@gmail.com">Chris Coyier</a></li>
<li><a data-email="isuredo@likeher.com" href="mailto:isuredo@likeher.com">Elisabeth Moss</a></li>
<li><a data-email="marry@me.com" href="mailto:marry@me.com">Amanda Righetti</a></li>
</ul>
</div>
<div id="main-content">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div>
<style type="text/css" style="display: none !important;">
* {
margin: 0;
padding: 0;
}
body {
overflow-x: hidden;
}
#demo-top-bar {
text-align: left;
background: #222;
position: relative;
zoom: 1;
width: 100% !important;
z-index: 6000;
padding: 20px 0 20px;
}
#demo-bar-inside {
width: 960px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
#demo-bar-buttons {
padding-top: 10px;
float: right;
}
#demo-bar-buttons a {
font-size: 12px;
margin-left: 20px;
color: white;
margin: 2px 0;
text-decoration: none;
font: 14px "Lucida Grande", Sans-Serif !important;
}
#demo-bar-buttons a:hover,
#demo-bar-buttons a:focus {
text-decoration: underline;
}
#demo-bar-badge {
display: inline-block;
width: 302px;
padding: 0 !important;
margin: 0 !important;
background-color: transparent !important;
}
#demo-bar-badge a {
display: block;
width: 100%;
height: 38px;
border-radius: 0;
bottom: auto;
margin: 0;
background: url(/images/examples-logo.png) no-repeat;
background-size: 100%;
overflow: hidden;
text-indent: -9999px;
}
#demo-bar-badge:before, #demo-bar-badge:after {
display: none !important;
}
</style>
</body>
</html>
你附上的截图很清楚。它声明您尝试使用的媒体查询已被弃用，不应再使用。例如according to the MDN docs for device-width
This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Do not use it in old or new projects. Pages or Web apps using it may break at any time.
另请参阅其他 Whosebug 问题：Should I use max-device-width or max-width?
您还应该能够检查您的浏览器开发工具网络选项卡，以查看您的 CSS 文件是否正在加载，以及是否在尝试加载文件时出现任何错误。