I'll make it simple:
This is the only code in my sample project's entire scope that turns the background to red.
#media only screen and (min-width: 768px) and (orientation: portrait) {
background: red;
}
I cannot explain why I'm seeing a red background in this Chrome responsive simulator when the min-width is clearly below 768px:
I can't replicate the issue. Given you said it is the only code, shouldn't there be a CSS class selector?
#media only screen and (min-width: 768px) and (orientation: portrait) {
.someClassName {
background: red;
}
}
The answer is that I was using min-width instead of using min-device-height -- Once I switched to device-height vs. height - things started working.
Related
How do i apply styles for differnt screen resolutions
For example: I have a computer with max screen resolution of 1366 X 768
and want to specify css styles only for this resolution .
Css #media rules only take into consideration min-width and max-width of the browser how do i target for specific resolution.
Use the resolution tag i.e. :
#media (resolution: 150dpi) {
p {
color: red;
}
}
More explantations and syntax here: https://developer.mozilla.org/en-US/docs/Web/CSS/#media/resolution
Try this:
#media screen and (min-width: 1366px) and (max-width: 1366px)
and (min-height: 768px) and (max-height: 768px) {
/* style */
}
Use width and height mediaqueries
#media (width: 1366px) and (height: 768px) {
:root { background: yellowgreen; }
}
to match a viewport of 1366x768 px
Codepen example
Anyway it's worth noting that, unless you are in fullscreen mode, that rule won't be applied because the UI of your browser takes some room, so the actual viewport can't be exactly the same of the chosen resolution.
You can try this
#media screen and (min-width: 1500px) and (max-width: 1600px){
/*Your style */
}
I have media queries written this way :
#media only screen and (max-device-width: 600px) and (orientation: portrait) {
.img-responsive{
height : 200px;
width : 100px;
}
}
#media only screen and (max-device-width: 600px) and (orientation: landscape) {
.img-responsive{
width : 95px;
height : 100px;
}
}
Portrait orientation works fine but for landscape orientation css doesn't seem to apply.
swapping resolution worked for me, though i only tested in chrome
#media all and (max-width: 768px) and (max-height: 1024px) and (orientation:portrait) {}
#media all and (max-width: 1024px) and (max-height: 768px) and (orientation:landscape) {}
There is an issue I've just met with and I think it's the same...
When you are checking your app with inspect mobile simulator there is a zoom option on the top bar. If the zooming value is less than 100%, somewhy CSS doesn't see the orientation as landscape and ignores all the CSS of that #media (I think it's a browser problem). Chrome and Opera have that zoom option and on both browsers, you have the same problem (not on Firefox).
So there are 2 options:
Always check your app on 100% zoom level.
Or if you think that browsers work correctly in this case...
Don't use "orientation" in your media query,
if you are not sure you need it.
I am implementing a HTML application based on responsive design.
I am using "#media only screen" for responsive styling.
I am using the below Css Code for mobile orientation(Landscape/Portrait):
#media only screen and (max-device-width: 465px), screen and (max-width: 465px)
.align {
width: 33.33%;
}
#media only screen and (max-device-width: 736px), screen and (max-width: 736px)
.align {
width: 25%;
}
The first one is for vertical and second one is for landscape styles.
The issue is when I changing the browser orientation form Portrait to landscape, the Portrait style is not removed in css both styles are in enabled state but if I reduce the browser size the vertical style is removed and the landscape style is taking the responsibility.
So How do I remove the unwanted style from my page without changing the browser window size.
You can provide some additional condition with orientation
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { /* STYLES GO HERE */ }
We can also define the css without orientation I think, by defining the media width is enough for styling
#media (max-width: 465px){
//Do your styling here
}
#media (max-width: 1024px){
//Do your styling here
}
This will help u style the css not only for mobile portrait and lanscape but also for device that are in screen size.
#media only screen and (min-width : 1824px) {}
#media only screen and (min-width : 1224px) {}
I am using these mediaqueries and these are working fine but when I see my website at 1280px resolution, it does not work
Try like this:
#media screen and (min-width: 1024px) and and (max-width:1280px)
{
.....
}
#HMS Designz, If you want to access media query 1280 to 1024 resolution. You can try like this.
#media screen and (min-width:1024px) and (max-width:1280px) {}
#media all and (min-width: 1280px) {
/* css for width greater than 1280px */
}
#media all and (max-width: 1280px) and (min-width: 1024px) {
/* css for width between 1280px and 1024px */
}
#media all and (max-width: 1023px) {
/* css for width less than 1024px */
}
Here is detailed explainition of media queries.
include this in <head></head> (if you have not)
<meta name="viewport" content="width=device-width, user-scalable=no" /> <-- user-scalable=yes if you want user to allow zoom -->
change you #media style as this // change width as per your requirements
#media only screen (max-width: 500px) {
// or as per your needs, as I try to explain below
}
Now I try to explain maybe..:)
#media (max-width:500px)
for a window with a max-width of 500px 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:500px)
for a device with a screen and a window with max-width of 500px apply the style. This is almost identical to the above except you are specifying screen as opposed to the other media types the most common other one being print.
#media only screen and (max-width:500px)
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.
If
That's what media queries are: logical if statements. "If" these things are true about the browser, use the CSS inside.
And
The keyword and.
#media (min-width: 600px) and (max-width: 800px) {
html { background: red; }
}
Or
Comma separate.
#media (max-width: 600px), (min-width: 800px) {
html { background: red; }
}
Technically these are treated like to separate media queries, but that is effectively and or.
Not
Reverse the logic with the keyword not.
#media not all and (max-width: 600px) {
html { background: red; }
}
Just doing not (max-width: 600px) doesn't seem to work for me, hence the slightly funky syntax above. Perhaps someone can explain that to me. Note that not only works for the current media query, so if you comma separate, it only affects the media query it is within. Also note that not reverses the logic for the entire media query as a whole, not individual parts of it. not x and y = not (x and y) ≠ (not x) and y
Exclusive
To ensure that only one media query is in effect at time, make the numbers (or whatever) such that that is possible. It may be easier to mentally manage them this way.
#media (max-width: 400px) {
html { background: red; }
}
#media (min-width: 401px) and (max-width: 800px) {
html { background: green; }
}
#media (min-width: 801px) {
html { background: blue; }
}
Logically this is a bit like a switch statement, only without a simple way to do "if none of these match do this" like default.
Overriding
There is nothing preventing more than one media query from being true at the same time. It may be more efficient to use this in some cases rather than making them all exclusive.
#media (min-width: 400px) {
html { background: red; }
}
#media (min-width: 600px) {
html { background: green; }
}
#media (min-width: 800px) {
html { background: blue; }
}
Media queries add no specificity to the selectors they contain, but source order still matters. The above will work because they are ordered correctly. Swap that order and at browser window widths above 800px the background would be red, perhaps inquisitively.
Mobile First
Your small screen styles are in your regular screen CSS and then as the screen gets larger you override what you need to. So, min-width media queries in general.
html { background: red; }
#media (min-width: 600px) {
html { background: green; }
}
Desktop First
Your large screen styles are in your regular screen CSS and then as the screen gets smaller you override what you need to. So, max-width media queries in general.
html { background: red; }
#media (max-width: 600px) {
html { background: green; }
}
You can be as complex as you want with this.
#media
only screen and (min-width: 100px),
not all and (min-width: 100px),
not print and (min-height: 100px),
(color),
(min-height: 100px) and (max-height: 1000px),
handheld and (orientation: landscape)
{
html { background: red; }
}
Note the only keyword was intended to prevent non-media-query supporting browsers to not load the stylesheet or use the styles. Not sure how useful that ever was / still is.
And for media queries priorites
sources : one two three four five
You are not create any media query for 1280 px resolutions. First create media query for that resolution using following media query.
#media screen and (min-width:1024) and (max-width:1280px)
{
}
I'm building a basic web App using PhoneGap for a local company. I have created two images for the header/banner at the top of the App. One is optimised for portrait orientation and one is optimised for landscape.
I want to be able to show either one depending which way the device is held. I have been reading about media queries and frankly its a little bit over complicated for my needs, as JQuery mobile will take care of rest of the functionality for me, and I'm only using one CSS for the whole App.
Does anyone have a few simple lines of code I can add to help solve this issue?
You can use CSS media queries for portrait and landscape orientations, it is not complicated at all:
#media screen and (orientation: portrait) { ... }
#media screen and (orientation: landscape) { ... }
Using these media queries you can override background-image for any orientation.
Official documentation: http://www.w3.org/TR/css3-mediaqueries/#orientation
There are two ways of using it:
Presume you have <div> with class header:
#media screen and (orientation: portrait)
{
div.header { background-image:url(image1.jpg); }
}
#media screen and (orientation: landscape)
{
div.header { background-image:url(image2.jpg); }
}
Alternatively, you may wish to use <img> tags. In this case you will need two of them, and hide/show only one with CSS rules. Let's say, <img> tags have classes header-land and header-portrait respectively:
#media screen and (orientation: portrait)
{
.header-land { display:none; }
.header-portrait { display:inline-block; }
}
#media screen and (orientation: landscape)
{
.header-land { display:inline-block; }
.header-portrait { display:none; }
}
This is an answer about how to use media query, it's a quite easy way to solve the issue. But one prerequisite is that it's ok to show the images as css backgrounds, and not as <img ... />
Pseudo code
.my-banner {
...declarations like:
background-position:
border:
margin:
padding:
}
#media all and (max-width: 320px) {
.my-banner {
background-image: url(portrait.png);
}
#media all and (min-width: 321px) {
.my-banner {
background-image: url(landscape.png);
}