Max-Width VS. Min-Width

Max-Width vs. Min-Width

It really depends on how your stylesheet works. For example:

@media screen and (min-width:100px) {
body { font-weight:bold; }
}

@media screen and (min-width:200px) {
body { color:#555; }
}

The above two media queries would make the body font bold if the screen is greater than or equal to 100px, but also make the color #555 if it's greater than or equal to 200px;

Another example:

@media screen and (max-width:100px) {
body { font-weight:bold; }
}

@media screen and (max-width:200px) {
body { color:#555; }
}

Unlike the first example, this makes the body font bold and color #555 only if the screen width is between 0 and 100px. If it's between 0px and 200px it will be color #555.

The beauty of media queries is that you can combine these statements:

@media screen and (min-width:100px) and (max-width:200px) {
body { font-weight:bold; color:#555; }
}

In this example you are only targeting devices with a width between 100px and 200px - nothing more, nothing less.

In short, if you want your styles to leak out of media queries you'd use either min-width or max-width, but if you're wanting to affect a very specific criteria you can just combine the two.

Min width vs Max Width

max-width in a media query means the following:

All styles applied in that media query will run as long as 'screen' is below the max width, for example, max-width: 1200px, all CSS will be applied under 1200px.

Min-width is the opposite, all CSS wil run as long as 'screen' is above the min-width, for example, min-width: 1200px, all CSS will be applied above 1200px.

Is there any difference between width and max-width when used with min-width?

Yes there is a difference. I can think about many examples but here is a basic one related to resizable content

.box {
height:50px;
border:2px solid;
overflow:hidden;
resize:horizontal;
min-width:80px;
}
<div class="box" style="width:80px;">

</div>

<div class="box" style="max-width:80px;">

</div>

Media Queries min-width VS max-width for responsive website

In its current form, your question is primarily opinion based.

It would have probably been better to ask if anyone knows what the reasons behind Bootstrap's approach might have been, although that question is, too, primarily opinion based. But your true chances of getting it answered are much higher here than trying to contact Bootstrap's authors.

And that's why I'll give you my own reasoning, coming from a hands-on approach: I need to get stuff done, it has to be fast and it has to be production ready.


As far as the order of @media queries goes, the only argument for using mobile-first over desktop-first is it sounds better for people who have no clue what it means. So you can always reply to your clients/boss, when they ask:

— Is it "mobile-first"?

— Of course, we use the latest technology...

But, in the real world, as long as your @media queries apply correct code to each responsiveness interval, you're doing-it-right.

The only things you should worry about are, in this order, where possible:

  • writing valid code
  • writing cross-device/cross-browser code
  • writing maintainable and easily readable code (for you and other devs)
  • writing less code for same functionality.

With regard to using em vs px, this is the second attempt by Bootstrap to dump px for em in @media queries. To my knowledge, the first attempt was dumped due to lack of support and differences in em calculation on a significant share of mobile browsers, at the time. However, a citation is needed here and I'm unable to find anything about that discussion which I remember reading ~2 years ago. I'm not even sure if it was around v3 or the v4 prototype, which was being released at the time. I think it was v4, though.

Anyway, if they decided to use em in v4, em is probably safe to use now.

Edit: Looking closer into v4 beta — released just 9 days ago, it looks like what you quoted is from the scss file, later parsed into px queries into the final dist code. So I am assuming the discussion I remember reading is still valid today. In conclusion, I would advise against using em in your CSS @media queries.


Last, but not least, the screen part should only be considered when you need to take care of how your page looks printed vs how it looks on screen.

If you do need to take care of this, depending on the differences between the two, you have to assess the amount of code you would override if all your existing (screen) code applied to print vs writing all print code from scratch.

If first is faster, don't add screen to your queries and place the @media print overrides last.

If the latter is faster, wrap existing code inside @media screen, add screen to your existing queries, as Bootstrap does, and place your print code inside another @media print, so it doesn't affect screen.

Note: I prefer the first method, as it is a hands-on approach, easily testable and it usually results in less code being written.

Min and max width issues

I think you need to read more and understand better these 3 things to find out what you need. Media queries are a popular technique for delivering a tailored style sheet to different devices (from: https://www.w3schools.com/css/css3_mediaqueries_ex.asp).

max-width

The max-width property defines the maximum width of an element.

If the content is larger than the maximum width, it will automatically change the height of the element.

If the content is smaller than the maximum width, the max-width property has no effect.

Note: This prevents the value of the width property from becoming larger than max-width. The value of the max-width property overrides the width property.

Further read: https://www.w3schools.com/cssref/pr_dim_max-width.asp

min-width

The min-width property defines the minimum width of an element.

If the content is smaller than the minimum width, the minimum width will be applied.

If the content is larger than the minimum width, the min-width property has no effect.

Note: This prevents the value of the width property from becoming smaller than the min-width.

Further read: https://www.w3schools.com/cssref/pr_dim_min-width.asp

Best Practice

Of course by changing min-width to max-width in media queries, or vice versa. It would change the layout it should be. We need to be more persistent on what we need the media query to handle the style. We should decide, only use min-width, or only use max-width. Don't use both or the frontend developer will be going insane on something hard to solve when the frontend styling bug comes.

Useful Link(s)

Max-Width vs. Min-Width

@Media min-width & max-width

I've found the best method is to write your default CSS for the older browsers, as older browsers (including IE 5.5, 6, 7 and 8) can't read @media. When I use @media, I use it like this:

<style type="text/css">
/* default styles here for older browsers.
I tend to go for a 600px - 960px width max but using percentages
*/
@media only screen and (min-width: 960px) {
/* styles for browsers larger than 960px; */
}
@media only screen and (min-width: 1440px) {
/* styles for browsers larger than 1440px; */
}
@media only screen and (min-width: 2000px) {
/* for sumo sized (mac) screens */
}
@media only screen and (max-device-width: 480px) {
/* styles for mobile browsers smaller than 480px; (iPhone) */
}
@media only screen and (device-width: 768px) {
/* default iPad screens */
}
/* different techniques for iPad screening */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
/* For portrait layouts only */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
/* For landscape layouts only */
}
</style>

But you can do whatever you like with your @media. This is just an example of what I've found best for me when building styles for all browsers.

iPad CSS specifications.

Also! If you're looking for printability you can use @media print{}.

How does clamp() differ from setting width, max-width, & min-width?

I am wondering what the fundamental difference is

They are completely different so it's wrong to assume they are the same. I can give you a lot of examples where they behave differently but here is only one that should be enough to demonstrate that they are not the same:

.item1 {
width: 100%;
max-width: 300px;
min-width: 200px;
}

.item2 {
width: clamp(200px, 100%, 300px);
}

.container {
display: flex;
height:80px;
margin:10px;
width:150px;
border: 2px solid;
}

.container>* {
background: red;
}
<div class="container">
<div class="item1"></div>
</div>
<div class="container">
<div class="item2"></div>
</div>

Why is min-width property has preference over max-width?

From the MDN page:

max-width overrides width, but min-width overrides max-width

So i think there is no way to make max-width have higher priority than min-width



Related Topics



Leave a reply



Submit