Responsive Design

Responsive design is a concept introduced by Ethan Marcotte in May 2010, where the corresponding worth is the ability of web pages to behave differently on different sizes and types of devices.

A well-designed responsive page can provide a comfortable and beautiful interface, easy interaction and good user experience on multiple devices, achieving the effect of “Once write run everywhere”. This concept was born to serve the mobile Internet.

Originally, the concept of responsive design was used in CSS3 to determine the type of device through Media Query and set the appropriate style sheet for each device.

In practice, many developers also use JS to make additional judgments about the type of device.
For example, JS can accurately determine whether a device is Android or Apple iOS, which is not possible with CSS3 Media Query.
And because you can get the document elements and set the style for them through JS, using JS to control the view performance of the device also belongs to responsive design.

Media Inquiries

The core element in media query is media.
media is a keyword by which we determine the different device types and predefine the style of DOM elements in its code block.
When the device property matches a media determination, the element will adopt the style in its code block.

1
2
3
@media media_type and|not|only (exp) {
  /* CSS*/
}

media_type represents the media type, with the following optional values

Type Explanation
all All devices
braille Braille
embossed Braille printing
handheld Handheld devices
print Document printing or print preview mode
projection Project presentations, such as slides
screen Color device screen
speech Presentations
tty Fixed spacing web media such as teletypewriter
tv TV
  • exp is a conditional expression with the following available values
Media Available values Available types Can min/max be used Introduction
width Visual Screens/Touch Devices yes Defines the width of the visible area of the page in the output device
height Visual Screens/Touch Devices yes Defines the width of the visible area of the page in the output device
device-width Visual Screens/Touch Devices yes Defines the width of the visible area of the page in the output device
device-height Visual Screens/Touch Devices yes Defines the width of the visible area of the page in the output device
orientation portrait landscape Bitmap Media no portait for landscape, landscape for vertical
aspect-ratio Bitmap Media yes Defining the browser aspect ratio
device-aspect-ratio Bitmap Media yes Define the screen aspect ratio
color Visual Media yes Defines the number of color originals for the output device, if it is not a color device, the value is 0
color-index Visual Media yes Defines the number of entries in the color lookup table of the output device, or 0 if no color lookup table is used 
1
2
3
4
5
6
7
8
9
10

<link rel="stylesheet" type="text/css" media="only screen and (max-width: 415px), only screen and (max-device-width: 415px)" href="index.css"/>

<style>
  @media screen and (min-width: 415px) and (max-width: 1368px) {
    .header  {
      height: 80px;
    }
  }
</style>

Common cell phone screen width will not exceed 415px, screen more than 1368px devices are generally large-screen computers, mostly desktop computers

JS layout

Using JS for responsive design can be seen as a biased move. In addition to JS being more accurate in determining device type, JS is also essential when the layout requires complex calculations due to the lack of a mature calculation system for CSS (calc alone is not enough).
Here’s an example of using JS to determine the device type (whether the device is using iOS or Android):

1
2
3
4
5
6
7
8
9
10
compoted: {
   isAndroid () {
    let u = navigator.userAgent
    return u.indexOf('Android') > -1 || u.indexOf('Adr') > -1
  },
  isIOS () {
    let u = navigator.userAgent
    return !!u.match(/\(i[^;]+;(U;) ? CPU.+Mac OS X/)
  }
}

This code determines the device type by whether the user’s device information contains a specific keyword, which is an extremely common practice, although media queries cannot do this.
We can then use dynamic class names, dynamic styles or direct JS to style DOM elements based on these two calculated properties.