问题
I'm working on a site that will make it responsive. Media queries are working on the device it self but on browser resize it's not taking effect. This is my code. Did I missed something? Thanks in advance!
@media only screen and (min-device-width : 320px) and (max-device-width :
480px) and (orientation: portrait) {
//Code Here
}
@media only screen and (min-device-width : 320px) and (max-device-width :
480px) and (orientation: landscape) {
//Code Here
}
回答1:
It's because you are targeting device-width.
You need to change your @media queries to:
@media only screen and (min-width : 320px) and (max-width :
480px) and (orientation: portrait) {
//Code Here
}
Also, the orientation won't work in this instance (in your browser).
回答2:
When you use 'device' you're telling it to base it off the resolution of the actual screen, rather than the browser width (which is what min-width achieves).
Refer to the following question in regards to the difference between using min-width with/without device.
CSS media queries min-width and min-device-width conflicting?
来源：https://stackoverflow.com/questions/36050581/media-query-not-taking-effect-on-browser-resize