I have done with my HTML website and completed responsive design using CSS media queries. Now if i made any changes in any devices means it is affecting another device view. So can anyone provide me a correct order of media queries to resolve my issue. I have mentioned my CSS media query code below.
/*Responsive CSS*/
#media only screen and (min-width : 768px) and (max-width : 1280px) { }
#media only screen and (min-device-width : 1281px) and (max-device-width : 1380px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1) { }
/* iPad (landscape) ----------- */
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1) { }
#media only screen and (min-device-width: 411px) and (max-device-width : 823px) and (orientation: landscape) { }
/* iPad (Portrait & landscape) ----------- */
#media (max-width: 1024px) { }
/*Mobile Phones*/
#media (max-width: 767px) { }
/* ----------- iPhone 4 and 4S ----------- */
/* Portrait */
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { }
/* Samsung Galaxy Note 3 */
#media screen and (min-device-width: 320px) and (min-device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {}
/* ----------- Galaxy S3 ----------- */
/* Portrait */
#media screen and (min-device-width: 320px) and (min-device-height: 640px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) { }
/* ----------- iPhone 6+, 7+ and 8+ ----------- */
/* Portrait */
#media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) { }
#media only screen and (min-device-width : 1024px) and (max-device-width : 1380px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) {}
/* iPad Portrait */
#media only screen and (min-device-width:768px) and (max-device-width:1023px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) { }
/* ----------- iPhone X ----------- */
/* Landscape */
#media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) { }
/* ----------- Galaxy S4, S5 and Note 3 ----------- */
/* Landscape */
#media screen and (min-device-width: 320px) and (max-device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {}
/* ----------- Galaxy S3 ----------- */
/* Landscape */
#media screen and (min-device-width: 320px) and (max-device-height: 640px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape) { }
/* ----------- iPhone 6+, 7+ and 8+ ----------- */
/* Landscape */
#media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) { }
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Landscape */
#media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { }
/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */
/* Landscape */
#media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}
/* ----------- iPhone 4 and 4S ----------- */
/* Landscape */
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}
Make general media queries instead of exact queries for all kinds of devices.
This always helps out Media Queries, I'd suggest looking here just to get an idea/experiment with it first before you target all your elements.
Related
I have different media queries for different devices, each of them works fine (if I leave only 1 of them), but if I put all media queries in my code only query with for large screen devices forks fine.
this one works fine:
#media screen and (max-width: 1280px), screen and (max-height: 800px) {...}
and these don't work at all
#media screen and (max-width: 640px), screen and (max-height: 360px) {...}
#media screen and (max-width: 360px), screen and (max-height: 640px) {...}
I need to make media query for every device (including landscape and normal mode).
How should I do this?
#media (max-height: 640px) and (max-width: 360px) {
/* CSS stuff */
}
#media (max-height: 360px) and (max-width: 640px) {
/* CSS stuff */
}
try to do it like this.
add this if you havent
<meta name="viewport" content="width=device-width, initial-scale=1.0">
you can also nest queries
#media screen and (min-height: 40px) {
#media screen and (min-width: 50px) {
/*enter css here to apply for both condition*/
}
}
Visit this link. Media Queries For Standard Devices.
Sample:
/* ----------- Non-Retina Screens ----------- */
#media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* ----------- Retina Screens ----------- */
#media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi) {
}
See this too.
/* 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 */
}
/**********
iPad 3
**********/
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
/* Styles */
}
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
/* 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 (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
/* Styles */
}
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
/* Styles */
}
/* iPhone 5 ----------- */
#media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
#media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
/* iPhone 6 ----------- */
#media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
#media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
/* iPhone 6+ ----------- */
#media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
#media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
/* Samsung Galaxy S3 ----------- */
#media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
#media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
/* Samsung Galaxy S4 ----------- */
#media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
/* Styles */
}
#media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
/* Styles */
}
/* Samsung Galaxy S5 ----------- */
#media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
/* Styles */
}
#media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
/* Styles */
}
I was trying some queries like "max/min width", "orientation portrait/landscape" "pixel ratio.." sharing in stack, which should work for mobile devices. Almost all, doesn't work with my HTC with hppi resolution and as a guest it doesn't work with other hppi devices. At last I found code like that:
#media only screen and (min-resolution: 117dpi) and (max-resolution: 119dpi), only screen and (min-resolution: 131dpi) and (max-resolution: 133dpi), only screen and (min-resolution: 145dpi) and (max-resolution: 154dpi), only screen and (min-resolution: 162dpi) and (max-resolution: 164dpi), only screen and (min-resolution: 169dpi) {}
#media only screen and (min-resolution: 165dpi) and (max-resolution: 168dpi), only screen and (min-resolution: 155dpi) and (max-resolution: 160dpi), only screen and (min-resolution: 134dpi) and (max-resolution: 144dpi), only screen and (min-resolution: 120dpi) and (max-resolution: 130dpi), only screen and (max-resolution: 116dpi) {}
This one works on all devices, but doesn't react when I scale the browser window.
How do I make my queries properly for all the states?
I don't know why you're so specific with your CSS targeting, but, Chris Coyier at CSS-tricks wrote a really good - slightly outdated - reference for almost all devices.
/* ----------- iPhone 4 and 4S ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 5 and 5S ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 6 ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 6+ ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {
}
/* Portrait */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
}
/* ----------- Galaxy S3 ----------- */
/* Portrait and Landscape */
#media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2) {
}
/* Portrait */
#media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
#media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- Galaxy S4 ----------- */
/* Portrait and Landscape */
#media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
}
/* Portrait */
#media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
#media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
}
/* ----------- Galaxy S5 ----------- */
/* Portrait and Landscape */
#media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
}
/* Portrait */
#media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
#media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
}
/* ----------- HTC One ----------- */
/* Portrait and Landscape */
#media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
}
/* Portrait */
#media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
#media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
}
/* ----------- iPad mini ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Portrait */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Portrait */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* ----------- Galaxy Tab 10.1 ----------- */
/* Portrait and Landscape */
#media
(min-device-width: 800px)
and (max-device-width: 1280px) {
}
/* Portrait */
#media
(max-device-width: 800px)
and (orientation: portrait) {
}
/* Landscape */
#media
(max-device-width: 1280px)
and (orientation: landscape) {
}
/* ----------- Asus Nexus 7 ----------- */
/* Portrait and Landscape */
#media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332) {
}
/* Portrait */
#media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: portrait) {
}
/* Landscape */
#media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: landscape) {
}
/* ----------- Kindle Fire HD 7" ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5) {
}
/* Portrait */
#media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: landscape) {
}
/* ----------- Kindle Fire HD 8.9" ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5) {
}
/* Portrait */
#media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: landscape) {
}
/* ----------- Non-Retina Screens ----------- */
#media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* ----------- Retina Screens ----------- */
#media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi) {
}
/* ----------- Apple Watch ----------- */
#media
(max-device-width: 42mm)
and (min-device-width: 38mm) {
}
/* ----------- Moto 360 Watch ----------- */
#media
(max-device-width: 218px)
and (max-device-height: 281px) {
}
For a more general approach I would use something the similar to the following Pen by David Gilbertson
#media (max-width: 599px) {
.phone-only {
/* style goes here */
}
}
#media (min-width: 600px) and (max-width: 899px) {
.tablet-portait-only {
/* style goes here */
}
}
#media (min-width: 600px) {
.tablet-portrait-up {
/* style goes here */
}
}
#media (min-width: 900px) and (max-width: 1199px) {
.tablet-landscape-only {
/* style goes here */
}
}
#media (min-width: 900px) {
.tablet-landscape-up {
/* style goes here */
}
}
#media (min-width: 1200px) and (max-width: 1799px) {
.desktop-only {
/* style goes here */
}
}
#media (min-width: 1200px) {
.desktop-up {
/* style goes here */
}
}
#media (min-width: 1800px) {
.big-desktop-up {
/* style goes here */
}
}
and maybe combine that with DPR media-queries
I am very new to web-front-end-development and I'm trying to develop a responsive website. I have decided on 5 breakpoints, i.e. mobile(2-portrait-landscape) from 320px-768px, tablets(2-portrait-landscape) from 769px-1024px, Desktop-Small from 1025px-1280px, Desktop-Medium from 1281px-1366px, Desktop-Large from 1367px-1680px and Desktop-ExtraLarge from 1681px-Above.
When I tested my first layout, developed on a Mac-Retina-13", the site looked reasonably okay on Safari & Chrome. But, it completely got distorted on an Acer-Windows-15", on Firefox & Chrome.
Then with some research I got to know about http://mydevice.io/ and Device-pixel-ratios.
I would like to know, in order to have a consistent viewing experience, across device regardless of the device resolutions & screen sizes, will I be using the following media queries?
/* Phones - portait */
#media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: portrait) and (min-resolution: 96dpi) {
}
#media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: portrait) and (min-resolution: 144dpi){
}
#media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: portrait) and (min-resolution: 192dpi){
}
#media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: portrait) and (min-resolution: 288dpi){
}
#media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: portrait) and (min-resolution: 384dpi){
}
/* Phones - landscape */
#media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: landscape) and (min-resolution: 96dpi) {
}
#media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: landscape) and (min-resolution: 144dpi) {
}
#media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: landscape) and (min-resolution: 192dpi) {
}
#media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: landscape) and (min-resolution: 192dpi) {
}
#media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: landscape) and (min-resolution: 288dpi) {
}
#media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: landscape) and (min-resolution: 384dpi) {
}
/* Tablets - Portrait */
#media only screen and (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) and (min-resolution: 96dpi) {
}
#media only screen and (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) and (min-resolution: 192dpi) {
}
/* Tablets - Landscape */
#media only screen and (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) and (min-resolution: 96dpi) {
}
#media only screen and (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) and (min-resolution: 192dpi) {
}
/* Desktop - Small */
#media only screen and (min-width: 1025px) and (max-width: 1280px) and (min-resolution: 96dpi) {
}
#media only screen and (min-width: 1025px) and (max-width: 1280px) and (min-resolution: 192dpi) {
}
/* Desktop - Medium */
#media only screen and (min-width: 1281px) and (max-width: 1366px) and (min-resolution: 96dpi) {
}
#media only screen and (min-width: 1281px) and (max-width: 1366px) and (min-resolution: 192dpi) {
}
/* Desktop - Large */
#media only screen and (min-width: 1367px) and (max-width: 1680px) and (min-resolution: 96dpi) {
}
#media only screen and (min-width: 1367px) and (max-width: 1680px) and (min-resolution: 192dpi) {
}
/* Desktop - ExtraLarge */
#media only screen and (min-width: 1681px) and (min-resolution: 96dpi) {
}
#media only screen and (min-width: 1681px) and (min-resolution: 192dpi) {
}
Will I have to use these 23 media-queries? Am I going wrong somewhere?
Here's a sample of desired outputResponsive Site Layout
can you post a link to the website or a link to a jfiiddle with your code? or edit your question and hit CTRL + M and paste all of your code into the snipet box that opens? If you use the Bootstrap code your site will be mobile responsive. If you are coding it yourself use these http://codepen.io/mlegg10/pen/JKdOaj
/* 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 */
}
/* iPhone 6 landscape */
#media only screen and (min-device-width: 375px)
and (max-device-width: 667px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2)
{ }
/* iPhone 6 portrait */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2)
{ }
/* iPhone 6 Plus landscape */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 3)
{ }
/* iPhone 6 Plus portrait */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 3)
{ }
/* iPhone 6 and 6 Plus */
#media only screen
and (max-device-width: 640px),
only screen and (max-device-width: 667px),
only screen and (max-width: 480px)
{ }
/* Apple Watch */
#media
(max-device-width: 42mm)
and (min-device-width: 38mm)
{ }
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I am working on a responsive web page, how can I make it to adjust proportionally to different screen sizes specifically target a tablet size and a larger screen in css.
Use this. Add all of the code to the bottom of your css page.
[
/*
Based on:
1. http://stephen.io/mediaqueries
2. https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
*/
/* iPhone 6 in portrait & landscape */
#media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) {
}
/* iPhone 6 in landscape */
#media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : landscape) {
}
/* iPhone 6 in portrait */
#media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait) {
}
/* iPhone 6 Plus in portrait & landscape */
#media only screen
and (min-device-width : 414px)
and (max-device-width : 736px) {
}
/* iPhone 6 Plus in landscape */
#media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : landscape) {
}
/* iPhone 6 Plus in portrait */
#media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : portrait) {
}
/* iPhone 5 & 5S in portrait & landscape */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
}
/* iPhone 5 & 5S in landscape */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
}
/* iPhone 5 & 5S in portrait */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
}
/*
iPhone 2G, 3G, 4, 4S Media Queries
It's noteworthy that these media queries are also the same for iPod Touch generations 1-4.
*/
/* iPhone 2G-4S in portrait & landscape */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
}
/* iPhone 2G-4S in landscape */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape) {
}
/* iPhone 2G-4S in portrait */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : portrait) {
}
/* iPad in portrait & landscape */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
}
/* iPad in landscape */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
}
/* iPad in portrait */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
}
/* Galaxy S3 portrait and landscape */
#media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2) {
}
/* Galaxy S3 portrait */
#media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Galaxy S3 landscape */
#media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* Galaxy S4 portrait and landscape */
#media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
}
/* Galaxy S4 portrait */
#media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Galaxy S4 landscape */
#media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
}
/* Galaxy S5 portrait and landscape */
#media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
}
/* Galaxy S5 portrait */
#media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Galaxy S5 landscape */
#media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
}
/* HTC One portrait and landscape */
#media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
}
/* HTC One portrait */
#media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* HTC One landscape */
#media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
}
/*
iPad 3 & 4 Media Queries
If you're looking to target only 3rd and 4th generation Retina iPads
(or tablets with similar resolution) to add #2x graphics,
or other features for the tablet's Retina display, use the following media queries.
*/
/* Retina iPad in portrait & landscape */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Retina iPad in landscape */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Retina iPad in portrait */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) {
}
/*
iPad 1 & 2 Media Queries
If you're looking to supply different graphics or choose different typography
for the lower resolution iPad display, the media queries below will work
like a charm in your responsive design!
*/
/* iPad 1 & 2 in portrait & landscape */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* iPad 1 & 2 in landscape */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* iPad 1 & 2 in portrait */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* iPad mini in portrait & landscape */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* iPad mini in landscape */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* iPad mini in portrait */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Galaxy Tab 10.1 portrait and landscape */
#media
(min-device-width: 800px)
and (max-device-width: 1280px) {
}
/* Galaxy Tab 10.1 portrait */
#media
(max-device-width: 800px)
and (orientation: portrait) {
}
/* Galaxy Tab 10.1 landscape */
#media
(max-device-width: 1280px)
and (orientation: landscape) {
}
/* Asus Nexus 7 portrait and landscape */
#media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332) {
}
/* Asus Nexus 7 portrait */
#media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: portrait) {
}
/* Asus Nexus 7 landscape */
#media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: landscape) {
}
/* Kindle Fire HD 7" portrait and landscape */
#media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5) {
}
/* Kindle Fire HD 7" portrait */
#media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: portrait) {
}
/* Kindle Fire HD 7" landscape */
#media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: landscape) {
}
/* Kindle Fire HD 8.9" portrait and landscape */
#media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5) {
}
/* Kindle Fire HD 8.9" portrait */
#media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: portrait) {
}
/* Kindle Fire HD 8.9" landscape */
#media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: landscape) {
}
/* Laptops non-retina screens */
#media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Laptops retina screens */
#media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi) {
}
/* Apple Watch */
#media
(max-device-width: 42mm)
and (min-device-width: 38mm) {
}
/* Moto 360 Watch */
#media
(max-device-width: 218px)
and (max-device-height: 281px) {
}
][1]
What are the best width ranges for detecting media queries in a responsive design?
I would like to cover all Desktop/Laptop monitors( with one orientation) in 4 media queries but I do not know if it is possible for example: small monitors, medium monitors, large and extra large monitors.
For example in this code
/* Desktops and laptops ----------- */
#media only screen and (min-width : 1224px) {}
/* Large screens ----------- */
#media only screen and (min-width : 1824px) {}
I think we need still to device the Desktops and laptops media into three sub media as small (like 13" to 14 laptops), medium (like 15 to 17) and large (over 22#). I know that the browser resolution is different than screen resolutions but let's say we have browsers in full-screen mode in all formats.
Try this one with retina display
/* 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 */
}
Update
/* 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 */
}
/* iPad 3 (landscape) ----------- */
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
/* Styles */
}
/* iPad 3 (portrait) ----------- */
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen and (min-width: 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen and (min-width: 1824px) {
/* Styles */
}
/* iPhone 4 (landscape) ----------- */
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
/* Styles */
}
/* iPhone 4 (portrait) ----------- */
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
/* Styles */
}
/* iPhone 5 (landscape) ----------- */
#media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
/* iPhone 5 (portrait) ----------- */
#media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
/* iPhone 6 (landscape) ----------- */
#media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
/* iPhone 6 (portrait) ----------- */
#media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
/* iPhone 6+ (landscape) ----------- */
#media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
/* iPhone 6+ (portrait) ----------- */
#media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
/* Samsung Galaxy S3 (landscape) ----------- */
#media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
/* Samsung Galaxy S3 (portrait) ----------- */
#media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
/* Samsung Galaxy S4 (landscape) ----------- */
#media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
/* Styles */
}
/* Samsung Galaxy S4 (portrait) ----------- */
#media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
/* Styles */
}
/* Samsung Galaxy S5 (landscape) ----------- */
#media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
/* Styles */
}
/* Samsung Galaxy S5 (portrait) ----------- */
#media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
/* Styles */
}
You can take a look here for a longer list of screen sizes and respective media queries.
Or go for Bootstrap media queries (archived):
/* Large desktop */
#media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* Landscape phones and down */
#media (max-width: 480px) { ... }
Update:
Bootstrap 5 breakpoints
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
Additionally you might wanty to take a look at Foundation's media queries with the following default settings:
// Media Queries
$screenSmall: 768px !default;
$screenMedium: 1279px !default;
$screenXlarge: 1441px !default;
Update:
Foundation 6 breakpoints
$breakpoints: (
small: 0,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,
);
best bet is targeting features not devices unless you have to, bootstrap do well and you can extend on their breakpoints, for instance targeting pixel density and larger screens above 1920