I want to make media query conditions for Responsive csss..
#media (max-width: 480px) and (max-width:640px)
Please let me know it is correct syntax , because this one not satisfying conditions.
Use the below.
#media screen and (max-width: 480px), screen and (max-height: xxxpx) {
Your CSS
}
You can also read the below for further clarity.
http://www.w3.org/TR/css3-mediaqueries/#media0
PS: xxxpx is a dummy value where you can enter your values.
Related
Total NOOB at web development and trying to teach myself here and it’s quite daunting to say the least, but I’m having fun nonetheless.
Anyway, I know that media queries affect the way mobile devices render the page on various screen sizes, but I want to know if there’s just one media query that can affect ALL mobile devices regardless of screen size?
I just want to make sure it won’t affect the Desktop.
For instance I want to tweak a navigation menu on all mobile devices, but I don’t want to meticulously change each media query that pertains to a screen size in my style.css.
I just want to create one media query to make this tweak that will affect all mobile screen sizes.
Hope that makes sense.
As always, you all are awesome!
Thanks for your help!
happy that you are choose to learn Web-Development.
But your way sounds more complicated than it is. First, Desktop and Mobile can be the same at all. It only counts down to Media Queries. On a Desktop, your Browser can be have the same width as a mobile device. So you need to clarify in your Project at which point you want to show the User the "Mobile" Styles and when to display the "Desktop" Styles. In most Projects I worked or saw, the default Media Queries are something like that:
#media (min-width: 320px) {}
#media (min-width: 768px) {}
#media (min-width: 1024px) {}
#media (min-width: 1220px) {}
#media (min-width: 1440px) {}
So you see on every media query you can attach some new styles for the selected query size. To make its easier for writing styles and don't override all these things on every new width, you can make something like that:
#media (min-width: 320px) {} // for general stylings (both, mobile && desktop)
#media (max-width: 767px) {} // for only styles between 320px and 768px (most mobile devies)
#media (min-width: 768px) {} // general desktop && tablet styles if needed
#media (min-width: 768px) and (max-width: 1024px) {} // only tablet styles
#media (min-width: 1025px) // start with desktop styling
All these styles between the media queries are only attached to the sizes.
So just choose your needed width, for example:
All mobile styles attached only between 320px and 1024px
#media (min-width: 320px) and (max-width: 1024px) {
.nav{ background: red; }
}
All desktop styles attached only after 1025px
#media (min-width: 1025px) {
.nav{ background: green; }
}
All these media queries just show the different widths, you also can do this by heights, but its way more difficult because of the device/display sizes.
If you really want to check the User Agent and divide between the browser, agents, devices or something like that you will need JavaScript and thats way more complex than just display the styles for different widths.
I hope this helps you! If you have any questions about Media Queries and how to write them correctly, MDN is a good resource: MDN - Media Queries
For anyone looking for a generic and easy media query for mobile, I would suggest the following:
#media screen and (max-width: 767px) {}
Similar to the suggestion by #m4n0, but this is the correct query including the "and". This is a good start, and then you can continue to define more breakpoints as you need more responsiveness along the way.
It depends on is your mobile layout is designed. As even in the mobile view you need to think about Portrait and landscape mode.
For some common styling, I normally use
#media screen (max-width: 767px) { }
You can also use orientation to set media queries like below
#media screen and (max-device-width: 480px) and (orientation: portrait) {
Your classes here
}
#media screen and (max-device-width: 640px) and (orientation: landscape) {
Your classes here
}
Great question, Android and Apple devices in my search normally fall within 450px in portrait and 800px on landscape, I would suggest you create a media query for both these sizes and you would have covered a high number of mobile devices in both portrait mode and landscape mode. If you are targeting a specific device I would suggest looking up those specific screen viewport sizes and adjusting or adding more media queries to cover those cases. Hope this helps! Keep learning.
Credit to following link for Popular Device Screen Resolution Sizes
https://mediag.com/blog/popular-screen-resolutions-designing-for-all/
Credit to following link for great explanation of Responsive Design
https://www.toptal.com/responsive-web/introduction-to-responsive-web-design-pseudo-elements-media-queries
I'm working on a webpage where I often need to use media queries like the following:
#media (min-width: 769px) and (max-width: 1280px) {
...
}
(Or with variables since I'm actually using Sass: (min-width: $vertical-view-max + 1) and (max-width: $medium-view-max))
Now, I am in the case where I would like the media query to trigger when the width is not in this interval.
I found that the following rule works fine:
#media (max-width: 768px), (min-width: 1281px) {
...
}
But I can't make it work with not operator:
#media (not ((min-width: 769px) and (max-width: 1280px))) {
...
}
I tried different parenthesizations (this one even seems to be invalid syntax). How should I write the rule? Is this not possible at all with the not operator?
That looks like a valid level 4 media query, but no browser has been updated to support the new grammar yet despite some of them beginning to support some of the new media features. In the meantime, to conform to level 3 with the not keyword your media query needs to look like this (with a media type added and all but the innermost pairs of parentheses removed):
#media not all and (min-width: 769px) and (max-width: 1280px) {
...
}
Despite what the apparent shortage of parentheses might suggest, the not actually serves to negate the entire media query starting from all and.
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.
I would like to apply a CSS media query to a certain screen size AND print media type.
Is it possible to do it with something like:
#media (min-width: 768px) and print {...}
The correct way to do this is: #media print, (min-width: 768px){..}
Comment from LcSalazar:
Just a tip, in this case is not "AND" but "OR"... "AND" has another
meaning, that is if both conditions were met.
The correct way to apply css to
screen size AND print media type
is
#media print and (min-width: 768px) { }
http://jsfiddle.net/kjtz9jaq/1/
If you don't put the and then you get results that affect screen as well demonstrated here
http://jsfiddle.net/kjtz9jaq/
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