** Amateur warning **
I'd like to have four settings for my CSS, and I'd like the last one to be a "everything else" kind of media query, is there such a thing???
These are my first three queries:
#media only screen and (min-width: 1024px) and (min-height: 940px) /* for large displays */
#media only screen and (min-width:1024px) and (min-height:689px) and (max-height:939px) /* for smaller displays */
#media only screen and (max-width:1024px) and (max-height:900px) /* for ipad n the like */
Now I'd like one to respond to anything else I might have left out... I hope I make sense...
.class {
//this is everything else
}
#media (max-width:768px) { //or whatever px you're using
.class{
//styling for .class on mobile
}
}
Anything that has class="class" will get the first (non-media query) .class styling. Anything that falls within your media query pixel definition will get the media query styling (second .class in this example).
Side note: I have used media queries with bootstrap and I have not come across height media queries, in my experience it is done with width only. I am not sure if there is added value in doing height, maybe it allows you to get very specific, but for me that would be too much to manage.
Related
Why is some devices NOT listening to my media query when the device width is smaller than "375" which is my smallest breakpoint. I use #media (min-width: 375px) { // Rules here }... I get that it "requires" that the device has to be at least "375px" wide, but I can't figure out what's wrong here. It works when I change the 375-breakpoint to 0px... But is that even a correct approach?
In my "media.scss" file, I've it all set up like this:
#media (min-width: 375px) {}
#media (min-width: 768px) {}
#media (min-width: 992px) {}
#media (min-width: 1280px) {}
Everything works fine, but when testing on a device that is smaller than 375 pixels, it doesn't consider the rules. I hope you get what I mean. I've looked how bootstrap has their media queries, and I can't really tell if there is any difference.
No matter if you use the mobile-first or desktop-first approach, you need some styles that apply when none of the media queries apply. In your example, there are no styles which apply for widths below 375px. Most likely it would be okay if you simply take the CSS rules you have inside the first query (<375) out of that query and put it at the very beginning of the stylesheet.
Or said differenty: Just erase the #media (min-width: 375px) { at the beginning and its closing } bracket, then those styles will apply to all widths below 768px (also to those narrower than 375px)
Create a media query with max-width: 374px and insert your css into it.
Got some weird stuff going on. Trying to fix up an old WordPress theme which was never designed for mobile and I found issues once I added media queries. They seem to be what I want overall on mobile devices but once I hit desktop, everything looks messed up as if it's adapting to the mobile media queries and I'm really confused as to why. Am I supposed to add something to the desktop styles to make this work overall? Here's my site in question: http://destinationbeershow.com/
If you have
<body class="mobile">
at your mobile version and you specify the .mobile in all your rules affecting only mobile, then I guess you will be out of the woods.
Actually, i just solved it. I had min-width for those elements when I meant to use max-width. Duh! I think I'm out of the woods.
You might want to clarify with at least one or two examples of the specific problems you're encountering, but just looking at one or two elements, remember some basic CSS rules.
When using media queries, any rules meeting the conditions will be triggered.
Rules overwrite each other top to bottom, which means whatever is listed last will be the property used.
If you're encountering problems when your rules look different, remember that whether CSS rules overwrite each other depends on a rule's specificity. (This is more of a side note, but important to remember. See this article on calculating CSS specificity if this is a problem you're encountering.)
For example:
#media (min-width: 768px) {
#content {
width: 656px;
}
}
#media (min-width: 480px) {
#content {
width: 100%;
}
}
Once the viewport (browser window size) is 480px your element with id="content" will be 100% width. Then, when your viewport is 768px, it will still be 100% width, because the second rule is overwriting the first one since both rules are true.
If you want rules to override the smaller media query rule, then you have to make sure your larger size media query comes after. For example:
#media (min-width: 480px) {
#content {
width: 100%;
}
}
#media (min-width: 768px) {
#content {
width: 656px;
}
}
Hope that makes sense.
For my CSS media queries I've set it up mobile first which deals with all the overall styling.
I then have:
#media only screen and (min-width : 790px) {
}
#media only screen and (min-width : 990px) {
}
and I've added in
#media screen and (orientation: landscape) and (max-width: 520px) {
}
which deals with the CSS changes when the smart phone is turned round to landscape mode, but it doesn't seem to work, am I writing the landscape media query wrong?
Had a similar issue: my iPod/iPhone devices were detected as portrait orientation even when rotated.
I managed to resolve that with the following media query:
#media screen and (min-aspect-ratio: 4/3)
{*your styles here*}
If you want to target any case when width is greater than height, I think something like (min-aspect-ratio: 101/100) or something like this might work. However, for current devices 4/3 is sufficient, I think.
If you need aspect ratio for landscape, I think min-aspect-ratio: 1 suffices ... and therefore max-aspect-ratio: 1 for portrait.
But, even when the CSS is correct, there's an additional step required for a Cordova / PhoneGap app: Why doesn't my Cordova/PhoneGap iOS app rotate when the device rotates?
I found this StackOverflow item before that one, so perhaps others will also find a cross-link useful.
When writing a CSS media query, is there any way you can specify multiple conditions with "OR" logic?
I'm attempting to do something like this:
/* This doesn't work */
#media screen and (max-width: 995px OR max-height: 700px) {
...
}
Use a comma to specify two (or more) different rules:
#media screen and (max-width: 995px),
screen and (max-height: 700px) {
...
}
From https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Commas are used to combine multiple media queries into a single rule. Each query in a comma-separated list is treated separately from the others. Thus, if any of the queries in a list is true, the entire media statement returns true. In other words, lists behave like a logical or operator.
CSS Media Queries & Logical Operators: A Brief Overview ;)
The quick answer.
Separate rules with commas:
#media handheld, (min-width: 650px), (orientation: landscape) { ... }
The long answer.
There's a lot here, but I've tried to make it information dense, not just fluffy writing. It's been a good chance to learn myself! Take the time to systematically read though and I hope it will be helpful.
Media Queries
Media queries essentially are used in web design to create device- or situation-specific browsing experiences; this is done using the #media declaration within a page's CSS. This can be used to display a webpage differently under a large number of circumstances: whether you are on a tablet or TV with different aspect ratios, whether your device has a color or black-and-white screen, or, perhaps most frequently, when a user changes the size of their browser or switches between browsing devices with varying screen sizes (very generally speaking, designing like this is referred to as Responsive Web Design)
Logical Operators
In designing for these situations, there appear to be four Logical Operators that can be used to require more complex combinations of requirements when targeting a variety of devices or viewport sizes.
(Note: If you don't understand the the differences between media rules, media queries, and feature queries, browse the bottom section of this answer first to get a bit better acquainted with the terminology associated with media query syntax
1. AND (and keyword)
Requires that all conditions specified must be met before the styling rules will take effect.
#media screen and (min-width: 700px) and (orientation: landscape) { ... }
The specified styling rules won't go into place unless all of the following evaluate as true:
The media type is 'screen' and
The viewport is at least 700px wide and
Screen orientation is currently landscape.
Note: I believe that used together, these three feature queries make up a single media query.
2. OR (Comma-separated lists)
Rather than an or keyword, comma-separated lists are used in chaining multiple media queries together to form a more complex media rule
#media handheld, (min-width: 650px), (orientation: landscape) { ... }
The specified styling rules will go into effect once any one media query evaluates as true:
The media type is 'handheld' or
The viewport is at least 650px wide or
Screen orientation is currently landscape.
3. NOT (not keyword)
The not keyword can be used to negate a single media query (and NOT a full media rule--meaning that it only negates entries between a set of commas and not the full media rule following the #media declaration).
Similarly, note that the not keyword negates media queries, it cannot be used to negate an individual feature query within a media query.*
#media not screen and (min-resolution: 300dpi), (min-width: 800px) { ... }
The styling specified here will go into effect if
The media type AND min-resolution don't both meet their requirements ('screen' and '300dpi' respectively) or
The viewport is at least 800 pixels wide.
In other words, if the media type is 'screen' and the min-resolution is 300 dpi, the rule will not go into effect unless the min-width of the viewport is at least 800 pixels.
(The not keyword can be a little funky to state. Let me know if I can do better. ;)
4. ONLY (only keyword)
As I understand it, the only keyword is used to prevent older browsers from misinterpreting newer media queries as the earlier-used, narrower media type. When used correctly, older/non-compliant browsers should just ignore the styling altogether.
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
An older / non-compliant browser would just ignore this line of code altogether, I believe as it would read the only keyword and consider it an incorrect media type. (See here and here for more info from smarter people)
FOR MORE INFO
For more info (including more features that can be queried), see: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#Logical_operators
Understanding Media Query Terminology
Note: I needed to learn the following terminology for everything here to make sense, particularly concerning the not keyword. Here it is as I understand it:
A media rule (MDN also seems to call these media statements) includes the term #media with all of its ensuing media queries
#media all and (min-width: 800px)
#media only screen and (max-resolution:800dpi), not print
#media screen and (min-width: 700px), (orientation: landscape)
#media handheld, (min-width: 650px), (min-aspect-ratio: 1/1)
A media query is a set of feature queries. They can be as simple as one feature query or they can use the and keyword to form a more complex query. Media queries can be comma-separated to form more complex media rules (see the or keyword above).
screen (Note: Only one feature query in use here.)
only screen
only screen and (max-resolution:800dpi)
only tv and (device-aspect-ratio: 16/9) and (color)
NOT handheld, (min-width: 650px). (Note the comma: there are two media queries here.)
A feature query is the most basic portion of a media rule and simply concerns a given feature and its status in a given browsing situation.
screen
(min-width: 650px)
(orientation: landscape)
(device-aspect-ratio: 16/9)
Code snippets and information derived from:
CSS media queries by Mozilla Contributors (licensed under CC-BY-SA 2.5). Some code samples were used with minor alterations to (hopefully) increase clarity of explanation.
There are two ways for writing a proper media queries in css. If you are writing media queries for larger device first, then the correct way of writing will be:
#media only screen
and (min-width : 415px){
/* Styles */
}
#media only screen
and (min-width : 769px){
/* Styles */
}
#media only screen
and (min-width : 992px){
/* Styles */
}
But if you are writing media queries for smaller device first, then it would be something like:
#media only screen
and (max-width : 991px){
/* Styles */
}
#media only screen
and (max-width : 768px){
/* Styles */
}
#media only screen
and (max-width : 414px){
/* Styles */
}
yes, using and, like:
#media screen and (max-width: 800px),
screen and (max-height: 600px) {
...
}
Yes, but not by using OR, you need to use and. Like,
#media screen and (max-width: 995px) and (max-height: 700px) {
...
}
And also, we can do it this way. The comma implies OR relationship,
#media screen and (max-width: 995px),
screen and (max-height: 700px) {
...
}
More information - Click here
I'm making a website which has 3 breakpoint 768px, 1024px and 1900 px. Which size of CSS is good to keep outside media query containers?
Adding example
All specific styling inside media queries and all common styling outside
h1 {color:red}
#media only screen and (min-width: 480px) {
h1 {font-size:18px}
}
#media only screen and (min-width: 768px) {
h1 {font-size:22px}
}
#media only screen and (min-width: 1024px) {
h1 {font-size:28px}
}
or
Most common used desktop first
#media only screen and (min-width: 1024x) {
h1 {font-size:28px; font-color:red}
}
#media only screen and (min-width: 480px) {
h1 {font-size:18px}
}
#media only screen and (min-width: 768px) {
h1 {font-size:22px; }
}
or
Mobile first
#media only screen and (min-width: 480px) {
h1 {font-size:18px; font-color:red}
}
#media only screen and (min-width: 1024x) {
h1 {font-size:28px; }
}
#media only screen and (min-width: 768px) {
h1 {font-size:22px; }
}
I believe you mean to ask what CSS should not be inside of the media query blocks, right?
If that is the case I recommend that any CSS that does not change be placed outside of the media query blocks. Any colors, font styling, etc. Any CSS that changes placement of elements, the padding, floats, inline or block display types, any structure-type CSS is what I would put in the media query blocks.
Update: To respond to the updated question, are you asking which order you should put the media blocks in? If that's the case as far as I know it doesn't really matter what order they go in. But to comment on the number of possible media queries, I would separate that CSS into different style sheets just to make it more maintainable. Your media queries would then be a part of the links to your style sheets in your HTML.
There are so many ways to approach this problem - and the decision may be different depending on the circumstances. For example, is there an existing site that you are reverse engineering to be responsive or are you starting from scratch?
STARTING FROM SCRATCH
If starting from scratch, one method is to create all of the basic styles OUTSIDE of any media query - so that these styles can be seen by any device (especially those devices that do not support media queries).
Basic styles could include just colors, and fonts etc - or it could be everything except layout.
Then, media queries are used to add the different layouts on top of the basic styles.
MIN or MIN AND MAX
The next question is how will you work your different media queries...
Will you allow them to be applied on top of one another - in which case you may start small and build up - using min-width only.
For example:
#media only screen and (min-width: 600px)
OR you may want to set them in a series of brackets - so that styes for one size do not interact with another size.
For example:
#media only screen and (min-width: 600px) and (max-width: 800px)
Again, there is no right or wrong - both have strengths and weaknesses. The first option allows you to use styles that flow through all widths. The second option allows you to fully control styles that appear in a specific width - without having to deal with the cascade.
DEALING WITH IE
There are a range of ways for dealing with older versions of IE including.
allow IE to see basic styles only
place media queries in separate CSS files and link to these files using media queries... then also link to a selection of these files (like wide screen CSS files only) via conditional comments.
Use some sort of JS solution like respond.js or others to force IE to understand the media queries.
HTH
I've read many articles recently that suggest starting with the smallest resolution first and working your way upwards using media queries. To me that also makes a lot of sense. The only problem is old browsers (IE) not understanding media queries. There are solutions to that problem though (if you Google).