Responsive layout

  1. The idea of responsive Web design is to render Web pages in a friendly manner on all sizes of devices and Windows for a good browsing experience.
  2. The responsive layout automatically adjusts and ADAPTS to the screen size of any device, be it a PC, tablet or phone.

1. Control viewport

Controlling viewports, whether responsive, adaptive or mobile, is the most important aspect. We often use this sentence:

<meta name="viewport" content="Width = device - width, initial - scale = 1.0, the maximum - scale = 1.0, the minimum - scale = 1.0, user - scalable = no"">
Copy the code

Viewport is the default width and height of the web page. The default width of the web page is equal to the screen width (width=device-width), and the initial scale (initial-scale=1) is 1.0, i.e. the initial size of the web page is 100% of the screen area.

The width of the viewport is equal to the width of the device. The initial zoom ratio, maximum zoom ratio and minimum zoom ratio are both 1. For details, see MDN-meta. Here, the device pixel ratio (DPR) is the ratio of physical pixels to individual pixels of the device, such as retina display.

2. Media query

Creating a media query generally requires the following parts: media type, media characteristics, and logical conditions.

Using @media queries, you can define different styles for different media types.

@media screen and (max-width: 800px) {
  body {
    background: #ccc; }}Copy the code

2.1 Media Types

Media type refers to the type of the user device that displays the page. Common media types include the following:

  • All: indicates all device types, which are default. When the media type is omitted in the following example, all types of devices are matched by default.
  • Screen: all devices that are not print or Speech.
  • Print: printer device.
  • Speech: a screen reader or similar speech device.
/* * */
@media (max-width: 320px) {... }@media all and max-width: 320px{... }Copy the code

Due to the rapid development of mobile devices, Web pages may be displayed on a variety of devices, such as mobile phones, tablets and wearables. It is a difficult task to detect device features using only media types, so more media features are usually needed to be combined for judgment.

2.2 Media Features

Media queries support a wealth of device features. In addition to width and height queries, which are most commonly seen, there are other media features such as orientation and resolution that are useful for detecting devices

Device characteristics The values
width Length value, such as 600px
height Length value, such as 600px

In addition, for some attributes with numeric values, media query can use the prefix min- or Max – to represent the range, which provides a more convenient judgment method for media query. For example, if max-width: 320px is used to indicate that the viewport width of the device is less than or equal to 320px, min-width: 321px is used to indicate that the viewport width is greater than or equal to 321px.

@media (max-width: 320px) { /* viewports <= 320px */ }
@media (min-width: 321px) { /* viewports >= 321px */ }
Copy the code

2.3 Logical Conditions

  • Multiple media query conditions can be combined by using logical conditional keywords such as AND, not, and only.

  • Use the AND operator to merge media properties

  • Use not to avoid using the current media query rule under certain conditions

  • Using only allows you to use rules only under certain conditions

// The example is greater than width700pxIs used only in landscape mode.@media (min-width: 700px) and (orientation: landscape) { ... } // Media query matches viewPort width greater than320pxIt is not a printer device.@media not print and (min-width: 320px) {... } // Only if the viewport width is greater than320pxFor use in screen devices@media only screen and (min-width: 320px) {... }Copy the code

2.4 Setting a breakpoint using media Query

  • How to choose response points for site content, i.e. how to choose differentviewportThe values of min-width and max-width ofChoose breakpoints.
  • When designing breakpoints, you can start with the minimum supported screen width and gradually increase the screen width to cover the experience of different screen sizes.
  • The setting of breakpoints depends largely on the product design; there is no code for universal media queries.

A typical device breakpoint would look like this:

/* Small devices (mobile phones, less than 600px) */
@media only screen and (max-width: 600px) {... }/* Smaller devices (portrait tablets, phones with larger screens, etc., > 600px) */
@media only screen and (min-width: 600px) {... }/* Medium sized device (landscape tablet, greater than 768px) */
@media only screen and (min-width: 768px) {... }/* Large devices (computers, greater than 992px) */
@media only screen and (min-width: 992px) {... }/* Very large device (large computer screen, greater than 1200px) */
@media only screen and (min-width: 1200px) {... }Copy the code

3. Self-adaptation of pictures

Reactive must also enable automatic scaling of the picture.

// Just one line of CSS:img { max-width: 100%; } // Older versions of IE do not support thismax-width
img { width: 100%; }
Copy the code

However, if possible, it is best to load images at different resolutions depending on the screen size.

4 adaptive pictures and other materials

There are many ways to manipulate images. We can use the HTML5 Picture tag, which can display different images on different devices. The following code:

<picture>
    <source media="(max-width: 36rem)"
        srcset="img/ad001-l-480w.png"/>
   <source srcset="img/ad001-l-1600w.png"/>! [](img/ad001-l.png)</picture>
Copy the code
  • sourceRepresents the source of the image you want to display
  • mediaWhat conditions do you need to display the picture under
  • srcsetPicture path must be filled in
  • PNG will be displayed when the viewport width of the device is larger than 36rem, ad001-L-1600W. PNG will be used if the viewport width is smaller than 36rem, and the image in the IMG tag will be used if the browser does not support picture.
  • If you want to use picture in IE9, you must import polyfill, such as html5shiv.js.

5 Do not use absolute width

Because web pages are laid out according to the width of the screen, absolute width layouts and elements with absolute width cannot be used. This one is very important.

CSS code cannot specify pixel width:

width: xxx px;
Copy the code

Percentage width can be specified or adaptive:

width: xxx %;

width: auto;
Copy the code

6 Relative size fonts

Because px is a relatively fixed unit, the uppercase size is fixed and cannot be scaled with the browser.

When it comes to relative units, the most familiar and common are EM and REM.

em

Em is the font size of the element relative to itself. If the font size is not set itself, the font size is set based on the parent element.

<style>
  h1 {
    font-size: 20px;
    margin: 1em; /* 1em = 20px */
  }
  p {
    font-size: 14px;
    padding: 1em; /* 1em = 14px */
  }
  .outer {
    font-size: 12px;
  }
  .inner {
    font-size: 2em;
    padding: 1em; /* 1em = 24px */
  }
</style>
Copy the code

rem

Rem = root em, as the name implies, em relative to the root element, calculates the size of CSS pixels based on the root element. The root element is, and its default font size is 16px.

h1 {
  font-size: 20px;
  margin: 1rem; /* 1rem = 16px */
}
p {
  font-size: 1rem; /* 1rem = 16px */
}
Copy the code

So, if we change the font size of the root element, all elements on the page that use REM will have their element attributes recalculated and redrawn.

Em and rem

Em and REM are relative units, and both can be used for responsive layout. According to their characteristics, EM and REM have advantages and disadvantages.

  • Em – For modular page elements, the element in the tag calculates the pixel size according to the parent element. Just set the font size of the outermost parent element to affect the child element simultaneously, keeping the custom element somewhat modular. Em, however, is harder to trace, requiring you to work your way up through elements with explicit font sizes.
  • Rem-convenience is the biggest benefit of REM, just need to know the font size to calculate the current actual pixel size.

7 Viewport relative unit

Viewports are relative to the viewable area on the browser, and all viewports involved in the viewport unit calculation are scrollbars. Viewport units are calculated relative to the viewport of the browser.

The vh, vw

Vh and VW are both units of calculation relative to the viewport viewport.

  • Vw-viewport width, 1vw = 1% viewport width
  • Vh-viewport height, 1vh = 1% viewport height

8 Flow layout

Flow layout means that the position of each block is floating, not fixed.

.main {
    float: right;
    width: 70%;
}

.leftBar {
    float: left;
    width: 25%;
}
Copy the code

The advantage of float: If the width is too small to fit two elements, the following element scrolls automatically below the preceding one and does not overflow horizontally, eliminating the need for horizontal scroll bars.

In addition, the use of position (absolute) should be very careful.

9 Load the CSS

The core of “adaptive web design” is the Media Query module introduced by CSS3. This means that the screen width is automatically detected and the CSS file is loaded accordingly.

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />
Copy the code

If the screen width is less than 400 pixels (max-device-width: 400px), load tinyscreen.css.

In addition to loading CSS files with HTML tags, you can also load them in existing CSS files.

@import url("tinyScreen.css") screen and (max-device-width: 400px);
Copy the code

10 Use Flex layout

11 Adaptive layout

Use JavaScript to determine window size and reference different CSS files under different conditions