If suppose my device width is 800px, which media query will apply (execute)?
#media only screen and (min-width : 320px){
}
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px){
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px){
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px){
}
/* Large Devices, Wide Screens */
#media only screen and (min-width : 1200px){
}
If i write the css for the device having screen size is between 768px to 991px and i declare it's css in the media query
#media only screen and (min-width : 768px){
}
then first two media queries will also gets applied how to avoid this.
You can use this three media query for 800px of width
based on your option
#media only screen and (min-width : 320px){
}
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px){
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px){
}
#screen-xs-max: 767px;
#screen-sm-min: 768px;
#screen-sm-max: 991px;
#screen-md-min: 992px;
#screen-lg-min: 1200px;
#screen-md-max: 1199px;
//xs only
#media(max-width: #screen-xs-max) {}
//small and up
#media(min-width: #screen-sm-min) {}
Related
How do I build a website at two screen widths: 375px and 1024px? the website need not respond to widths between the two.
#media only screen and (min-width : 375px) and (max-width : 1024px)
As far as I know this tag media work between 375 and 1024. Perhaps using breakpoint is the right approach. Any suggestion?
It is always best to design your CSS mobile-first, which means that your CSS file looks a little like this:
CSS:
// Basic CSS
div {
height: 200px;
width: 200px;
background-color: yellow;
}
#media screen and (min-width: 375px) {
div {
height: 150px;
}
}
#media screen and (min-width: 1024px) {
div {
height: 100px;
background-color: red;
}
This way you have a div that renders in three different ways on your breakpoints
0 - 374px it's a square of 200x200 pixels with a yellow background
375px - 1023px it's a rectangle of 150x200 pixels with a yellow background
1024px and up it's a rectangle of 100x200 pixels with a red background
This way you don't repeat yourself too much, your code stays clean and you only override what is necessary.
I am giving media queries for all devices with portrait mode also . I am given the media query CSS using breakpoint also. Use this media query for the better use and also the portrait devices include in this answer:
/*
##Device = Desktops
##Screen = 1281px to higher resolution desktops
*/
#media (min-width: 1281px) {
//CSS
}
/*
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
*/
#media (min-width: 1025px) and (max-width: 1280px) {
//CSS
}
/*
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px
*/
#media (min-width: 768px) and (max-width: 1024px) {
//CSS
}
/*
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
*/
#media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
//CSS
}
/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
*/
#media (min-width: 481px) and (max-width: 767px) {
//CSS
}
/*
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
*/
#media (min-width: 320px) and (max-width: 480px) {
//CSS
}
There are bootstrap 3 media breakpoints
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
#media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
#media only screen and (min-width : 1200px) {
}
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
#media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
#media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px) {
}
I just dont understand why in mobile first min-width and max-width in non-mobile described as equal. I mean for example min-width for tablets = 768px, so it means all widths > 768, and in max-width 768 for tablets too, but it means < 768px, it looks like range for tablets in mobile-first = 768-991px and in non-mobile 481-768
Bootstrap and in general all media queries usually define width breakpoints with ranges. In this case, in the css you showed, breakpoints with the same header comment are synonyms.
You can define better with the two options like this (for example):
/* Extra Small Devices, Phones */
#media only screen and (max-width: 480px) and (min-width: 321px) { }
You also can use another (and the posibility to concatenate) selectors to specify the screen position or other parameters. Here are some of this:
height
orientation
color-index
monochrome
resolution
scan
grid
I have looked at similar questions here and did not find a suitable answer, so forgive me that this question may appear at first to be a duplicate of others here.
My screen resolution is 1366px wide
I have default styles, and then several media queries at the end of the stylesheet, in the following order:
#media only screen and (max-width:1920px) {
}
#media only screen and (max-width:1680px), only screen and (max-device-width: 1680px) {
}
#media only screen and (max-width:1280px), only screen and (max-device-width: 1280px) {
}
#media only screen and (max-width:1024px), only screen and (max-device-width: 1024px) {
}
#media only screen and (max-width: 800px), only screen and (max-device-width: 800px) {
}
#media screen and (min-device-width: 768px) and (max-device-width: 1024px){
}
On my machine, the styles from the very first media query (max-width: 1920px) are being applied. When I inspect in Firebug, it gives me the line # coinciding with a declaration within that first media query.
This is happening across several browsers (Firefox, Chrome)
But, my viewport is just 1366px wide - so, I would expect either max-width:1280px or max-width:1680px to match, and not 1920px.
When I resize to 1024x768, or 800x600, the correct media query styles are applied.
What am I doing wrong?
I've looked for any missing bracket closures and found none. I've validated using the W3C CSS validator service, and checked as Correct, no errors found.
The issue is your logic.
Your first query states max-width: 1920px. Indeed, because your desktop is at 1366px, it is smaller than 1920px, so it is a valid query. Consider this a catch all after your 1680px.
I would suggest re-ordering and starting with smallest, most constraining queries first:
#media screen and (min-device-width: 768px) and (max-device-width: 1024px){
}
#media only screen and (max-width: 800px), only screen and (max-device-width: 800px) {
}
#media only screen and (max-width:1024px), only screen and (max-device-width: 1024px) {
}
#media only screen and (max-width:1280px), only screen and (max-device-width: 1280px) {
}
#media only screen and (max-width:1680px), only screen and (max-device-width: 1680px) {
}
#media only screen and (max-width:1920px) {
}
An even better approach would be to use min-width for all of your queries:
#media screen and (min-device-width: 768px) and (max-device-width: 1024px){
}
#media only screen and (min-width: 800px), only screen and (min-device-width: 800px) {
}
#media only screen and (min-width:1024px), only screen and (min-device-width: 1024px) {
}
#media only screen and (min-width:1280px), only screen and (min-device-width: 1280px) {
}
#media only screen and (min-width:1680px), only screen and (min-device-width: 1680px) {
}
#media only screen and (min-width:1920px) {
}
As a best practice, here is Bootstraps queries:
/*==================================================
= Bootstrap 3 Media Queries =
==================================================*/
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
#media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
#media only screen and (min-width : 1200px) {
}
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
#media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
#media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px) {
}
You want to use min-width not max-width. Since you're query is applying to any screen up to 1920px wide, it is always being applied when your screen is no larger than 1366px wide. max-width == <=, min-width == >=.
/* apply these selectors when the width is equal to or greater than 1920px */
#media only screen and (min-width:1920px) {
}
i want to design a web site.but tell me what are the sizes i can use for responsive website design.
that sizes must contain for mobile,tablets,pcs and other devices..
i want to use them in media queries.. :D
EX for Mobile:
#media only screen and (min-width: 500px) {
}
EX for Tablet:
#media only screen and (min-width: 800px) {
}
Give me some resources that you have about responsive website design and about the sizes which i can use for responsive website design .. :D
like that i want to know what are the reals sizes for these devices that i can use. :D
/* #1- Desktops */
#media (min-width: 980px) { ... }
/* #2- Portrait tablet to landscape and netbooks */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* #3- Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* #4- Landscape phones and down */
#media (max-width: 480px) { ... }
For actual device specifications, check out this link by CSS-tricks..
Here is the full list of media breakpoints
#media all and (max-width: 1690px) { ...}
#media all and (max-width: 1280px) { ...}
#media all and (max-width: 980px) { ... }
#media all and (max-width: 736px) { ... }
#media all and (max-width: 480px) { ... }
Check out for more informations about responsive device sizes : Medium
I hope so it's will help.
This question already has answers here:
Common breakpoints for media queries on a responsive site
(5 answers)
Closed 3 years ago.
I am working on a Responsive Web Site with CSS Media Queries.
Is the following a good organization for devices?
Phone, Ipad (Landscape & Portrait), Desktop and Laptop, Large Screen
What are the common media queries break-point values?
I am planning to use the following breakpoints:
320: Smartphone Portrait
481: Smartphone Landscape
641 or 768 ???: IPad Portrait ???
961: IPad Landscape / Small Laptop ???
1025: Desktop and Laptop
1281: Wide Screen
What do you think? I have a few doubts as ??? points.
Rather than try to target #media rules at specific devices, it is arguably more practical to base them on your particular layout instead. That is, gradually narrow your desktop browser window and observe the natural breakpoints for your content. It's different for every site. As long as the design flows well at each browser width, it should work pretty reliably on any screen size (and there are lots and lots of them out there.)
I've been using:
#media only screen and (min-width: 768px) {
/* tablets and desktop */
}
#media only screen and (max-width: 767px) {
/* phones */
}
#media only screen and (max-width: 767px) and (orientation: portrait) {
/* portrait phones */
}
It keeps things relatively simple and allows you to do something a bit different for phones in portrait mode (a lot of the time I find myself having to change various elements for them).
I'm using 4 break points but as ralph.m said each site is unique.
You should experiment. There are no magic breakpoints due to so many devices, screens, and resolutions.
Here is what I use as a template.
I'm checking the website for each breakpoint on different mobile devices and updating CSS for each element (ul, div, etc.) not displaying correctly for that breakpoint.
So far that was working on multiple responsive websites I've made.
/* SMARTPHONES PORTRAIT */
#media only screen and (min-width: 300px) {
}
/* SMARTPHONES LANDSCAPE */
#media only screen and (min-width: 480px) {
}
/* TABLETS PORTRAIT */
#media only screen and (min-width: 768px) {
}
/* TABLET LANDSCAPE / DESKTOP */
#media only screen and (min-width: 1024px) {
}
UPDATE
As per September 2015, I'm using a better one. I find out that these media queries breakpoints match many more devices and desktop screen resolutions.
Having all CSS for desktop on style.css
All media queries on responsive.css: all CSS for responsive menu + media break points
#media only screen and (min-width: 320px) and (max-width: 479px){ ... }
#media only screen and (min-width: 480px) and (max-width: 767px){ ... }
#media only screen and (min-width: 768px) and (max-width: 991px){ ... }
#media only screen and (min-width: 992px){ ... }
Update 2019: As per Hugo comment below, I removed max-width 1999px because of the new very wide screens.
This is from css-tricks link
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
I can tell you I am using just a single breakpoint at 768 - that is min-width: 768px to serve tablets and desktops, and max-width: 767px to serve phones.
I haven't looked back since. It makes the responsive development easy and not a chore, and provides a reasonable experience on all devices at minimal cost to development time without the need to fear a new Android device with a new resolution you haven't factored in.
Media Queries for Standard Devices
In General for Mobile, Tablets, Desktop and Large Screens
1. Mobiles
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
2. Tablets
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
3. Desktops & laptops
#media only screen
and (min-width : 1224px) {
/* Styles */
}
4. Larger Screens
#media only screen
and (min-width : 1824px) {
/* Styles */
}
In Detail including landscape and portrait
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* Tablets, iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* Tablets, iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* Tablets, iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Reference
Consider using twitter bootstrap's break points.
with such a massive adoption rate you should be safe...
#media only screen and (min-width : 320px) and (max-width : 480px) {/*--- Mobile portrait ---*/}
#media only screen and (min-width : 480px) and (max-width : 595px) {/*--- Mobile landscape ---*/}
#media only screen and (min-width : 595px) and (max-width : 690px) {/*--- Small tablet portrait ---*/}
#media only screen and (min-width : 690px) and (max-width : 800px) {/*--- Tablet portrait ---*/}
#media only screen and (min-width : 800px) and (max-width : 1024px) {/*--- Small tablet landscape ---*/}
#media only screen and (min-width : 1024px) and (max-width : 1224px) {/*--- Tablet landscape --- */}
If you go to your google analytics you can see which screen resolutions your visitors to the website use:
Audience > Technology > Browser & OS > Screen Resolution ( in the menu above the stats)
My site gets about 5,000 visitors a month and the dimensions used for the free version of responsinator.com are pretty accurate summary of my visitors' screen resolutions.
This could save you from needing to be too perfectionistic.
I always use Desktop first, mobile first doesn't have highest priority does it? IE< 8 will show mobile css..
normal css here:
#media screen and (max-width: 768px) {}
#media screen and (max-width: 480px) {}
sometimes some custom sizes. I don't like bootstrap etc.
Instead of using pixels should use em or percentage as it is more adaptive and fluid, better not target devices target your content:
HTML5 rockrs read, mobile first
Keep your code clean and stylesheets logically separated per screen 'media' type config...
1) Using himansu's answer from above as a reference: Common CSS Media Queries Break Points
AND
2) https://www.w3schools.com/css/css3_mediaqueries.asp
your answer would be:
<link rel="stylesheet" media="#media only screen and (min-width : 320px) and (max-width : 480px)" href="mobilePortrait.css">
<link rel="stylesheet" media="#media only screen and (min-width : 481px) and (max-width : 595px)" href="mobileLandscape.css">
Your break points look really good. I've tried 768px on Samsung tablets and it goes beyond that, so I really like the 961px.
You don't necessarily need all of them if you use responsive CSS techniques, like % width/max-width for blocks and images (text as well).