Min-Width and Max-Width with the Same Value

Can min-width and max-width be set to same value in @media?

Yes it is okay to use it like you mentioned above. But you can use the exact width like this:

@media screen and (width: 980px) { 
    
}

How to combine a min-width with a max-width that equals to 100% if needed in CSS?

Its seems like clamp(MIN, VAL, MAX) is your answer in this case.
The clamp() CSS function clamps a value between an upper and lower bound. clamp() enables selecting a middle value within a range of values between a defined minimum and maximum. It takes three parameters: a minimum value, a preferred value, and a maximum allowed value. The clamp() function can be used anywhere a length, frequency, angle, time, percentage, number, or integer is allowed.

clamp(MIN, VAL, MAX) is resolved as max()(MIN, min()(VAL, MAX))

https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()

@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{}.

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

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>

---

Related Topics