html - 媒体查询 CSS 仅在本地和网络中有效

Question

我正在建立一个网站，但遇到了问题。我在网上搜索了几个小时，但没有找到答案。

最初 - 在查询响应媒体的最后阶段 - 我制作了一个单一且独特的 .css 并且在内部我使用 @media only screen 和 (...) {} 划分了分辨率类别 等。但是我不得不放弃这种方式，因为有些事情是重叠的。例如，虽然我的分辨率为 1900 像素宽度，但浏览器将采用较低分辨率的规则。

所以，我决定把.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 中的视口(viewport)，一切正常。因此，我继续在 Altervista 上发布以查看网络上的结果。但是，在这一点上，无论是在智能手机、电脑还是改变视口(viewport)，我都得到了想要的结果。

通过 Firefox 分析发布的页面，唯一被识别的 css 文件是 bootstrap css。但是，例如，在该文件中没有任何关于 320px 分辨率的信息 - 然而就好像他忽略了我的 320-480.css 文件一样。

一开始以为是相对URL的错误，其实不是。

我出不去。有人会知道帮助我吗？提前谢谢你。

Answer 1

在你的<link>标记在 href参数你有一个像 href="/css/media/320-480.css" 这样的字符串但你需要有 href="css/media/320-480.css" .没有/在文件夹名称之前。

Here一个很好的演示，媒体查询是如何工作的，请查看!

/*
	 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>