Using the "device" keyword targets physical dimension of the screen, not the width of the browser window.
For example:
@media only screen and (max-device-width: 480px) {
/* STYLES HERE for DEVICES with physical max-screen width of 480px */
}
Versus
@media only screen and (max-width: 480px) {
/* STYLES HERE for BROWSER WINDOWS with a max-width of 480px.
This will work on desktops when the window is narrowed. */
}
I've found the best method is to write your default CSS for the older browsers, as older browsers including i.e. 5.5, 6, 7 and 8. Can't read @media. When I use @media I use it like this:
<style type="text/css">
/* default styles here for older browsers.
I tend to go for a 600px - 960px width max but using percentages
*/
@media only screen and (min-width:960px){
/* styles for browsers larger than 960px; */
}
@media only screen and (min-width:1440px){
/* styles for browsers larger than 1440px; */
}
@media only screen and (min-width:2000px){
/* for sumo sized (mac) screens */
}
@media only screen and (max-device-width:480px){
/* styles for mobile browsers smaller than 480px; (iPhone) */
}
@media only screen and (device-width:768px){
/* default iPad screens */
}
/* different techniques for iPad screening */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
/* For portrait layouts only */
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
/* For landscape layouts only */
}
</style>
But you can do whatever you like with your @media, This is just an example of what I've found best for me when building styles for all browsers.
Good Luck!
![How to Validate a URL in PHP? [Easy]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfJ5nSKw71z6ogGtWqjvKxhOmeOjQXh1dFbR8KjIGp9HLKE9BFIoxLTlmcXYtzqkBMVLmJkFWfCk7LtvzL2uVYh7LICK-EM15H56X_arIRccW3hYbBzkf3MAB0k84uKk2Fc5aTEUJOrUM/s72-c/url.jpg)
Posts
No comments:
Post a Comment
** Comments are reviewed, but not delayed posted **