CSS媒体查询未加载

Question

I'm writing a static website and testing it locally. I have written a media query to change the layout a little bit so that it is much nicer to look at on a smartphone. With the media query my aim is to change the text and the profile photo from being side by side to being one followed by the other.

My issue is that when I load the HTML file on Chrome or Firefox and resize the window, the layout does not change and I cannot figure out how to fix it. Any help would be much appreciated. Find my code below.

For my standard CSS I have this (a small snippet):

#about-text {
    /*A div containing paragraphs and a table*/
    display: inline-block;
    width: 50%;
}

#profile-photo {
    /*An img tag after the closing about-text div*/
    border: 4px solid #1abc9c;
    display: inline;
    float: right;
    margin: 8% 0% 0% 0%;
    max-width: 40%;
}

And then I have a media query and the corresponding CSS:

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

#about-text {
    /*A div containing paragraphs and a table*/
    display: block;
    width: 50%;
}

#profile-photo {
    /*An img tag after the closing about-text div*/
    border: 4px solid #1abc9c;
    display: block;
    float: right;
    margin: 8% 0% 0% 0%;
    max-width: 40%;
}
}

Answer 1

You are using min-device-width and max-device-width which only takes into the account the device's screen size. Use min-width and max-width and it will work in your browser when you resize.

Example:

.testDiv {
    color: green;
}

@media (min-width : 320px) and (max-width : 480px) {
    .testDiv {
       color: red;
   }
}

http://jsfiddle.net/ZUPD2/

Answer 2

也许是因为媒体查询块没有结尾括号？