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.
Related
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;
}
}
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 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 creating a mobile application in which I am getting some error.
here my core style is for desktop:
.abc{
width:1001px;
}
#media only screen and (max-width : 320px) {
.abc{
width:320px!important;
}
}
#media only screen and (max-width : 480px) {
.abc{
width:480px!important;
}
}
Here from the above styles only the style of 480px is applying for both the 320px and 480px.
Is there any alternate suggestion to come over this problem.
This is because max-width:480px; still targets 320px too. Change the last one to:
#media only screen and (min-width: 321px) and (max-width: 480px) {
.abc {
width: 480px !important;
}
}
and this will stop that query affecting anything below 321px.
It doesn't look like you need !important This fix has nothing to do with that so I would remove that if I were you, it may mess things up in the future
An alternative solution would be to move the 320px query below the 480px. They both have the same specificity so the one that comes last in the cascade would take precedence.
set a min-width
.abc {
width: 1001px;
}
#media only screen and (max-width: 320px) {
.abc {
width: 320px;
}
}
/* set a min-width here, so these rules don't apply for screens smaller than 321px */
#media only screen and (min-width: 321px) and (max-width: 480px) {
.abc{
width: 480px;
}
}
If I'm right you should be able to remove the !important syntax too...