Media Queries - Mobile vs Desktop Browser
There are a lot of medias out there, and if you want to select only by its properties, use the all
keyword:
@media all and (max-width:480px)
{
/* Styles */
}
Edit:
Combine rules with or:
@media all and (prop1:val1), all and (prop2:val2)
{
/* Styles */
}
Combine rules with and:
@media all and (prop1:val1) and (prop2:val2)
{
/* Styles */
}
Media Queries: How to target desktop, tablet, and mobile?
IMO these are the best breakpoints:
@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
Edit: Refined to work better with 960 grids:
@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
In practice, many designers convert pixels to em
s, largely because em
s afford better zooming. At standard zoom 1em === 16px
, multiply pixels by 1em/16px
to get em
s. For example, 320px === 20em
.
In response to the comment, min-width
is standard in "mobile-first" design, wherein you start by designing for your smallest screens, and then add ever-increasing media queries, working your way onto larger and larger screens.
Regardless of whether you prefer min-
, max-
, or combinations thereof, be cognizant of the order of your rules, keeping in mind that if multiple rules match the same element, the later rules will override the earlier rules.
desktop media query affects the mobile view
The media query needs to encapsulate the rules that it applies to, not the other way around.
@media screen only and (min-width: 50em) {
.split {
display: flex;
}
}
Related Topics
Stopping a CSS Animation But Letting Its Current Iteration Finish
Differencebetween Background-Size: Cover; and Background-Size: 100%;
How to Style Disabled Textarea in IE8
CSS - Font Being Blocked from Cross-Origin Resource Sharing Policy
When to Use "!Important" to Save the Day (When Working with CSS)
Editing Input Type="Search" Pseudo-Element Button ('X')
Create a Beautiful Horizontal Line with CSS Only
Overflow: Overlay Doesn't Work in Firefox
Immediate Child Selector in Less
Is There a Google Chrome-Only CSS Hack
Css3 Transitions on Pseudo-Elements (:After, :Before) Not Working
Why Are Certain CSS Properties Not Applied to A:Visited
Background-Attachment Fixed with Transform Not Working in Firefox
Grid Styling - Overwrite Style of Ag-Grid
How to Stretch Children to Fill Cross-Axis