What is the correct way of using media queries.
Is it method
A.)
#media (max-width: 992px){
something here
}
Or method
B.)
#media (min-width: 442px) and (max-width: 992px)
Both your examples are valid, but they are different.
#media (max-width: 992px){ The screen is narrower than 992px.
#media (min-width: 442px) and (max-width: 992px){ The screen is wider than 442px, and narrower than 992px.
Related
Hi guys I was always using a simple media queries scaffold but this time round I'm trying a bit more complex approach. Of course I'm trying to write as much stuff on grid and flexbox, but we all know that websites needs media queries.
So the problem I'm facing is that if I use the below approach I'm forced to set every breaking point in order to achieve the responsive web design.
mobile -> #media (max-width: 767px)
tablet -> #media (min-width: 768px) and (max-width: 1024px)
laptop-small -> #media (min-width: 1025px) and (max-width: 1349px)
laptop -> #media (min-width: 1350px) and (max-width: 1549px)
desktop-small -> #media (min-width: 1550px) and (max-width: 1679px)
desktop -> #media (min-width: 1680px)
Now when I use this method below I was expecting that I can use any of the predefined breaking points and if the breaking point is not set, browser will use any closest one which is set.
But in practice they overlapping each other :(
mobile -> #media (max-width: 767px)
tablet -> #media (max-width: 1024px)
laptop-small -> #media (max-width: 1349px)
laptop -> #media (max-width: 1549px)
desktop-small -> #media (max-width: 1679px)
desktop -> #media (min-width: 1680px)
And the third one is working exactly the same as the second one but other way round, and queries are also overlapping each other.
mobile -> #media (max-width: 767px)
tablet -> #media (min-width: 768px)
laptop-small -> #media (min-width: 1024px)
laptop -> #media (min-width: 1349px)
desktop-small -> #media (min-width: 1549px)
desktop -> #media (min-width: 1680px)
So what I'm doing wrong? The first approach works for me but there is so much hassle to set every element to those breaking points and I think there must be another way. I would like to have a proper media query scaffold and use any breaking point I need so for example first middle one and last one if there is such a need on my design.
I just need some suggestions or hints guys.Thanks!
Edit: 28/05/2022
So, this looks like mobile first approach because all outside or below <768px is designated for mobile.
#media (min-width: 768px)
#media (min-width: 1025px)
#media (min-width: 1350px)
#media (min-width: 1550px)
#media (min-width: 1680px)
#media (min-width: 2000px)
Do I'm right here?
#media screen and (min-width: 799px) and (max-width: 800px) {
}
I have a website whose resolution is 800x600 and another 800x400. The width is always the same, but not the height. How can I make the height of the page 600 in one and 400 in another?
You can use max-height in media queries to make a website responsive for height
1 use comma for different rule
#media screen and (max-width: 995px),
screen and (max-height: 700px) {
...
}
2.using and
#media screen and (max-width: 995px)and (max-height: 700px) {
...
}
you can assign different hight with this code
#media (min-height: 400px) and (max-height: 600px) and (min-width: 799px) and (max-width: 800px) { ... }
I am adding some (#media) entries to make my website responsive, which works fine in Chrome.
However, in IE/Safari when I shrink it to the minimum width (<475px) it displays the old default with no mobile media settings displayed. All the other widths(476-1040) display fine.
My media settings are:
#media (min-width: 768px) and (max-width: 1040px){
#media only screen and (max-width: 475px){
#media (min-width: 476px) and (max-width: 575px){
#media (min-width: 576px) and (max-width: 675px){
#media (min-width: 676px) and (max-width: 767px){
#media (min-width: 768px) and (max-width: 1040px){
I have no webkit/moz etc settings added for any of the entries.
Fixed, there was a #media query for that size further down that was causing an overide.
I have 2 mediaqueries:
#media only screen and (max-width: 550px), (max-height: 550px) and (min-device-width: 500px)
and
#media only screen and (max-width: 550px), (max-height: 550px) and (min-device-width: 800px)
Why does the last one overwrite the first one? Min-device-width of the iphone 6 in portrait is not 800px, right?
I also tried min-width instead of min-device-width
The comma is an OR argument. That means in this case that as long as the max-width: 550px is true the device does not care about the following arguments.
Removing the comma and replacing them with an and should do the trick.
Like KittMedia said, you should replace the comma with an "and" so that both statements are executed.
Example:
#media only screen and (max-width: 550px) and (max-height: 550px) and (min-device-width: 800px) {
p {display: none}
}
<p>This will disappear on an iPhone 6</p>
Best way to apply media query for same width and different heights ?
For example i have this sample code
#media screen and (max-width: 1366px), screen and (max-height: 657px){
article#chapterthankyou{
width:984px;
}
}
and
#media screen and (max-width: 1366px), screen and (max-height: 768px){
article#chapterthankyou{
width:1048px;
}
}
The problem is, even on 1366 X 657 the article#chapterthankyou{
width:984px;
} style is applied.
How can i accurately apply height width conditions ? Thanks
You are close, but according to this article on the MDN, you are a little off with your logical operators.
For your code, try using this:
#media screen
and (max-width: 1366px)
and (max-height: 657px){
article#chapterthankyou{
width:984px;
}
}
And...
#media screen
and (max-width: 1366px)
and (max-height: 768px){
article#chapterthankyou{
width:1048px;
}
}
If this still does not work, then refer here for a list of different media queries, which you might find useful.