is there some new standard for using media queries. Or perhaps I should say, some new considerations that should be made.
The CSS tricks article doesn't seem to work very well, as the the 'smart phone landscape' seems to highjack everything.
code i've used taken direct (with the exception of printing what the screens supposedly are:
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
.size:after{ content: "smartphone portrait and landscape";}
body{background-color:#111; color:#fff;}
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
.size:after{ content: "smartphone landscape";}
body{background-color:#222; color:#fff;}
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
.size:after{ content: "smartphones portrait";}
body{background-color:#333; color:#fff;}
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
.size:after{ content: "ipad protrait and landscape";}
body{background-color:#444; color:#fff;}
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
.size:after{ content: "ipad landscape";}
body{background-color:#555; color:#fff;}
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
.size:after{ content: "iPads portrait";}
body{background-color:#666; color:#000;}
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
.size:after{ content: "desktops and laptops";}
body{background-color:#777; color:#000;}
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
.size:after{ content: "largscreens";}
body{background-color:#888; color:#000;}
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
.size:after{ content: "iPhone 4";}
body{background-color:#999; color:#000;}
}
test : www2.iscotest.com/screen.php
Is there just a working standard set for widescreen, desktop (1024), ipad landscape, ipad portrait, mobile portrait and mobile landscape.
thanks!
Just use min-width and max-width
Your link is not showing up, did you add the css meta information?
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Related
I have a site i created , looks greats across all devices and desktop, but I need to set a different viewport for iPad , I want the iPad to get the same width as my desktop version, the desktop version is 1100px wide. so on the iPad it goes off screen. The whole site has been set with percentages and ems up to (max-device-width : 736px), after that the nest up is iPad,and I need to change the viewport
i'm using this: <meta name="viewport" content="width=device-width, initial-scale=1.0">
like i said it works great but, I now need to set the viewport content="width=1100" I can't just do this in css with #mediaquery without having to change a whole lot of other css
how can i use a different viewport for iPad
edit you css and just add the media queries. Here is an example.
/* 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)
{ }
Im curious about leaving the #media definitions empty in my stylesheet and if this could cause some problems rendering the page?
I only want to include those queries for presentation - to show them, that it's possible to go responsive with the queries enabled.
here is my css:
/*************************************************************************************************/
/* Media Queries - Responsive Layout Definitionen */
/*************************************************************************************************/
/* Smartphones (Portrait und 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 und 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 und Laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Große 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 */
}
/*************************************************************************************************/
/* ==================== */
/*************************************************************************************************/
Empty #media rules have no effect on page rendering or stylesheet parsing. Just make sure you open and close them properly.
If you need the details, the relevant portions of the grammar can be found in the spec. But in a nutshell, a #media rule may have zero or more rules nested within, which means it may be empty with no issues.
I'm kind of new to coding with media queries, and I think I have painted myself into a corner, using too many media queries (and probably in the wrong way).
What I want to do is to hide some page elements when the width of the screen or device is smaller than 481px. So in the screenshot below, you might be able to see the couple of lines of text in the upper right corner.
My problem has to do with the media queries that I've used. I am at wit's end to figure out (1) why the page elements (those two lines of text in the upper right corner) are not disappearing when the page gets smaller than 481px OR (2) why they do not appear in any larger screen/device sizes when I do manage to get the page elements to disappear.
Here is the piece of CSS code that seems to cause some issues:
/* Smartphones (landscape) ----------- */
#media only screen and (min-width : 321px){
/* Hiding elements for this device * * * * * * * * * * * * * */
/*
.poweredBy{
display: none;
}
*/
}
With this code commented out, those two lines of text won't disappear until the window (device?) width is somewhere around 320px.
Here is the entire CSS:
/* Smartphones (portrait and landscape) ----------- */
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.poweredBy{
display: none;
}
}
/* Smartphones (landscape) ----------- */
#media only screen and (min-width : 321px){
.poweredBy{
display: none;
}
}
/* Smartphones (portrait) ----------- */
#media only screen and (max-width : 320px) {
.poweredBy{
display: none;
}
}
/* 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) {}
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {}
/* iPads (portrait and landscape) ----------- */
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {}
/* iPads (landscape) ----------- */
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {}
/* iPads (portrait) ----------- */
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {}
/* 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) {}
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {}
/* Desktops and laptops ----------- */
#media only screen and (min-width : 1224px) {}
/* 960px layouts ----------- */
#media only screen and (min-width : 960px){}
/* Large screens ----------- */
#media only screen and (min-width : 1824px) {}
I am using GroundworkCSS underneath, but I have added a few media queries myself -- that was most likely not an enlightened act on my behalf. So if anyone could point me in the right direction, I would be most grateful. Thanks.
You have way to many media queries, the most you should have is three one for tablet, tablet landscape and mobile. Typically like this,
CSS
/** Mobile **/
#media only screen and (max-width: 767px), only screen and (max-device-width: 767px) {
}
/** Tablet **/
#media only screen and (min-width : 768px) and (max-width : 1024px) {
}
/** Tablet (landscape) **/
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
}
The css code for portrait and landscape:
#media screen and (orientation:portrait) {
/* Style for portrait mode goes here */
}
#media screen and (orientation:landscape) {
/* Style for landscape mode goes here */
}
Or, as written by Mitch Layzell,
you can use this:
#media only screen and (max-width: 767px), only screen and (max-device-width: 767px) {
/** Mobile **/
}
#media only screen and (min-width : 768px) and (max-width : 1024px) {
}
/** Tablet (landscape) **/
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/** Tablet **/
}
If you want you can insert "(orientation : landscape)" and "max-width" or "max-width-device" together.
I have finished a website, it's working fine in browser now. I have been asked to make it compatible with Android, iPhone, iPad, Tablets,and web etc. I'm using bootstrap asp.net.
Now I'm trying and couldn't find any answer. I'm using these inline media queries
#media screen and (min-width:0px) and (max-width:320px){/*Any css will be defined here*/}
#media screen and (min-width:321px) and (max-width:480px){/*Any css will be defined here*/}
#media screen and (min-width:481px) and (max-width:540px){/*Any css will be defined here*/}
#media screen and (min-width:541px) and (max-width:775px){/*Any css will be defined here*/}
#media screen and (min-width:768px) and (max-width:783px){/*Any css will be defined here*/}
#media screen and (min-width:776px) and (max-width:1536px){/*Any css will be defined here*/}
#media screen and (min-width:1537px){/*Any css will be defined here*/}
But in some iPads the CSS is not applied. Now my question is, what's the standard resolution and orientation for #media which will cover all (Android, iPhone, tablets and Web etc) CSS?
/* 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),
and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
That's what I use, and it works for almost everything.
After spending many hours I found this helpful. This is used by Bootstrap itself and I followed that. It will cover all the devices (Android, iPhone Tabs and web etc).
#media handheld, only screen and (max-width: 2200px)
{
/* Styles */
}
#media handheld, only screen and (max-width: 1200px)
{
/* Styles */
}
#media handheld, only screen and (max-width: 1024px)
{
/* Styles */
}
#media handheld, only screen and (max-width: 767px) {
/* Styles */
}
#media handheld, only screen and (max-width: 600px) {
/* Styles */
}
#media handheld, only screen and (max-width: 500px) {
/* Styles */
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Styles */
}
I have my wordpress theme with basic CCS, Now I want to make this design responsive for most used device layout's noted below.And I want to target all apple devices in landscape as well as in portrait mode:-
blackberry(320x240),
iphone3 (320x480),
iphone4 (640x960),
iphone5 (640x1136),
ipad (1024x768),
large desktop screen above 1280.
How can I write my CSS stylesheet using CSS3 media queries to target responsive devices?
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Here is just a starter. You can read more abour media-queries and other resonsive design stuff on that blog.
Here is a sample of css code:
/* 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 */
}