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

This article mainly introduces "how to use updated features for responsive design". In daily operation, I believe many people have doubts about how to use updated features for responsive design. I have consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the questions of "how to use updated features for responsive design"! Next, please follow the editor to study!

Real response image

For images, we often use width: 100% to fit pictures, which is quite effective, but for larger screens, if the pixels of the image are not high enough, it will make the image look a little confused. at the same time, this method also has some disadvantages, among which the more noteworthy ones are:

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

Devices with smaller screens are also required to download large-size pictures displayed on larger screens.

When using images on a web page, we must make sure that they are optimized in terms of resolution and size. The reason is to ensure that we have the right image resolution for the right device, so we don't end up downloading images that are too large for smaller screens, which may eventually degrade the performance of the site.

In short, we need to send larger high-resolution images to larger screens and smaller low-resolution versions to smaller screens to improve performance and user experience.

HTML provides an element that specifies the exact image resource to render based on the media query you add. As mentioned earlier, instead of sending an image (usually a larger high-resolution version) to all screen sizes and zooming it to the viewport width, we specify a set of images for use in specific situations.

Next, let's take a special look at the two tags nested within the element: and

.

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

Element is required as the last child of the element, or as a fallback option if no source tag matches it.

We can also use the srcset attribute to use image density to process response images using only elements:

Another thing we can do is to write media queries in CSS based on the screen resolution of the device itself (usually measured in dots per inch or dpi), not just device viewports. This means that it is not written in the following way

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

But

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

This method allows us to decide what image to render based on the screen resolution of the device itself, which is very helpful when dealing with high-resolution images. Basically, this means that we can display high-quality images for small versions of screens that support high-resolution and low-resolution.

It is worth noting that although mobile devices have smaller screens, they usually have higher resolution, which suggests that relying on resolution alone may not be a good practice. It may result in high-resolution large images being provided to very small screens, which we do not want to see.

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

To be consistent with this idea, we can take advantage of CSS features, such as the object-fit property, which, when used with object-position, can crop the image to get better focus while maintaining the aspect ratio.

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 the minimum and maximum values in CSS

The min () function specifies the absolute minimum size to which the element can be reduced. This feature is useful to help text sizes scale correctly in different screen sizes, such as never reducing a smooth font size to less than 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 the browser never to reduce the width of the elements of the .box class to 45% or less than 600px (whichever is the smallest):

.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 the calculated value of 45% is greater than 600px, 600px is used as the width of the element.

The max () function has a similar situation. It also accepts two values, but instead of defining the minimum size of the element, we define the maximum size it can get.

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

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

Limit value

The clamp () function restricts a value to an upper and lower limit, and when the value exceeds the range of the minimum and maximum values, choose a value between the minimum and maximum values to use. It receives three parameters: minimum value, preferred value, and maximum value. Clamp () is allowed to be used in,.

Clamp (MIN, VAL, MAX) actually means max (MIN, min (VAL, MAX)), 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.

Use response units

Have you ever created a page with a headline or subtitle that works well on the PC screen, but finds it too big on your mobile device? I guess this is definitely the case, and in this section, we will show you 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 px can be regarded as absolute units, while the rest can be regarded as relative units.

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. Using pixels for response behavior can be problematic because it's fixed, but if you have elements that shouldn't be resized at all, pixels are great.

one

Relative unit

Relative units (such as%, em and rem) are more suitable for responsive designs, mainly because of their ability to scale 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 the font used by rem units to generate their calculated values. Therefore, if the user resizes the font on the browser, everything on the page will be scaled correctly according to the root size. For example, when the processing root set is 16px, the number we 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 I want to change the default size? As mentioned earlier, these are relative units, and the final dimension value will be based on the new base value. This is very useful in media queries, we just need to change the font size, and then the entire page will zoom in or out accordingly.

For example, if you change font-size to 10px in CSS, the calculated size will eventually be:

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

Note: this also applies to a percentage of 1%, 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 refers to the font size of its parent element. If the size of the specified parent element is different from that of the root element (for example, the parent element is 18px, but the root element is 16px), em and rem resolve to different calculated values. This gives us more fine-grained control over how elements respond in different response contexts.

Vh is an acronym for viewport height or visible screen height. 100vh represents 100% of the viewport height (depending on the device). Similarly, vw represents the viewport width, which means the visual screen width of the device, while 100vw represents 100% of the viewport width.

Go beyond media inquiries

Above, we only looked at a number of really powerful and relatively new HTML and CSS features, which provide us with more (and perhaps more efficient) ways to build responses. These new things are not a substitute for what we have been doing. They just give developers more choice and give us more control over the behavior of certain elements in different contexts. Whether using font size, resolution, width, focus, or anything else, we have finer control over the user experience than ever before.

At this point, the study on "how to use updated features for responsive design" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.