Responsive layout

Responsive Design is a concept developed about a decade ago to adapt a set of code to different terminals — rather than making a specific version for each terminal; Its purpose is to solve the mobile Internet era different device resolution, and multiple versions of CSS code production cost is too high. Traditionally, we have implemented a responsive layout in two ways:

  • Media queries

    CSS media queries have actually been around for a long time, originally designed to accommodate end-products of the last century such as printers, telegrams, and braille printing equipment. Its main syntax is:

    @media mediatype and|not|only (media feature){
  CSS-Code;
}
Copy the code

    We can adjust the media rules to provide different styles for different media devices. The CSS code below shows the example element on screens less than 600 pixels wide and is 50vm long, which is half the width of the screen. On screens larger than 600 pixels, only 300 pixels of length are displayed.

    @media screen and (max-width: 600px) {.example {
    width: 50vw; }}@media screen and (min-width: 600px) {.example {
    width: 300px; }}Copy the code

  • ResizeObserver

    ResizeObserver is used to adjust the size of page elements through JS. However, this method is so tedious that we generally don’t try it unless there is a strong need for some element:

    const resizeObserver = new ResizeObserver((entries) = > {
  const screenWidth = document.documentElement.clientWidth;
  for (let entry of entries) {
    entry.target.style.width = screenWidth > 600 ? "300px" : "50vw"; }}); resizeObserver.observe(document.querySelector(".example"));
Copy the code

Both of the above general means have a characteristic, that is, the amount of code is relatively large. As modern CSS has become more powerful, many of the original ways of writing it have become obsolete. Clamp is a new CSS3 function that is used to adjust the width of the responsive layout.

min & max

Clamp has two predecessors – min() and Max (); As the name suggests, the former is taking the minimum value and the latter is taking the maximum value. In this section, we’ll look at the min method in more detail.

The min() method takes one or more comma-separated mathematical functions, literals, or other expressions as arguments and returns the smallest value in the argument list:

property: min(expression [, expression])
Copy the code

Here are two examples:

  • width: min(8px, 9px): returns 8px width
  • font-size: min(8px + 2px, 9px): Get a 9px font size

(Note: in CSS functions, + and – must be preceded by Spaces, but * and/are not.)

However, the above two examples are meaningless in real life, because the comparison of 8px and 9px has no practical application, and Min’s home field is still in a responsive layout. Let’s look at a meaningful example:

<style>
  .css-min {
    width: min(50vw.300px);
  }

  div {
    background-color: pink;
  }
</style>

<div class="css-min">
  min(50vw, 300px) - If the viewport at 50vw is less than 300px, take the value
  of 50vw, otherwise, stay at 300px.
</div>
Copy the code

To briefly explain the above code, if the window is less than 600px, the pink area takes up half of the window width (50vw). Otherwise, keep the width at 300px. The effect is roughly equivalent to the following traditional approach — you can see that min code is much cleaner:

  • max-width

    .css-min {
  width: 50vw;
  max-width: 300px;
}
Copy the code

  • Media queries

    .css-min {
  width: 50vw;
}

@media ( min-width: 600px ) {
  .css-min {
    width: 300px; }}Copy the code

Min needs to compare the values in different units of measurement; Especially in a responsive layout, the parameters typically include units of measure that are relevant to the full screen, such as VW, VH, REM, and so on:

.example {
  width: min(var(--size)*1px.6rem + 2px.5em.10%.2vw)}Copy the code

In the same way, the Max function is taking the maximum; It is used in the same way as min, so I won’t repeat it here.

clamp

OK, we’ve spent a lot of time on the min function, what does it have to do with our main protagonist clamp? Let’s look at clamp’s definition:

Clamp (MIN, VAL, MAX) is used to restrict a value to an upper limit or a lower limit. If the value exceeds the minimum and maximum ranges, the clamp(MIN, VAL, MAX) function selects one of the two values to use

The definition is a bit abstract, but here’s an example:

.css-clamp {
  width: clamp(200px.50vw.300px)}Copy the code

This is evident in the GIF above, as the browser is constantly resized:

  • When the screen width exceeds 600px, the length of the pink area is fixed
  • When the screen width is between 400px and 600px, the pink area is proportional to the screen width
  • Until the screen width is less than 400px, the pink area becomes fixed again.

This is the effect of clamp, which accepts three parameters: minimum, preferred, and maximum; The return value is the preferred value by default, but the minimum or maximum value is returned after bounds are exceeded. Clamp (200px, 50vw, 300px) :

  • When the screen width is less than 400px, the preferred value (50vw) is smaller than the lower value (200px), so return the minimum value (200px).
  • Return the preferred value (50vw) if the screen width is between 400px and 600px and the preferred value (50vw) is between the minimum (200px) and maximum (300px).
  • When the screen width is greater than 600px, the preferred value (50vw) is greater than the upper limit (300px), using the maximum value (300px).

Clamp (MIN, VAL, MAX) is equivalent to MAX (MIN, MIN (VAL, MAX)). As mentioned above, min and Max can simplify the code for some media queries; Clamp as a more complex method, the “syntagenic sugar” effect is even more obvious. Let’s look at the amount of code used to implement the effect of clamp(200px, 50vw, 300px) using media queries:

.example {
  width: 50vw;
}

@media ( min-width: 600px ) {
  .css-min {
    width: 300px; }}@media ( max-width: 400px ) {
  .css-min {
    width: 200px; }}Copy the code

Clamp can also be used on the following data types in addition to width, margin and font-size.

  • Percentage: indicates a percentage, which is often used to determine the size of the parent object
  • Angle: For color gradients, animations, and related properties. Units include Degrees, gradians, radians, and turns
  • Time: for attributes related to animations, transition, and so on, in seconds (s) and milliseconds (ms)
  • Number: used for CSS variables (e.g.:root{--size: min(8px, 1rem)})
  • 1. Frequency dimensions, such as the height of speech, in Hertz (Hz) and kilohertz (KHz).

summary

In fact, I only talked about one CSS function, which is not very important. I think as a developer, I should pay attention to some new trends and methods. I’ve worked on multinational projects over the years, and I’ve often found that code written by other people has a unique feature — a long lasting implementation style from the last century, even when it’s already obsolete. I don’t know if you have this experience, also welcome to leave a comment.