Why my responsive CSS is not taking media width?

StackOverflow https://stackoverflow.com/questions/18800963

سؤال

As the title's saying, I can't set media screen width-specific CSS for my PHP webpage.

Here is my <head> section of my index.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <title><?php echo SITENAME; ?> - <?php echo SITEDESC; ?></title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0; minimumscale=1.0, maximum-scale=1.0; user-scalable=0;" /> <!-- for responsive coding, the "Viewport" meta tag -->

    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script type='text/javascript' src='scripts/respond.min.js'></script> <!-- for responsive mobile themes -->

    <link type="text/css" rel="stylesheet" href="style.css"/>        
        
</head>

For my HTML element <header> ... </header>, in my CSS (in style.css), I specified:

header{
    background: #1e5799;
    min-height: 40px;
    max-height: 136px;
}

But using "Web Developer" toolbar's Resize » View Responsive Layouts is showing some fall in different width device layouts.

For example:
In my <header> tag, the inner elements are getting out, so I need to increase the height of the header. So I specified in style.css:

/* Media Queries for Different Types of Mobile Devices */

/* Mobile portrait (320 x 480) */

@media all and (max-device-width: 320px) {

    header{
        height: 136px !important;
        background-color: #FF0000;
    }

}

But it's not working. :(

What am I missing about responsive CSS?

EDIT

After the first 2 answers, with their suggestions, I tried using:

@media screen and (max-width: 320px) {

    header{
        height: 136px !important;
        background-color: #FF0000;
    }

}

And yes, I put my media CSS at the bottom of style.css.

I also tried separating the mobile.css as:

<link type="text/css" rel="stylesheet" media="screen and (max-device-width: 480px)" href="css/mobile.css" />

Where I tried placing the following code:

header{
    height: 130px;
}

Still it's not working.

هل كانت مفيدة؟

المحلول

While developing, max-device-width will not help you visualizing the changes on window resize, because this particular media query targets the actual device size (which, on your computer, would be your monitor, not the browser window).

On the other hand, max-width targets the browser window width, so works perfectly on resize.

Unless you want to target specifically smaller devices (and not be responsive on window resize), I would suggest to go for max-width instead.

نصائح أخرى

Check http://codepen.io/anon/pen/iFCHj i normally max-width instead of max-device-width as you get a responsive layout across all devices.

Also, make sure that your responsive layout is beneath the main layout or the browser will ignore the media unless an !important is set on all.

In addition to the other good suggestions, if you check the styling for the full header you have 

header{
background: #1e5799; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMzU0NzEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #1e5799 0%, #135471 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#135471)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #1e5799 0%,#135471 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #1e5799 0%,#135471 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #1e5799 0%,#135471 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #1e5799 0%,#135471 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#135471',GradientType=0 ); /* IE6-8 */

/*border-radius: 8px 8px 0 0;
    -moz-border-radius: 8px 8px 0 0;
    -webkit-border-radius: 8px 8px 0 0;
    -o-border-radius: 8px 8px 0 0;
 */
min-height: 40px;
max-height: 136px;
}

So for the 320 px viewport, in addition to writing new stlying for the height and background color, you need to over-ride the background image and IE filter

To remove the IE filter, something like 

filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);

should be good. You can probably figure out the background gradient.

Good luck!

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top