What is the way to group media queries for multiple devices of different widths?
For example something like this -
#media screen and (max-width: 480px),
#media screen and (max-width: 760px),
#media screen and (max-width: 1024px)
{
}
You can use this:
#media only screen
and (max-width:480px)
and (device-aspect-ratio: 2/3)
and (device-aspect-ratio: 40/71)
and (device-aspect-ratio: 667/375)
{
}
Couldn't you just use the following?
#media screen and (max-width:480px)
and (device-aspect-ratio: 2/3)
and (device-aspect-ratio: 40/71)
and (device-aspect-ratio: 667/375)
{
}
Related
I've been working on making a site responsive and I only tested it by resizing my browser but when I thought I was finished, I tested it on mobile and it's not working at all. This is some examples of my media queries:
#media screen and (max-width:645px) {}
#media screen and (max-width:1366px) {}
#media screen and (max-width:1024px) {}
#media screen and (max-width:980px) {}
Instead of using max-width use max-width & min-width. This way it's gonna work finely.
#media screen and (max-width: 1366px) and (min-width: 1024px) {}
#media screen and (max-width: 1024px) and (min-width: 980px) {}
#media screen and (max-width: 980px) and (min-width: 645px) {}
#media screen and (max-width: 645px) {} This is mobile first
I'm using multiple media queries for a website, and the largest (min-width:1201px) is the only one that is not implementing any changes. Here are the queries that I've used, typed exactly as seen in my CSS, and in this exact order:
#media only screen and (min-width: 320px) {}
#media only screen and (min-width:480px) {}
#media only screen (min-width: 768px) and (max-width: 991px) {}
#media only screen (min-width: 992px) and (max-width: 1200px) {}
#media screen (min-width: 1201px) {}
I have included the meta tag in the head of the index.html:
<meta name="viewport" content="width=device-width, initial-scale=1">
Another thing I found odd, is in the index.html I have applied media queries with different sized pictures for the background cover photo, and the one I used there with the min-width: 1200 worked.
I'm really hoping one of you could pinpoint what I'm missing.
Not all those queries are working. I think this is what you are after.
#media only screen and (min-width: 320px) and (max-width: 479px) {}
#media only screen and (min-width:480px) and (max-width: 767px) {}
#media only screen and (min-width: 768px) and (max-width: 991px) {}
#media only screen and (min-width: 992px) and (max-width: 1200px) {}
#media screen and (min-width: 1201px) {}
see it in action here: https://jsfiddle.net/e7wdmca4/1/
You are missing an "and" in the last query:
#media screen and (min-width: 1201px) {}
I am trying to implement some basic css media queries into my web app. No matter how I order the queries in the CSS document it will always use the last query.
My CSS is layout out
basic styles{
...
}
#mediaqueries{
styles{
...
}
}
I dont know if its an ordering issue but no matter how large I make the brower or testing device it will always the last query in the document.
Media Queries:
Regular CSS{
...
}
#media screen and (orientation : landscape) {
//changes background image for devices
}
#media screen and (orientation : portrait) {
//changes background image for devices
}
#media screen and (min-device-width: 240px) and (max-device-width: 320px) {
...
}
#media screen and (min-device-width: 320px) and (max-device-width: 480px) {
...
}
#media screen and (min-device-width: 480px) and (max-device-width: 640px) {
...
}
#media screen and (min-device-width: 640px) and (max-device-width: 800px) {
...
}
And So on
Meta tag
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
Things I have tried
#media only screen and (min-device-width: 640px) and (max-device-width: 800px)
instead of
#media screen and (min-device-width: 640px) and (max-device-width: 800px)
And
#media all and (min-device-width: 640px) and (max-device-width: 800px)
instead of
#media screen and (min-device-width: 640px) and (max-device-width: 800px)
Any ideas? My css is 1026 lines so not practical to paste the whole document sorry
When ordering the media queries, you should make sure the max-width properties go down from the highest value, so it should be just the opposite from your provided code.
The way I usually tend to deal with Media Queries is following:
#media (min-height: 992px)
{
*css here*
}
#media (max-width: 991px)
{
*css here*
}
#media (max-width: 768px)
{
*css here*
}
#media (max-width: 499px)
{
*css here*
}
And don't get me wrong, you can combine both min and max values and it is totally correct.
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