I read the article about them over at css3.info, but I didn't feel like it explained it well enough. I also could not get their examples to change with my screen size. I attempted in Safari, FF, Chrome.
Is this a feature that is not ready for implimentation yet?
If I want to adjust some styles when the browser window is less than 1024px wide. How can I do that?
The rule applied to the screen size means that, citing W3C spec "is usable on screen and handheld devices if the width of the viewport is" in the specified constraints.
http://www.w3.org/TR/css3-mediaqueries/
If you want to adjust the style when the viewport is less than 1024px you can use this rule:
#media screen and (max-width: 1024px) { … }
anyway this rule applies only to the viewport actual size. If you resize the viewport without reloading the page the styles won't be applied.
To apply a style sheet to a document when displayed on a screen greater than 800 pixels wide:
<link rel="stylesheet" media="screen and (min-device-width: 800px)" >
To apply a style sheet to a document when displayed on any device less than 400 pixels wide:
<link rel="stylesheet" media="all and (max-device-width: 400px)" >
inside
#media all and (max-width:800px) {
body { color: red; }
}
for iphone
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
::combining media query
To see how different media queries react on resize or orientation change, try the demo on this page:
http://www.jensbits.com/2011/04/20/media-query-playground-rotate-resize-rinse-repeat/
You can adjust the media query attributes to get a feel for how they affect a page.
Here are a few projects that solve this issue and are at the forefront of dynamic css and screen sizes:
320 and up:
‘320 and Up’ prevents mobile devices
from downloading desktop assets by
using a tiny screen’s stylesheet as
its starting point.
Lessframework:
Less Framework is a CSS grid system
for designing adaptive websites. It
contains 4 layouts and 3 sets of
typography presets, all based on a
single grid.
Related
I am currently working on a new responsive website with several breakpoints. Between those breakpoints the layout should be flexible to always display as nice as possible on every device.
If a user views the page with a classic desktop browser i want to force the desktop version of the page and prevent the responsiveness.
Reason why is the lack of responsive ads which currently exist in germany.
Anyone has a clue for me how to achieve it?
You should use max-device-width rather than max-width, which targets the viewport size rather than the device screen size.
#media only screen and (min-device-width : 1024px) {
/* Styles */
}
You can also target retina displays:
#media only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Edit: See this SO thread for more info.
Start by having two stylesheets. One responsive and one non-responsive. If it's a desktop user then load the non responsive and vise versa for mobile users
<link rel="stylesheet" media="only screen and (max-width: 400px)" href="mobile.css" />
<link rel="stylesheet" media="only screen and (min-width: 401px)" href="desktop.css" />
I was thinking the link target on the stylesheet would make my css file only load when it loads on a tablet or iphone. But the elements I'm trying to hide are still there. Im currently using (media="handheld")
<link rel="stylesheet" type="text/css" hrf="css/media.css" media="handheld" />
There are too many mobile device models out there to write stylesheets for; you'd be better off adjusting your CSS based on Screen Size.
This is especially helpful for targeting Android Tablets which comes in different sizes.
See this useful tutorial for further explanation:
http://css-tricks.com/resolution-specific-stylesheets/
So, instead of targeting a specific screen dimensions (which would keep changing as more devices are released), you'd want stylesheets that change according to the screen size.
Then you'll add several stylesheets:
<link rel="stylesheet" media="screen and (min-width: 480px) and (max-width: 700px)" href="css/small.css" />
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
etc.
So iPhones would use the small.css, and tablets larger than 700px will use medium.css.
Handheld is more for devices like PDAs or feature phones than iOS or Android devices. You're much better off using media queries to detect device capabilities and then adjust accordingly. Here's an example article: http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
So I'm using an #media query to use a different css file on the mobile version of my site. Here's the head of my html:
<link rel="stylesheet" type="text/css" media="screen,projection" href="<?php bloginfo('stylesheet_url'); ?>" title="Simplr" />
<link media="only screen and (max-device-width: 800px)" href="mobile.css" type="text/css" rel="stylesheet" />
However, I'm finding that the mobile css just 'adds' to the desktop css, rather than having the desired effect of only loading the css rules in mobile.css. For example, having a single rule about the background color being red in mobile.css, won't just give me some unformatted web content with a red background, but will render the desktop css with a red background.
I want to completely start from scratch building up a nice, functional view of the site on mobiles with a blank css file, but I don't want to have to manually undo the many tweaks I've done to make the site nice for desktop. In particular, I'd like to be able to eliminate the chance of some stray desktop css preventing the site from rendering with the correct proportions on mobile.
Any thoughts?
<link media="only screen and (min-device-width: 0px) and (max-width:800px)" href="mobile.css" type="text/css" rel="stylesheet" />
<link media="only screen and (min-device-width: 801px) and (max-width:9999px)" href="<?php bloginfo('stylesheet_url'); ?>" title="Simplr" type="text/css" rel="stylesheet" />
Wrap your desktop css in a media query that targets desktops
Use your media queries in a conditional fashion like this:
#media screen and (max-width: 800px) {
<link to mobile stylesheet
}
#media screean and (min-width: 801px) {
<link to full stylesheet
}
Note that all platforms will use "#media screen", so you cannot do reliable device detection with the media type alone. Most commonly you will use the device-width to help you make educated guesses at what type of device the client will be.
Devices with high DPI are usually pretending they are smaller, so both the iPhone 3GS and the iPhone 4 (for example) can be matched with the same set of queries.
Whether you link "only screen and (max-device-width: 800px)" or build into your css " #media #..."
You need to envelope the "desktop" styles in order for the mobile to not recognize them at all.
so basically
only screen and (max-device-width: 800px) - for your mobile devices
and
only screen and (min-width: 801px) - for desktops
If you're putting your mobile stuff last, then you could add a CSS reset to the top of your mobile stylesheet.
I am building a PhoneGap/Cordova project for iPhone.
I have 2 css files - one for general CSS rules and one for iPad relevant css that look like this:
<!--Main Style Sheet-->
<link rel="stylesheet" href="css/styles.css" />
<!-- iPad specific css-->
<link rel="stylesheet" media="only screen and (max-device-width: 768px)" href="css/ipad.css" type="text/css" />
The issue is that the iPad css is just behaving like normal css. CSS I put in there appears when I run both iPhone and iPad simulators.
Can anyone help me out?
Thanks!
For iPad you want min-device-width, not max-device-width (ie. an iPad has a minimum width of 768px in Portrait mode)
max-device-width gives us a maximum not a minimum, so it will affect all devices below 768 px including the iphone. Giving a min width too should fix it. Probably (min-device-width:481px)
In case the aforementioned solutions do not solve the problem for some readers, this question is directly relevant to responsive web design.
I would recommend utilizing only one style sheet with a media query inside of it.
#media screen and (max-width:768px){
/* Device Specific CSS rules here */
}
I have chosen max-width here because anything above that will render the normal CSS. You my then set up another media query with max-width of approximately 500px to target smart phones. Keep in mind that the media query automatically inherits all of the normal CSS rules specified and the only rules that need to be defined inside of the media query is the device specific styles.
This does exactly the same thing; however, this only requires the browser to parse one style sheet, generating a faster load time (minimal, but faster none-the-less.
When using a media query, you are also required to have a viewport meta tag in your HTML. Otherwise, your devices will render the same CSS as a desktop.
Also, CSS3 Media Queries are supported by most modern mobile browsers.
What is the difference between screen and only screen in media queries?
<link media="screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" />
<link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" />
Why are we required to use only screen? Does screen not itself provide enough information to be rendered only for screen?
I've seen many responsive websites using any of these three different ways:
#media screen and (max-width:632px)
#media (max-width:632px)
#media only screen and (max-width:632px)
Let's break down your examples one by one.
#media (max-width:632px)
This one is saying for a window with a max-width of 632px that you want to apply these styles. At that size you would be talking about anything smaller than a desktop screen in most cases.
#media screen and (max-width:632px)
This one is saying for a device with a screen and a window with max-width of 632px apply the style. This is almost identical to the above except you are specifying screen as opposed to the other available media types the most common other one being print.
#media only screen and (max-width:632px)
Here is a quote straight from W3C to explain this one.
The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.
As there is no such media type as "only", the style sheet should be ignored by older browsers.
Here's the link to that quote that is shown in example 9 on that page.
Hopefully this sheds some light on media queries.
EDIT:
Be sure to check out #hybrids excellent answer on how the only keyword is really handled.
The following is from Adobe docs.
The media queries specification also provides the keyword only, which is intended to hide media queries from older browsers. Like not, the keyword must come at the beginning of the declaration. For example:
media="only screen and (min-width: 401px) and (max-width: 600px)"
Browsers that don't recognize media queries expect a comma-separated list of media types, and the specification says they should truncate each value immediately before the first nonalphanumeric character that isn't a hyphen. So, an old browser should interpret the preceding example as this:
media="only"
Because there is no such media type as only, the stylesheet is ignored. Similarly, an old browser should interpret
media="screen and (min-width: 401px) and (max-width: 600px)"
as
media="screen"
In other words, it should apply the style rules to all screen devices, even though it doesn't know what the media queries mean.
Unfortunately, IE 6–8 failed to implement the specification correctly.
Instead of applying the styles to all screen devices, it ignores the style sheet altogether.
In spite of this behavior, it's still recommended to prefix media queries with only if you want to hide the styles from other, less common browsers.
So, using
media="only screen and (min-width: 401px)"
and
media="screen and (min-width: 401px)"
will have the same effect in IE6-8: both will prevent those styles from being used. They will, however, still be downloaded.
Also, in browsers that support CSS3 media queries, both versions will load the styles if the viewport width is larger than 401px and the media type is screen.
I'm not entirely sure which browsers that don't support CSS3 media queries would need the only version
media="only screen and (min-width: 401px)"
as opposed to
media="screen and (min-width: 401px)"
to make sure it is not interpreted as
media="screen"
It would be a good test for someone with access to a device lab.
To style for many smartphones with smaller screens, you could write:
#media screen and (max-width:480px) { … }
To block older browsers from seeing an iPhone or Android phone style sheet, you could write:
#media only screen and (max-width: 480px;) { … }
Read this article for more http://webdesign.about.com/od/css3/a/css3-media-queries.htm
The answer by #hybrid is quite informative, except it doesn't explain the purpose as mentioned by #ashitaka "What if you use the Mobile First approach? So, we have the mobile CSS first and then use min-width to target larger sites. We shouldn't use the only keyword in that context, right? "
Want to add in here that the purpose is simply to prevent non supporting browsers to use that Other device style as if it starts from "screen" without it will take it for a screen whereas if it starts from "only" style will be ignored.
Answering to ashitaka consider this example
<link rel="stylesheet" type="text/css"
href="android.css" media="only screen and (max-width: 480px)" />
<link rel="stylesheet" type="text/css"
href="desktop.css" media="screen and (min-width: 481px)" />
If we don't use "only" it will still work as desktop-style will also be used striking android styles but with unnecessary overhead. In this case, IF a browser is non-supporting it will fallback to the second Style-sheet ignoring the first.
#media screen and (max-width:480px) { … }
screen here is to set the screen size of the media query. E.g the maximum width of the display area is 480px. So it is specifying the screen as opposed to the other available media types.
#media only screen and (max-width: 480px;) { … }
only screen here is used to prevent older browsers that do not support media queries with media features from applying the specified styles.
Media queries is used to create responsive web design. Both the screen and only screen are used in media queries.
screen: It is used to set the screen size of media query. The screen size can be set by using max-width and min-width.
screen is used to style for many smartphones with smaller screens, you could write:
#media screen and (max-width:630px){ ... }
In the above code screen is saying for a screen and window size with a max-width of 630px, you want to apply said styles.
only screen: The only keyword is used to prevent older browsers that do not support media queries with media features from applying the specified styles.
To block older browsers from seeing the stylesheet, you will write:
#media only screen and (max-width:630px){ ... }
The keyword ‘only’ will hide style sheets from older user agents.