Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to use the updated HTML and CSS features for responsive design. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

In addition to using media queries and modern CSS layouts (such as flexbox and grid) to create responsive sites, we can also do some neglected things to make responsive sites. In this article, we'll explore a number of available tools (around HTML and CSS), from response images to relatively new CSS functions that work fine whether we use media queries or not.

In fact, when media queries are used with these functions, they are more of a complement than a complete method. Let's see how it works.

A real responsive image

Remember when we could write width: 100% on the picture, and then we could get off work? Of course, this is effective, and it does make the picture more flexible, but it also brings some disadvantages, the most obvious of which include:

The image may deform to the point where it loses focus.

Smaller devices still download full-size images.

When using images on the network, we must ensure that they are optimized in terms of resolution and size. The reason is to ensure that we have the right image resolution to adapt to the right device, so we will not end up downloading very large and heavy images for smaller screens, which may degrade the performance of the site.

To put it simply, we want to ensure that larger, high-resolution images are sent to the large screen, while smaller, low-resolution changes are sent to the small screen to improve performance and user experience.

HTML provides an element that allows us to specify the exact image resource to render based on the media query being added. As mentioned earlier, instead of sending an image (usually a large, high-resolution version) to all screen sizes and zooming it to the viewport width, we specify a set of images for a specific situation.

Let's look specifically at the two tags nested within the element: and

.

The browser looks for the first element of the media query that matches the width of the current viewport, and then displays the correct image (specified in the srcset property).

The element is the last child of the element and is used as a backup option if no original source tag matches.

We can also use image density through the srcset property to only use the

Element to process the response image:

Another thing we can do is to write media queries in CSS based on the screen resolution of the device itself (usually in dots per inch or dpi units), not just the device viewports. This means, instead of:

@ media only screen and (max-width: 600px) {/ * Style stuff * /}

We now have:

@ media only screen and (min-resolution: 192dpi) {/ * Style stuff * /}

This approach allows us to decide what image to render based on the screen resolution of the device itself, which may be helpful when dealing with high-resolution images. Basically, this means that we can display high-quality images for screens that support higher resolution and smaller versions at lower resolution. It is worth noting that although the screens of mobile devices are small, they usually have high resolution. This means that relying solely on resolution may not be the best idea when deciding which picture to render. This may cause large, high-resolution images to be displayed on a very small screen, which may not be the version we really want to display on such a small screen.

Body {background-image: picture-md.png; / * the default image * /} @ media only screen and (min-resolution: 192dpi) {body {background-image: picture-lg.png; / * higher resolution * /}}

What is provided to us is basically the ability to direct the art of the image. And, according to this idea, we can take advantage of the features of CSS, such as the object-fit property, and when used with object-position, we can crop the image to get better focus while maintaining the aspect ratio of the image.

Therefore, to change the focus of the image:

@ media only screen and (min-resolution: 192dpi) {body {background-image: picture-lg.png; object-fit: cover; object-position: 100% 150%; / * moves focus toward the middle-right * /}}

Set up minimum and maximum in CSS

The min () function specifies the absolute minimum size to which an element can be reduced. This function is useful in helping text sizes scale appropriately between different screen sizes, such as never letting the fluid type fall below a clear font size:

Html {font-size: min (1rem, 22px); / * Stays between 16px and 22px * /}

Min () accepts two values, which can be relative, percentage, or fixed units. In this example, we tell browsers never to allow elements with .box classes to be less than 45% wide or 600px, whichever has the smallest viewport width.

.box {width: min (45%, 600px)}

If the calculated value of 45% is less than 600px, the browser will use 45% as the width. Conversely, if 45% of the calculated value is greater than 600px, then the width of the element will use 600px.

The same goes for the max () function, which also accepts two values, but instead of specifying the minimum size of an element, it defines its maximum size.

.box {width: max (60%, 600px)}

If 60% calculates a value greater than 600px, the browser uses 60% as the width. Conversely, if 60% of the calculated value is less than 600px, then 600px will be used as the width of the element.

Clamp (Clamping) value

Many of us have been clamoring for clip () for some time, and we actually have widespread support in all modern browsers (sorry, IE). Clamp () is a combination of the min () and max () functions and accepts three parameters:

Minimum value

Preferred value, and

Maximum value

For example:

.box {font-size: clamp (1rem, 40px, 4rem)}

The browser sets the font to 1rem until the calculated value of 1rem is greater than 40px. And when the calculated value is greater than 40px? Yes, browsers will stop increasing their size after reaching 4rem. You can see how to use clip () to smooth elements without using media queries.

Cooperate with the response unit

Have you ever created a page with a headline or subtitle and envied how good it looks on the desktop screen, only to find it too big when you check it on a mobile device? I am sure to encounter this situation, and in this section, I will explain how to deal with such problems.

In CSS, you can use various units of measurement to determine the size or length of an element. The most common units of measurement include: px,em,rem,%,vw and vh. Although, there are some less commonly used units. What we are interested in is that the px can be thought of as an absolute unit and the rest as a relative unit.

1. Absolute unit

Pixels (px) are considered absolute units, mainly because pixels are fixed and do not change with the measurement of any other element. You can think of it as a basic unit or root unit used by some other relative units. Trying to use pixels for response behavior may be problematic because it is fixed, but if you have elements that should not be resized at all, they are good.

two。 Relative unit

Relative units, such as%, em, and rem, are more suitable for responsive designs, mainly because they can be scaled across different screen sizes.

Vw: width relative to viewport

Vh: height relative to viewport

Rem: relative to the root () element (default font size is usually 16px)

Em: relative to parent element

%: relative to parent element

Similarly, the default font size for most browsers is 16px, which is used by rem units to generate calculated values. Therefore, if the user adjusts the font size on the browser, everything on the page will be scaled correctly according to the root size. For example, when processing a root with 16px, the number you specify will be multiplied by that number by the default size. For example:

.8rem = 12.8px (.8 * 16) 1rem = 16px (1 * 16) 2rem = 32px (2 * 16)

What if you or the user changes the default size? As we have said, these are relative units, and the final dimension value will be based on the new basic size. This is useful in media queries, where you only need to change the font size and the entire page will zoom in or out accordingly.

For example, if you change the font size to 10px in CSS, the calculated size will become.

Html {font-size: 10px;} 1rem = 10px (1 * 10) 2rem = 20px (2 * 10) .5rem = 5px (.5 * 10)

Note: this also applies to percentage%. For example:

100% = 16px; 200% = 32px; 50% = 8px

What is the difference between rem and em units? Rem uses the font size of the root element () to calculate the value, while the element that declares the em value references the font size of the parent element that contains it. If the size of the specified parent element and root element is different (for example, the parent element is 18px, but the root element is 16px), then em and rem will resolve to different calculated values. This gives us more fine-grained control over how our elements respond in different response environments.

Vh is the acronym for viewport height, which is the height of the visual screen, and 100vh represents 100% of the viewport height (depending on the device). Similarly, vw represents the viewport width, meaning the visual screen width of the device, and 100vw literally represents the viewport width of 100%.

Go beyond media inquiries

Did you see that? We have just seen some very powerful and relatively new HTML and CSS features that provide us with additional (and perhaps more effective) ways to build responsiveness. This is not to say that these new technologies have replaced what we have been doing. They are just more tools in our developer toolbelt, giving us more control over how elements behave in different contexts. Whether it's font size, resolution, width, focus, or anything else, we have more control over the user experience than ever before.

So the next time you find yourself working on a project, you want to have more control over the exact look and feel of the design on a particular device, and see what native HTML and CSS can do to help things have grown to incredible levels.

This is the end of the article on "how to use the updated HTML and CSS functions for responsive design". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.