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 */
}
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've got a block of html, let's call it a tile. When the screen is wide we lay down tiles horizontally in rows. But when the screen is less than two tiles wide we lay them down the page.
Inside the tiles are an image and some text. When the tiles are going across the page the image should show above the text. But when there is only one tile in a row the image should show to the left of the text.
Perhaps you're still with me. I'm trying to work out how to use the same html for both layouts and apply the left/top positioning of the image purely with css. The tile html looks like this:
<li class="car-item">
<img src="{{car_image}}" class="img-rounded">
<h3>{{name}}</h3>
<ul>
<li class="ico-body">{{body}}</li>
<li class="ico-petrol">{{cylinder}}</li>
<li class="ico-transmission">{{transmission}}</li>
</ul>
</li>
The sass/css has gone through a number of variations. I've been trying to use visible-phone class but my attempts always wind up needing to output two versions of the html, one with "visible-phone" class and another "hidden-phone" class. Is this really necessary?
Is it not possible to declare a default css class (for desktop) and an alternate which automatically applies to phone?
.visible-phone
height: none
margin-right: 10px
img
float: left
(#media?)
Here are the media queries of standard devices (from CSS-Tricks.com):
/* 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 */
}
All of the areas that say /* Styles */ are where you would place the separate CSS components for the different devices you are supporting.
**PLEASE NOTE: this is a pretty convoluted media query sheet. I would normally delete the landscape stuff, and the iPhone media query takes care of most smartphones, so there's normally no need to have two separate ones for that. Here is what I usually use:
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
(and from Creating a mobile web page with different css style)
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 */
}
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">