Responsive layout design process

What is responsive?

Responsive web design (RWD) refers to a set of application user interface (User Interface) that can automatically respond to different device windows or screen sizes and content, and the layout rendering performance is good.

What is adaptive?

Adaptive design (AWD) refers to an application that uses multiple versions of the user interface. For different device screens, the server returns different versions of the user interface for user access.

1. Responsive design steps

1. Set meta tags

In <head>adding this meta tag tag, view the following tag tells the browser, using the device's width as the width and prohibit the initial view of the zoom.

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

2. Set the style through media query

Media Queries is the core of responsive design. It tells the browser how to render the page for the specified view width based on the conditions.

If the resolution of a terminal is less than 980px, you can write:

@media screen and (max-width: 980px) {
  #head { … }
  #content { … }
  #footer { … }
}

3. Set multiple view widths

If we want to set a view compatible with iPad and iPhone, we can set it like this:

/** iPad **/
@media only screen and (min-width: 768px) and (max-width: 1024px) {}
/** iPhone **/
@media only screen and (min-width: 320px) and (max-width: 767px) {}

Second, pay attention when designing

1. Width usage percentage

#head { width: 100% }
#content { width: 50%; }

.row{
  width: 100%;
}
.row .col-1 {
  width: 8.33333333333%
}

.row .col-2 {
  width: 16.6666666667%
}

/* 省略... */

.row .col-12 {
  width: 100%
}

2. The method of dealing with image scaling

Use percentages, but this is not friendly, will enlarge or reduce the picture.
Specify the maximum width of the image as a percentage. If the picture exceeds, it is reduced; if the picture is small, the original size is output.

img { width: auto; max-width: 100%; }

Combine the attr attribute of css3 and the function of HTML custom attribute

HTML structure:

<img src="image.jpg"
     data-src-600px="image-600px.jpg"
     data-src-800px="image-800px.jpg"
     alt="">

CSS style:

@media (min-device-width:600px) {
    img[data-src-600px] {
        content: attr(data-src-600px, url);
    }
}

@media (min-device-width:800px) {
    img[data-src-800px] {
        content: attr(data-src-800px, url);
    }
}

3. Other attributes

For example pre , iframe, video etc., need imgto control the width as well. For table, it is recommended not to increase the padding attribute, the content used in low resolution is centered:

table th, table td { padding: 0 0; text-align: center; }

reference

Cauchy, not you

Published 19 original articles · won 9 · 3003 visits

Private letter concerns