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 */
}
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).
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 */
}