Implementation of Responsive Layout#

Responsive layout refers to having different layouts for the same page on different screen sizes or devices, providing a better browsing experience on both large and small screen devices. In simple terms, it means adapting the page to the terminal without creating separate pages for each terminal.

Media Queries#

Responsive layout can be achieved by using CSS media queries, which allow different style rules to be applied based on different media types. This can be done based on viewport, device height and width, device orientation, resolution, etc.

Using link tag#

<!--<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="example.css">-->
<link rel="stylesheet" type="text/css" href="example.css" media="all and (max-width:600px)"/>

Using directly in CSS#

<!--
@media mediatype and|not|only (media feature){
    /* css styles */
}
-->
<div id="t1"></div>
<style type="text/css">
    @media screen and (min-width:600px){ 
        #t1{
            height: 100px;
            width: 100px;
            border: 1px solid #eee;
            background: red;
            transition: all .5s;
        }
    }
    @media screen and (max-width:600px) { 
        #t1{
            height: 100px;
            width: 100px;
            border: 1px solid #eee;
            background: yellow;
            transition: all .5s;
        }
    }
</style>

Using @import#

/* @import url("example.css") mediatype and|not|only (media feature); */
@import url("example.css") all and (max-width:600px);

Media Types#

• all: Used for all devices.
• print: Used for printers and print preview.
• screen: Used for computer screens, tablets, smartphones, etc.
• speech: Used for screen readers and other speech devices.

Logical Operators#

• and: Represents "and", returns true when all conditions are met.
• not: Used to exclude a specific media type.
• only: Used to specify a specific media type, can be used to exclude browsers that do not support media queries.
• ,: Comma is used to combine multiple media queries into one rule, comma-separated effects are equivalent to the "or" logical operator.

Media Features#

• aspect-ratio: Defines the ratio of the width to height of the visible area of the output device.
• color: Defines the number of color components in the output device. If it is not a color device, the value is 0.
• color-index: Defines the number of entries in the color lookup table of the output device. If no color lookup table is used, the value is 0.
• device-aspect-ratio: Defines the ratio of the width to height of the screen of the output device.
• device-height: Defines the height of the screen of the output device.
• device-width: Defines the width of the screen of the output device.
• grid: Used to query whether the output device uses a grid or a dot matrix.
• height: Defines the height of the visible area of the output device.
• max-aspect-ratio: Defines the maximum ratio of the width to height of the screen of the output device.
• max-color: Defines the maximum number of color components in the output device.
• max-color-index: Defines the maximum number of entries in the color lookup table of the output device.
• max-device-aspect-ratio: Defines the maximum ratio of the width to height of the screen of the output device.
• max-device-height: Defines the maximum height of the screen of the output device.
• max-device-width: Defines the maximum width of the screen of the output device.
• max-height: Defines the maximum height of the visible area of the output device.
• max-monochrome: Defines the maximum number of monochrome components per pixel in a monochrome frame buffer.
• max-resolution: Defines the maximum resolution of the device.
• max-width: Defines the maximum width of the visible area of the output device.
• min-aspect-ratio: Defines the minimum ratio of the width to height of the visible area of the output device.
• min-color: Defines the minimum number of color components in the output device.
• min-color-index: Defines the minimum number of entries in the color lookup table of the output device.
• min-device-aspect-ratio: Defines the minimum ratio of the width to height of the screen of the output device.
• min-device-width: Defines the minimum width of the screen of the output device.
• min-device-height: Defines the minimum height of the screen of the output device.
• min-height: Defines the minimum height of the visible area of the output device.
• min-monochrome: Defines the minimum number of monochrome components per pixel in a monochrome frame buffer.
• min-resolution: Defines the minimum resolution of the device.
• min-width: Defines the minimum width of the visible area of the output device.
• monochrome: Defines the number of monochrome components per pixel in a monochrome frame buffer. If it is not a monochrome device, the value is 0.
• orientation: Defines whether the height of the visible area of the output device is greater than or equal to the width.
• resolution: Defines the resolution of the device.
• scan: Defines the scanning process of TV-like devices.
• width: Defines the width of the visible area of the output device.

Units#

Percentage Units#

When the unit of measurement is set to percentage, the width and height of browser components can change accordingly with the size of the browser.

• When using percentages in the height or width of a child element, it is relative to the direct parent element. The width is relative to the parent element's width, and the height is relative to the parent element's height.
• If a percentage is set for the top and bottom of a child element, it is relative to the height of the directly positioned parent element (non-static). Similarly, if a percentage is set for the left and right, it is relative to the width of the directly positioned parent element (non-static).
• If a percentage is set for the padding of a child element, whether in the vertical or horizontal direction, it is relative to the width of the direct parent element and is not related to the parent element's height.
• If a percentage is set for the margin of a child element, whether in the vertical or horizontal direction, it is relative to the width of the direct parent element.
• When setting border-radius as a percentage, it is relative to the element's own width. Similarly, translate, background-size, and others are also relative to the element's own width.

em unit#

em is a relative length unit that is relative to the font size of the current object's text. If not set, it is relative to the browser's default font size of 16px. em inherits the font size of the parent element, so when using it, you need to recalculate the em value of the child element to avoid the phenomenon of 1.2*1.2=1.44. Using em allows elements to dynamically adjust their layout based on font size.

rem unit#

The rem unit is relative to the font-size of the root element html. The font-size of the root element serves as a baseline. When the size of the page changes, you only need to change the value of font-size, and the size of elements using rem as a fixed unit will also change accordingly. Therefore, if you want to achieve a responsive layout using rem, you only need to dynamically change the font-size of the root element based on the size of the viewport.

vh vw vmin vmax#

• vh: Relative to the height of the viewport, 1vh is equal to 1% of the viewport height.
• vw: Relative to the width of the viewport, 1vw is equal to 1% of the viewport width.
• vmin: The smaller value between vw and vh.
• vmax: The larger value between vw and vh.

Scaling#

Create a responsive layout by dynamically controlling the scaling ratio of the webpage view.

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />

Adaptive Layout#

Adaptive layout is usually achieved by detecting the User-Agent to determine whether the current device being accessed is a PC, tablet, or mobile phone. Alternatively, it can be achieved by detecting the window resolution and requesting the server to redirect or return different pages. It requires developing multiple pages to adapt to different devices. Adaptive layout is often used in conjunction with responsive layout. It can be implemented by developing a set of PC pages and a set of mobile pages, both of which implement responsive layout for different ranges of resolutions. This approach can avoid large CSS stylesheets and provide a better browsing experience.

Daily Question#

References#