My screen resolution is: 1280 x 768
I have two queries but whatever one is last to activate gets used which is not what i want. The one that gets activated is: 1280 x 720. What i dont get is my screen is 1280 x 768? Why does it not work?
Screen 1280 x 768:
#media only screen
and (min-device-height: 768px)
and (max-device-width: 1280px)
and (orientation: landscape)
{
body {
background-color: lightgreen;
}
}
Screen 1280 x 720:
#media only screen
and (min-device-height: 720px)
and (max-device-width: 1280px)
and (orientation: landscape)
{
body {
background-color: blue;
}
}
device-width/device-height has been deprecated
This feature has been removed from the Web standards. Though some
browsers may still support it, it is in the process of being dropped.
Avoid using it and update existing code if possible; see the
compatibility table. Be aware that this feature may cease to work
at any time.
In this case, when using min-*, the query with the highest height value needs to be last or else it does not work
And if you use min-height, I guess you'll get the expected result
Note, it's not the computer's screen width that counts, it's the browsers viewport, so if your computer screen is 1280x768 you need to run the browser in full screen for it to work
#media only screen and (min-height: 720px) {
body {
background-color: blue;
}
}
#media only screen and (min-height: 768px) {
body {
background-color: lightgreen;
}
}
If you also want this to only work on screen with a max-width, do like this
#media only screen and (min-height: 720px) and (max-width: 1280px) {
body {
background-color: blue;
}
}
#media only screen and (min-height: 768px) and (max-width: 1280px) {
body {
background-color: lightgreen;
}
}
And of course, limited for landscape will look like this
#media only screen and (min-height: 720px) and (max-width: 1280px) and (orientation: landscape) {
body {
background-color: blue;
}
}
#media only screen and (min-height: 768px) and (max-width: 1280px) and (orientation: landscape) {
body {
background-color: lightgreen;
}
}
Related
I created a media query for phones
#media screen and (max-device-width: 480px), screen and (max-width: 480px) { ...css here... body {width:50%;}
but i need this query for desktop
#media screen and (max-device-width: 750px), screen and (max-width: 750px)
if i add like to #media desktop query .body {width:100%;} the settings is changed in 480px also.
My question is: How i separate 480px css settings, and 750px css settings to be different
method A:
write larger width queries before smaller so they can overwrite them
#media screen and (max-width: 750px){
body{
width:100%;
}
}
#media screen and (max-width: 480px){
body{
width:50%;
}
}
method B:
define min-width as well:
#media screen and (max-width: 750px) and (min-width: 481px){
body{
width:100%;
}
}
#media screen and (max-width: 480px){
body{
width:50%;
}
}
NOTE:i think that you dont need both max-device-width and max-width
I am new to #media screen so please be gentile.
I do not have a fluid setup but rather a fixed setup for 3 different device setups.
Mobile = max-width 500px.
Tablet = max-width 740px.
Laptop/desktop/desktop hd = width 980px.
--
So am I correct is saying the following:
#media (max-width: 500px) { }
#media (max-width: 740px) { }
#media (min-width: 741px) { }
You need to have the smallest screen-width last, like this:
#media (min-width: 741px) { }
#media (max-width: 740px) { }
#media (max-width: 500px) { }
As the CSS reads from the top to the bottom, then with your max-width: 740px will overlap, as 320px is still less than 740px.
You could also set a min-width:
#media (max-width: 500px) { }
#media (min-width:501px) and (max-width: 740px) { }
#media (min-width: 741px) { }
Then you can place them as you want.
EDIT:
This is actually better:
[ CSS For 741px and above here ]
#media (max-width: 740px) { }
#media (max-width: 500px) { }
This way, you just need to fix widths, font-sizes and such in the media-queries, and you don't need to write background-colors and font-colors if they should stay the same.
I am looking for the best way to set a specific style on an element but I only want it to apply when the screen size is less than the screen height. So far I am doing it this way
#media (max-width: 320px) and (max-height : 480px) {
}
#media (max-width: 360px) and (max-height : 640px) {
}
#media (max-width: 768px) and (max-height : 1024px) {
}
#media (max-width: 800px) and (max-height : 1280px) {
}
#media (max-width: 980px) and (max-height : 1280px) {
}
Is there a simplier way to do this or is this the only way?
Thanks ahead.
This is one of the best way,but you can try with jquery.
Two Methods:
1. JavaScript:
if(window.innerHeight > window.innerWidth){
portrait = true;
}else{
portrait = false;
}
2. CSS:
#media screen and (orientation:portrait) { … }
#media screen and (orientation:landscape) { … }
Out of these two in CSS, choose whichever you want depending on height>width or width>height
I am trying to figure out if there should be an order (Increasing or decreasing) while giving #media in the css.
I am using some media with min-width, then if i write it in following order then what difference does it make with if i place it in increasing or decreasing order.
#media only screen and (min-width: 1000px) {
}
#media only screen and (min-width: 1365px) {
}
#media only screen and (min-width: 1280px) {
}
#media only screen and (min-width: 900px) {
}
#media only screen and (min-width: 1150px) {
}
If you are using min-width, then start with the minimum. because if browser gets two css condition suitable, it picks the later one. for example in following case-
#media only screen and (min-width: 1280px) {
}
#media only screen and (min-width: 900px) {
}
now if browser width is more than 1280, both condition are suitable for it. in this case it will pick second condition, i.e. (min-width: 900px). while it must choose (min-width: 1280px).
So always keep its order in mind.
Also same apply for the max-width condition. also give css condition with max-width in decreasing order. so you got the following -
for min-width
#media only screen and (min-width: 900px) {
}
#media only screen and (min-width: 1150px) {
}
#media only screen and (min-width: 1280px) {
}
for max-width
#media only screen and (max-width: 1280px) {
}
#media only screen and (max-width: 1150px) {
}
#media only screen and (max-width: 900px) {
}
I am using this media query for target viewport max-width of 800px devices mininmum with of 400px
#media screen and (max-width: 800px) and (min-device-width: 400px)
{
body {background:#fff;}
}
And i need to change the color in the landscape orientation for this i use this code
#media screen and (orientation:landscape)
{
body {background:red;}
}
its working good in the device but the background red applies for pc browsers also how to apply background red in devices landscape orientation only?
Thank you.
You aren't choosing an element to apply the background to
#media screen and (orientation:landscape)
{background:red;}
Should be something like:
#media screen and (max-device-width: 1000px)
and (orientation:landscape){
body {
background: red;
}
}
The max-device-width should make it ignore desktops, if you don't put device in there, it will still affect desktops that have made their browser smaller.
try in this way
#media screen and (max-width: 800px)
and (min-width: 400px) {
body {
background: white;
}
}
#media screen and (max-width: 800px)
and (min-width: 400px)
and (orientation:landscape) {
body {
background: red;
}
}
or try to detect handheld-only devices looking at the min-resolution value as in http://jsbin.com/irozuf/1/edit - e.g.
#media screen and (max-width: 800px)
and (min-width: 400px)
and (min-resolution: 97dpi) /* a typical screen has 96dpi */
and (orientation:landscape) {
body {
background: red;
}
}
Looking at this list of displays by pixel density it seems that it could work fine on modern mobile devices
if you add these meta tags to head of page:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
so the key: "width" means same "device-width".so,
#media screen and (max-device-width: 1000px){}
is equal to
#media screen and (max-width: 1000px){}
use each one you like:
[meta tags with key "width"]
OR
[no meta tags but "device-width"]