I have one stylesheet, which has both mobile-layout definitions and desktop-layout definitions. I would prefer to still have just one stylesheet.
The stylesheet splits definitions into #media screen and (max-width: 1049px) and #media screen and (min-width: 1050px) to separate mobile and desktop layouts. Sometimes they share the same layout for certain elements, hence why I don't use two stylesheets.
I would like a footer button that lets the user manually switch between these, so even if their screen is under 1049px they can still opt to use the desktop layout. I'd like to store this choice in the localStorage.
The issue is, how can I tell the different media queries in the CSS to also check the localStorage variable, preferably without having two stylesheets? What are my options?
Related
I came across a situation in a project were i wanted to write media queries for iPad Air and iPad Mini separately. What i am wondering is how can i target it differently since their resolutions are overlapping. for example
#media only screen and (min-width: 768px) and (max-width: 1024px) { //iPad Mini
.content{
background-color: grey;
}
}
#media only screen and (min-width: 820px) and (max-width: 1180px) { //iPad Air
.content{
background-color: blue;
}
}
What background-color will be applied to the content class for the screen resolution which is between 820px to 1024px since it applies for both the cases? Please correct me if my understanding is wrong. what is the best way to handle such situations? thanks in advance
For screen sizes between 820px and 1024px, blue will be applied as the background color. Since both styles would validly apply to an element with class "content", and have the same specificity, the browser will apply whichever style comes last in the stylesheet. Read more here: https://css-tricks.com/precedence-css-order-css-matters/
It is technically possible to detect what device a user is using to browse your website, but only through exploitation of certain bugs, and likely not easily. You certainly can't write a media query that explicitly targets a specific device.
Even if you could easily, I wouldn't recommend it. In general, you should not design for specific devices - you should have a single, responsive design that neatly adapts to many different screen sizes.
If you're just looking for a good set of breakpoints, a common set of non-overlapping breakpoints are the Bootstrap breakpoints. A possibly better thought-out alternative are David Gilbertson's breakpoints.
Unless you have a good reason not to, you should just stick to using only min-width media queries (if your site is designed mobile-first), or just max-width media queries (if your site is designed desktop-first). This way, styles neatly and predictably overwrite each other as screen sizes get larger (in the first case) or larger (in the second case).
I'm creating a responsive design web page, and I want to ensure I do all the media queries correctly for different devices and orientations.
This post suggests try using min-width and min-height media queries. And set up different break points for different resolutions.
screen orientation for multiple tablets with fluid design
Although, I found this method with the orientation (see below).
Should I use this approach or the one above?
Should I use #media screen, or should I consider all vs screen?
#media screen and (min-width: 700px) and (orientation: landscape) { ... }
Screen orientation is an interesting one as it's not always something that's reported back by the device/browser, so it's less reliable to use than min-width/max-width.
The other thing is that unless you're trying to do a particularly funky thing when the device is in landscape, then just adjusting your design based on width breakpoints is usually enough to get your desired effect.
If you have a landscape device, then it's probably okay to let the design display as it would at portrait with the same horizontal space. That is to say, it wouldn't be an unexpected behaviour for the user.
As for media all vs screen, I usually just stick with screen, as should the user want to do something like print the page, I don't necessarily want my break points to interfere in that.
As with anything though, you should think about the most common use cases for your users and make your decisions based on that. If it's just a regular web app/page, then there is nothing wrong at all with using just screen and not worrying about orientation.
I was researching about CSS media queries best practices and found the Foundation's definition.
As you can see, the first media query has no min/max-size definition:
#media only screen { } /* Define mobile styles */
Why do they use this media query as it defines no break-point? Is this a best practice or should be avoided?
Thanks!
That particular media query applies to all screens (of any size, orientation, aspect ratio or pixel density).
screen is a media type. Whatever you put inside that media query will only apply to screen and will not apply to content of other media_types.
Here is the list of currently recognized values for media_type. Most of them have been deprecated. The ones you should use (as they are probably here to stay) are:
all (implicit if none specified)
screen
print
speech
The guys at Foundation probably should change the comment after that query to a more explicit one. Instead of /* Define mobile styles */ they should have probably used /* General styles, including mobile */.
Look at the structure of their media queries and you will notice it is a mobile-first CSS framework. As in: you define the general styles (including mobile) first and than apply exceptions for ever increasingly wider screens.
Media queries are not only for breakpoints. You can specify the output medium like screen. In this case, only display screens are targeted. You can also target only print media, or media with specific orientation or resolution.
See more information about media queries and media types on MDN or w3schools.
tl;dr: Does it make sense to scope "mobile" CSS under a .touch class (added by Modernizr) rather than with media queries based on viewport size?
I am creating mobile styles for a site designed to be desktop-only (i.e. the page is fixed at ~900px wide, many targets are too small for touch, etc). The site has lots of forms, some tables, and no images/video/charts. I cannot control the HTML structure (except with JS, which I'd like to avoid), and I cannot make meaningful changes to the existing desktop styles.
I've written a new style sheet that overrides those styles where necessary to make it work well on a phone and on a tablet in portrait mode using max-width media queries.
The problem is that when you turn the tablet to landscape mode the screen becomes 1024px wide which is where desktop styles ought to take over. However, a tablet is still a touch device and I feel the "mobile" style is better suited to tablets (larger tap targets, nicer layout of the form fields and labels, off-canvas menu, etc). It seems quite clunky and disorienting for a site to suddenly change just because you rotated the device.
Should I scope the mobile styles under the .touch class added by Modernizr instead of the viewport width? On the surface it doesn't sound like a bad idea, but then again I know that viewport-based media queries are the proper way to write styles so I can't help but feel I will run into trouble down the line.
You could use Modernizr to pick between two stylesheets to load.
In a file called small-enough.css or something, import your mobile styles based on a media query for tablet portrait size and down. Documentation found here. Just have this one line in it.
#import path/your-mobile-styles.css #media (max-width: [tablet portrait width]);
Then with modernizr if it's a touch device just load the mobile styles. If it is not touch load the file that uses the media query to decide to load the mobile styles.
Modernizr.load({
test: Modernizr.touch,
yep : 'your-mobile-styles.css',
nope: 'small-enough.css'
});
You could probably target those devices using a media query along the lines of
#media only screen and and (min-device-width:~whatever~) and (max-device-width:1024px) and (orientation:landscape) {
styles
}
We should also remember that not all mobile devices are touch enabled, such as some Blackberry phones, so enabling some features/styling based on the .touch class that modernizr adds can also help.
The unsemantic css framwork snaps web layouts to mobile and desktop modes depending on the viewport size. You can also heavily modify what appears on the desktop vs mobile using 'show-on-desktop' and 'show-on-mobile' classes, which do exactly what they say.
Does this mean I can say goodbye to media queries?
http://unsemantic.com/
In short, yes.
In actuality, Unsemantic abstracts away the use of #media queries in one of two ways:
Providing responsive CSS versions (unsemantic-grid-responsive.css or unsemantic-grid-responsive-tablet.css) that create these #media queries for you according to predefined breakpoints.
Loading an individual CSS file without #media queries, after determining the viewport size on load using Adapt.js; then, optionally loading additional CSS files if necessary according to customizable breakpoints upon resizing the viewport.
Source: http://unsemantic.com/css-documentation