I want to create generic responsive templates,
which media-queries i have to use if i want to detect all the devices sizes?
Check this Common CSS Media Queries Break Points
/*------------------------------------------
Responsive Grid Media Queries - 1280, 1024, 768, 480
1280-1024 - desktop (default grid)
1024-768 - tablet landscape
768-480 - tablet
480-less - phone landscape & smaller
--------------------------------------------*/
#media all and (min-width: 1024px) and (max-width: 1280px) { }
#media all and (min-width: 768px) and (max-width: 1024px) { }
#media all and (min-width: 480px) and (max-width: 768px) { }
#media all and (max-width: 480px) { }
/* Portrait */
#media screen and (orientation:portrait) { /* Portrait styles here */ }
/* Landscape */
#media screen and (orientation:landscape) { /* Landscape styles here */ }
/* CSS for iPhone, iPad, and Retina Displays */
/* Non-Retina */
#media screen and (-webkit-max-device-pixel-ratio: 1) {
}
/* Retina */
#media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
}
/* iPhone Portrait */
#media screen and (max-device-width: 480px) and (orientation:portrait) {
}
/* iPhone Landscape */
#media screen and (max-device-width: 480px) and (orientation:landscape) {
}
/* iPad Portrait */
#media screen and (min-device-width: 481px) and (orientation:portrait) {
}
/* iPad Landscape */
#media screen and (min-device-width: 481px) and (orientation:landscape) {
}
I highly recomend using Bootstrap. Faster development. Also documentation is very complete.
http://getbootstrap.com/getting-started/
As for your question, you have this example:
/*Anything outside of media queries is for MOBILE
This is Mobile first approach.
*/
/* Small devices (tablets, 768px and up) */
#media (min-width: 768px) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: 992px) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: 1200px) { ... }
Check if these websites help you out:
http://24ways.org/2011/conditional-loading-for-responsive-designs/
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Related
This is my first attempt at using html and css. I know there’s many mistakes in the code, but if someone could point me in a direction to get it viewable in mobile, I’d be very appreciative.
Use this code. Change styles based on the device you are using
<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>
I am working with a responsive website.
I want to design for all large desktop.
But I don't know the exact media query for large desktop.
Try the following, they are the default bootstrap 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'm making this website & I made the media settings for mobile, tablet, laptop, desktop. It looked good in all other phones. I havent' checked yet on actual tablet, but its fine on the chrome browser emulator.
However, my friend checked out the site in his Iphone6 Plus and the navbar settings were messed up. Btw, I'm using Bootstrap 3 for the framework.
I'm confused why my code is working on other phones but not on Iphone6 Plus.
Maybe even Iphone6 have the same problem?
Here is my media css:
/* Tablet (Portrait) */
#media only screen and (max-width : 768px) and (orientation: portrait) {
}
/* Phones (Portrait) */
#media only screen and (max-width : 480px) and (orientation: portrait) {
}
/* Phones (Landscape) */
#media only screen and (max-width : 480px) and (orientation: landscape){
}
/* Tablet (Landscape)*/
#media only screen and (max-width :1100px) and (orientation: landscape) {
}
/* Medium Devices, Desktops and tablet landscape*/
#media only screen and (min-width : 992px) {
}
/* Large Screens, Large Desktops */
#media only screen and (min-width : 1601px) {
}
I already checked online that the pixel density & resolution is quite different for Iphone6 Plus. We've tried the solution from here : iPhone 6 and 6 Plus Media Queries
So far, even those queries didn't fix our problem. It seems like there were no changes. I hope this problem could be resolved quickly, I appreciate your help.
Everything comes down to device-pixel-ratio which used to be 2x for iphones. New iphone 6 plus has 3x retina display
/* 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)
{
/* Your CSS */
}
/* 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)
{
/* Your CSS */
}
/* 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)
{
/* Your CSS */
}
/* 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)
{
/* Your CSS */
}
/* 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)
{
/* Your CSS */
}
Further more, an article from CSS | MDN to add more browsers support and a fallback.
link : https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
#media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */
(min--moz-device-pixel-ratio: 2), /* Older Firefox browsers (prior to Firefox 16) */
(min-resolution: 2dppx), /* The standard way */
(min-resolution: 192dpi) /* dppx fallback */
A list of devices with their respective device-pixel-ratio.
link : https://bjango.com/articles/min-device-pixel-ratio/
I've got these media queries set. But how do I edit this to have separate media queries set for the portrait, landscape versions (e.g.: iPad, iPhone)?
#media only screen and (min-width : 1824px) {}
#media only screen and (min-width: 1200px) and (max-width: 1823px) {}
#media only screen and (min-width: 992px) and (max-width: 1199px) {}
#media only screen and (min-width: 768px) and (max-width: 991px) {}
#media only screen and (max-width: 767px) {}
#media only screen and (max-width: 480px) {}
#media only screen and ( orientation: portrait ) {}
#media only screen and ( orientation: landscape) {}
I think thats what you are looking for.
Edit:
I think by fit in to my css you mean this:
#media (max-width: whatever) and (orientation: landscape) {}
If you are asking for a suggestion that when to use portrait or landscape, then use landscape when width of viewport is more and vice versa.
max-width: 1024px will set an upper limit and it will not interfere with rules for range: 1200px-1823px.
We have to add orientation: portrait and orientation: landscape to your media screen.
iPad Landscape and Portrait
/* iPad Portrait */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
/* ur CSS */
}
/* 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) {
}
For latest iPads use pixel ratio:2 (Retina display) .
-webkit-min-device-pixel-ratio: 2
Similarly for iPhone's, for iPhone's you have to set media for 4 different screens , < iPhone 4S , iPhone 5S and iPhone 6 and 6 plus versions.
I'm trying to allow a container that holds five images per row to change the size of it's width if the browser width is smaller than the five images, including the margins etc.
I've added the following media query, and all works well when browsing on a desktop computer (resizing browser to less than 1080px in width)...The container changes width and the content is centered.
However, when browsing on mobile device (iPhone 4 and S4) it doesn't work. Thoughts?
CSS
.main-width {
margin: 20px auto;
max-width: 1080px;
min-width: 960px;
}
#media screen and (max-width: 1080px) {
.main-width {
max-width: 870px !important;
min-width: 870px !important;
}
}
This is likely because you don't have a viewport set.
Place the following meta tag in the <head> element of your document.
<meta name="viewport" content="width=device-width, initial-scale=1">
For more information, read "Using the viewport meta tag to control layout on mobile browsers " - (mdn)
You can use (max-device-width:1080px) instead. It passes viewport and applys on device width.
Give this a try this is a modified one that I use:
/* Media queries */
/* Desktop Resolutions */
/* 2k */
#media screen and (max-width: 2048px) {
}
/* 1080 HD */
#media screen and (max-width: 1920px) {
}
/* Wide SXGA/ Apple Powerbook G4 */
#media screen and (max-width: 1440px) {
}
/* HDTV 720p/1080i monitors */
#media only screen and (max-width: 1366px) {
}
#media only screen and (max-width: 1024px) {
}
#media only screen and (max-width: 768px) {
}
#media only screen and (max-width: 480px) {
}
#media only screen and (max-width: 320px) {
}
/* Device Width & Density */
/* iPad Mini */
#media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1) {
}
/* iPad 2 and 3 Landscape */
#media (max-device-width: 1024px) and (orientation: landscape) {
}
/* iPad 2 and 3 Portrait */
#media (max-device-width: 768px) and (orientation: portrait) {
}
/* iPad 4 */
#media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) {
}
/* iPhone 4 */
#media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
}
/* iPhone 5 */
#media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) {
}
/* HTC One */
#media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
}
/* Samsung Galaxy S2 */
#media screen and (device-width: 320px) and (device-height: 534px) and (-webkit-device-pixel-ratio: 1.5) {
}
/* Samsung Galaxy S3 */
#media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) {
}
/* Samsung Galaxy S4 */
#media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
}