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.
What is the media query for large desktops?
The challenges of optimizing for large-scale displays center around how to scale and manage content.
You need to assume screen width at certain points.
Example: for class "container"
@media screen and (min-width: 1400px) {
.container {
width: 1370px;
}
}
@media screen and (min-width: 1600px) {
.container {
width: 1570px;
}
}
@media screen and (min-width: 1900px) {
.container {
width: 1870px;
}
}
CSS media queries ( media screen )
1) screen
here means the screen of the device itself (not a print
as print
is the common one). But this has same effect as
@media (min-width: 312px)
Just you are specifying that you want the max-width
of the screen
on that the website loaded, that's it
2) the max
means the maximum width of the device screen to which the following styles are applied.
for eg:
@media screen and (max-width: 768px){
//These styles will apply only if the screen size is less than or equal to 768px
}
3) There is no termination. If you have max
and min
with 600px
, then the styles will applied as per the position of the code. The code that comes below will apply (if min
code is at line number 10 and max
code at line number 20 then max
will work)
How does CSS media queries based on pixels work with modern smart phones?
You are confusing screen resolution
with screen width
i.e. A phone's screen width is usually around 200 to 500 CSS pixels.
This famous blog post explains why there was the need for this being introduced: a pixel is not a pixel
Medium also has an excellent explanatory article on the topic.
For high resolutions screens, the so-called device-to-pixel ratio is greater than 1. To calculate the CSS pixel width, this is the formula:
CSSPixelWidth = DevicePixelWidth / DevicePixelRatio
Related Topics
Pure CSS Multi-Level Drop-Down Menu
How to Support Placeholder Attribute in Ie8 and 9
How to Make an Editable Div Look Like a Text Field
Media Queries For Different Zoom Levels of Browser
What Is Currently the Best Way to Get a Favicon to Display in All Browsers That Support Favicons
How to Put Text Over Images in HTML
What's the Difference Between "&Nbsp;" and " "
Scroll Particular Div Contents with Browser's Main Scrollbar
Why Are Button's Discouraged from Navigation
Colspan/Rowspan For Elements Whose Display Is Set to Table-Cell
Angular 5 Formgroup Reset Doesn't Reset Validators
Two Inline-Block, Width 50% Elements Wrap to Second Line
Curved Div With Transparent Top
Soft Hyphen in HTML (<Wbr> VS. &Shy;)
How to Print Background Images in Ff or Ie
Prevent Scroll-Bar from Adding-Up to the Width of Page on Chrome