媒体查询CSS仅在本地和网络上工作

Question

I'm building a website but I have a problem. I've searched on the web for hours but found no answer.

Initially - during the last phase of query responsive media - I've made a single and unique .css and inside I've divided the categories of resolutions using @media only screen and (...) {} etc. But I had to discard this way because some things overlap. For example, although I was in a resolution 1900px width, the browser was going to take the rules of a lower resolution.

So, I decided to separate the .css files according to the resolution (some css relate to the range of resolutions, others are specific resolutions). So, once created the css files, I've added this in the of html document:

    <!-- 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">

Trying to change the viewport in Firefox, all worked fine. So, I continued publishing on Altervista to see the result on the network. But, at this point, nor in the smartphone, nor the computer, nor changing the viewport, I get the desired result.

Analyzing the published page via Firefox, the only css file that is recognized is that of the bootstrap css. But, for example, in that file there aren't anything about the resolution of 320px - and yet it is as if he ignore my 320-480.css file.

At first I thought it was an error of relative URLs, but it doesn't.

I can not get out. Someone would know help me? Thank you in advance.

Answer 1

In your <link> tage in href argument you have a string like href="/css/media/320-480.css" but you need to have href="css/media/320-480.css" . Without / before folder name.

Here a nice demo, how media queries works, please check it!

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

Answer 2

The screenshot you attached is pretty clear. It states that the media queries you are trying to use have been deprecated and should no longer be used. For example 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.

Also see this other StackOverflow question: Should I use max-device-width or max-width?

---

You should also be able to check your browser dev tools network tab to see if your CSS files are even being loaded, and if there are any errors trying to load the files.