Is still in the application of adaptation for you PC, mobile, tablet and thinking hard about it, how is looking for more than a set of code adaptation terminal way, if you want to quickly get started implementation across your terminal application, so, see come over, this paper responsive UI design related theoretical basis, including: Screen size, physics, device independence, CSS pixels, DPR, viewport and other related concepts, as well as the basis of responsive design, common design patterns, and the basic ideas of implementing responsive UI, hoping to deepen the understanding and practice of responsive.

Welcome to my personal blog

Responsive

What is the response? As the name suggests, it’s responsive, it’s going to automatically respond to what? The application is displayed to and accessed by users in the terminal screen window. In this case, the application responds to screen changes. Different terminals have different screen sizes.

Responsive Web Design (RWD) refers to a set of application User interfaces that can automatically respond to different device Windows or screen sizes and render content and layout well.

Adaptive

In addition to responsive design (RWD), Adaptive Web Design (AWD) is another way to fit multiple device screens.

Adaptive design (AWD) is when an application uses multiple versions of the user interface, and the server returns different versions of the user interface for users to access for different device screens.

Adaptive vs responsive

The differences between adaptive and responsive design are summarized as follows:

  1. Adaptive is multiple sets of user interfaces, whereas the latter has only one set of user interfaces;
  2. The self-adaptation requires the server to detect the resolution of the requesting device and then select the corresponding version to return.
  3. Adaptive adaptation can use different adaptation schemes in different versions, such as percentage in PC terminal, REM in mobile terminal, etc., while responsive mode requires a perfectly compatible adaptation scheme.
  4. Take the headline site for example, visitwww.toutiao.comThe PC web application is opened on the PC, and the mobile web application is redirected tom.toutiao.com, the corresponding return is the mobile version of the Web application;

Naturally, our focus here is on responsive user interface design, where one set of applications can fit multiple devices.

Mobile First

Since 2014, mobile devices have surpassed PCS in usage, so when designing responsive pages, it’s often mobile first, adapting the mobile style and layout first, and then adapting it to the PC.

Progress Enhancement

In addition, we know that there are many mobile devices, and some devices with low version or old system do not support new features of JavaScript or CSS, such as ES6, Media Query, etc. Therefore, a basic version is usually implemented, and after most devices can meet the basic functions, new functions and new features are added, and the application is gradually expanded. This is called gradual enhancement.

Screen

So the response is the response screen size, so how do you measure the screen size? Mainly from the dimension unit, device independent pixel and pixel density, etc.

Physical size (Display size/Physical size)

Screen physical size refers to the actual physical size measured according to the diagonal of the screen, such as how many inches is a screen, 5.1 or 5.5, 10.1 for a flat screen, 42 or 37 for a TV, where the inches are all measured in inches and are measured diagonally.

The diagonal length can be calculated from the width and height according to the trigonometric formula:

Logic size/Display resolution

The opposite of physical screen size is the concept of logical screen size, or display resolution. Instead of physical screen size in inches, logical screen size is measured in pixels.

Dimension

Unlike the physical size, which measures the screen size diagonally, the logical size indicates the screen size in two directions: width, height. Take a laptop with a “1024 x 768” resolution, which means the screen is 1024 pixels wide and 768 pixels high.

Device Pixel

Physical pixel, also called device pixel, actual pixel. In computer digital images, a pixel or dot is a physical point in a raster image. It is the smallest controllable element of the image displayed on the screen.

A raster image, or bitmapped image, is defined as an image composed of dots (or pixels), each of which can be represented by a variety of colors, including 2, 4, 8, 16, 24, and 32 bit colors. For example, a 32-bit color image with a resolution of 1024 x 768 occupies 3072KB(one byte is equal to eight bits) in 1024 x 768 x 32/(8 x 1024).

As shown in the figure, if the screen is enlarged to a certain extent, it can be seen that it is composed of many points (or pixels). These points (or pixels) on the screen one by one are what we call physical pixels. The different number of pixels and the different color representation of each pixel constitute the image display and determine its visual performance.

CSS Pixel

In addition to the physical pixel of described above, there is also a pixel often mentioned, is the CSS pixels, and logic pixels, virtual pixels, it just describe the concept of image unit information, usually describe the image shows a small box need color value, and that a list box points can describe an image together, This abstract unit is used in Web programming to measure the size or location of web page content.

Resolution

Resolution Refers to the device resolution, that is, the total number of physical pixels displayed on the device screen. Take a laptop with a 1024 x 768 resolution as an example. The width of the device screen is 1024 physical pixels, the height is 768 physical pixels, and the total number of pixels displayed is 1024 x 768.

Pixel density

The number of physical pixels (or dots) to be found on a screen per inch (PPI) or per centimeter (PPCM) is called the Pixel density, also called the screen density, and can be calculated by:

Pixel Density (pd) = Screen width Physical pixels/screen width in inches;Copy the code

For example, a 15-inch (diagonal) device with a 12-inch wide, 9-inch high screen and a resolution of 1024 by 768 pixels would have a pixel density of about 85PPI:

pd = 1024 ／ 12~ =768 ／ 9~ =85PPI
Copy the code

Of course, the vertical and horizontal pixel densities are not always the same, such as changing the resolution of the above example to 1280×1024, then:

  1. Horizontal:pd = 1280 / 12 ~=107PPI;
  2. Vertical:pd = 1024 / 9 ~= 114PPI;

The resolution is converted to pixel density

The pixel density formula is calculated according to the screen resolution, as follows:

  1. w<sub>p</sub>: Horizontal pixel number of resolution;
  2. h<sub>p</sub>: Resolution vertical pixel number;
  3. d<sub>p</sub>: Number of pixels of diagonal resolution;
  4. di: Diagonal physical size (inch);
  5. V<sub>pd</sub>: Pixel density, in unit of PPI;

Density classification

For simplicity, Android groups all screen densities into six common densities: low, medium, high, super high, super high, and super super high. A low-density screen has fewer physical pixels in a given physical area than a high-density screen.

Dots per inch

We’ve also heard of dots per inch (DPI), which is similar to pixel density and can be used cross-pollination, but in different domains. Pixels are usually used in computer vision displays, while dot is used mostly in printing or printing.

Device Independent Pixel (DP/DIP)

Device Independent Pixel (DP or DIP), also known as density-independent pixel, is an abstract unit based on the physical density of the screen. First, Google came up with abstract units that fit the screens of many Android devices. A virtual unit of pixels that can be used when defining a UI layout to represent a layout dimension or location.

It is a physical unit of measure based on a computer coordinate system, and physical pixels can be abstracted into virtual pixels for use in an application, which can then be converted into real physical pixels by the computer’s internal system.

This abstraction allows the mobile device to zoom across different screens to display information and user interaction, while the internal image system can translate the abstract pixel measurements in the application into actual pixel measurements, so the application can directly use abstract pixels instead of coding devices that deal with a large number of physical pixel differences. Typically, Android devices assume a “medium” density screen with a standalone pixel base of:

A device independent pixel (DP/DIP) is equal to 160 dPI (or PPI) for one physical pixel on the screen, which is equal to 1/160 of an inch.Copy the code

Windows defines a device-independent pixel as a physical pixel on a 96Dpi screen, which is 1DP equal to 1/96 of an inch. Apple’s default is one physical pixel per device on a 72dpi screen. As the system runs, any scaling of the DP units is handled transparently according to the actual density of the current screen.

The computing device is pixel independent

How do you calculate the device independent pixels of a device? According to the above introduction, the following equation of DP and Inch can be obtained:

  1. *ratio*: Indicates the default ratio specified by the device system.
  2. inch: Physical size, in inches;

Therefore, the conversion relationship between DP and physical pixels can be obtained:

  1. V<sub>pd</sub>: Device pixel density;
  2. PPI*inch:pixel/inch * inch = pixel;

For example, when the screen density is 240dpi (or PPI), that is, Vpd = 240, 1 dip is equal to 1.5 physical pixels.

Device Pixel ratio (DPR)

A common concept about physical pixels, device independent pixels, or CSS pixels is the Device Pixel ratio (DPR). It describes how many actual pixels are used to render a device independent pixel. It is calculated as follows:

  1. N<sub>dp</sub>: Actual number of pixels on the device screen;
  2. N<sub>px</sub>: Number of screen device pixels (PC is usually equal to CSS pixels);
  3. dpr: Device pixel ratio;

In a browser, we can use window.DevicepixelRatio to get its DPR value. A device screen with a higher DPR will use more physical pixels to represent a single device pixel, so the effect is more delicate and refined. For example, on a device with A DPR =2, one device individual pixel needs to be displayed with four physical pixels, because the width and height are twice as high.

Device independent pixels with CSS pixels

The device pixel ratio (DPR) described in the previous section usually refers to the ratio of physical pixels to device-independent pixels. We know that CSS pixels ultimately need to be converted into physical pixels to be displayed. How do CSS pixels correspond to physical pixels?

  1. As described in the previous section of device independent pixels, the ratio of device independent pixels to physical pixels on a specific device is fixed;
  2. On the PC, the ratio of device independent pixels and CSS pixels is 1:1, and CSS pixels can be converted to physical pixels in normal proportions.
  3. On the mobile side, in order to better display the page, by default it will be scaled, and the ratio of device independent pixels to CSS pixels is not 1:1, so the ratio of CSS pixels to physical pixels changes, so we see a different effect;
  4. When we use the viewport meta explicitly set the viewportwidthIs the ideal viewport, viewport width unit is the device independent pixel, set at the same timeIntial - scale = 1.0This means that if we set the CSS pixel to device-independent pixel ratio to 1.0, the CSS pixel to physical pixel conversion will work well for our UI.

UI Metrics (UI Dimension)

Measuring screen or in a particular area of the screen size, we can say that long, how many inches wide, but just a physical length concept, and in the development of the UI interface, due to the need to fit a lot of different equipment, so the measurable, comparable UI measure add abstract units, you will need to use figures we can call the UI Dimension (UI Dimension).

A dimension is specified with a number followed by a unit of measure

Dimensions are declared using a number plus a unit of measure, such as 100px, 10pt, 10in, 10dp, etc.

Inches (in)

Inches – Based on the physical size of the screen.

A unit of measurement based on the physical size of the screen, in.

UI pixels (px)

UI pixels px is a relative unit. The units that are opposite are Device Pixels. A PX may correspond to a different number of physical pixels or points on different devices, depending on the device Pixel ratio. When developing a page, this unit is often used to define the LAYOUT of the UI and the size of the content, the size of the text, can be achieved in the browser pixel display good UI interface.

However, since the use of PX units on different devices does not adapt to the size of the device screen, especially the DIFFERENCE between PC and mobile terminal, it is generally less used in responsive interfaces.

Pounds (pt)

A pound, pt, or point, is a common unit in the printing industry equal to 1/72 of an inch. It is a unit of length and is absolute, while a px is relative.

Px and pt

As mentioned earlier, px is a relative size and PT is an absolute size, so the relationship between them may differ on different devices. For example, on an Android device, if one DP is equal to one physical pixel on the screen of 160dpi, then:

1DP = 1/160 inchCopy the code

In combination with the pt unit described above:

1pt = 1 / 72 inch 
Copy the code

For a 240PPI screen, then:

  1. 1dp = 1/160 inch = 240/160 px = 1.5 physical pixels;
  2. 1px = 1 / 240 inch;
  3. 1pt = 0.35 Physical Pixels = 0.35 / DPR CSS pixels (px);

em

Em is a unit of scaling used in Web documents. 1em is equal to the font-size font size of the nearest parent element. If the nearest parent font is 14pt, 1em=14pt. The size represented by em units can be used for better style adaptation in multi-terminal browsers.

rem

Rem is also a scaling unit, similar to EM, which is based on the font size, but rem is based on the font size of the document root element and independent of the font size of the parent element. For example, if the font size attribute of the document root element < HTML > is 12pt, and the nearest parent element font is 14pt, then 1rem=12pt.

Since REM is calculated based on the font size of the root element, the calculation basis of REM unit is the same anywhere in the document, so that the size calculation is unified. However, the previous EM unit in the document is all based on the closest value of the font-size attribute of the parent element, which indicates that the EM unit is used in the parent element with different font-size values. Computing is not uniform, which is why REM is more common than EM in current PC and mobile multi-device adaptation schemes.

Percentage (%)

Width: 10pt, font-size: 14pt, width: 10% = 1pt, font-size: 14pt: 14pt, width: 10% = 1pt, font-size: 14pt: 14pt; 110% is 15.4pt (the browser will render as an integer). Note in particular that the margin,padding property is based on the current element width value when the value is a percentage.

The % unit is also a scaling unit, so it is often used for style adaptation.

Viewport

Before we can implement responsive design, we need to understand some viewport concepts.

Viewport refers to the content area in the browser window, excluding toolbars, TAB bars, and so on. It is the actual display area of the web page.

Viewport type

When developing mobile WAP applications, you need to learn more about viewports in order to develop a more user-friendly interface. Generally, viewports are divided into three types: visual viewports, layout viewports, and ideal viewports.

Visual Viewport

Visual ViewPort:

The visual viewport is The part of The page that’s currently shown on screen. The user may scroll to change The part of The page he sees, or zoom to change the size of the visual viewport.

The visual viewport is the visible area of the page on the current screen. Users can scroll to change the visible portion of the current page, or zoom to change the size of the visual viewport.

By default, the Visual Viewport can be obtained by window.innerWidth. In addition, the user can change the size of the Visual Viewport by zooming out. When zooming out, the value of the Visual Viewport becomes larger, and when zooming in, the value of the Visual Viewport becomes smaller.

In the current draft document, the window.VisualViewportAPI has been defined to get visual window objects, accessible from Chrome61 and above:

console.log(window.visualViewport.width);
Copy the code

Window. visualViewport object properties such as:

visualViewportattribute instructions
offsetLeft The spacing between the visual viewport and the left boundary of the layout viewport is represented by CSS Pixels.
offsetTop The spacing between the visual viewport and the upper boundary of the layout viewport is represented by CSS Pixels.
pageLeft The offset distance between the left boundary of the visual port and the left line of the document is represented in CSS Pixels.
pageTop The offset distance between the upper boundary of the visual port and the upper edge of the document is represented by CSS Pixels.
width The width of the visual port, in CSS Pixels;
height The height of the visual port is represented in CSS Pixels.
scale The scale, such as the size of the document magnified by 2, is returned2This value is independent of the device pixel ratiodevicePixelRatioThe influence of.

Layout viewport

The definition of layout viewport is as follows:

In the CSS layout, especially percentual widths, are calculated relative to the layout viewport, which is considerably wider than the visual viewport.

In CSS layouts, for example, the percentage width is calculated relative to the layout viewport, which is usually wider than the visual viewport.

Can pass the document layout viewport width. DocumenElement. ClientWidth or document. Body. ClientWidth to obtain.

Why the layout viewport is usually wider than the visual viewport is easy to understand:

When the width of the given document content is larger than the width of the visual window, the situation as shown in the figure will appear. The visual viewport is the visible area of the document on the screen, while the layout viewport includes the invisible area of the document, and the contents can be viewed only by scrolling.

Usually browsers set the layout viewport to 980px or 1024px by default, so you’ll usually see that it is larger than the viewport on the device screen, especially on mobile devices. In addition, you can see from the examples above that top position:fixed navigation bar, always follow the layout viewport, width: 100% corresponds to the layout viewport width.

Ideal Viewport

The ideal viewport is the screen size of the device in unit of device individual pixels (virtual pixels, which are actually converted into physical pixels for display).

The ideal viewport width can be obtained using screen.width, which is device determined and is the ideal layout viewport size for the device. For example, the ideal viewport for iphone5 is 320, iphone6 is 375, IPhone7plus is 414.

Here we set the viewport as a device independent pixel, so how does that match the CSS pixels that the UI uses? First of all, the ratio of device independent pixel to physical pixel is fixed on a specific device. Then we know that device independent pixel and CSS pixel are virtual units. On the PC side, the ratio of device independent pixel to CSS pixel is 1:1, and CSS pixel can be converted into physical pixel at a normal proportion. But on the mobile side, in order to better display the page, by default, the content will be scaled to fit the screen. At this time, the ratio of device independent pixels to CSS pixels is not 1:1, so the ratio of CSS pixels to physical pixels changes, so we see a different effect. When we use the viewport Meta to explicitly set viewport width as the ideal viewport, the unit of viewport width is device independent pixel, and set tial-scale=1.0, indicating that the ratio of CSS pixels to device independent pixel is set to 1.0. The CSS pixel to physical pixel conversion is a good representation of our UI.

viewport meta

In today’s mobile web, we often see a code like this:

 <meta name="viewport".width=device-width, initial-scale=1.0>
Copy the code

Device-width returns the ideal viewport width for the device. This code states that the layout uses the ideal viewport width for the device. In this case, if the iphone6 ideal viewport is 375 and the HTML sets width: 100%, the resulting width is 320px.

For pages with no meta viewport code set, the default layout viewport is 980px when accessed from mobile terminal, and the document is shrunk to fully display the content. At this time, the ratio of CSS pixels to physical pixels becomes larger, that is, one physical pixel shows more CSS pixels. The display effect is shown in the figure below:

The visualViewport object information is as follows:

Viewport and layout

Before the iPhone, it was all about tweaking content to make PC websites accessible in mobile browsers; Then the iPhone came up with the idea of presenting web content in a “virtual window” (viewport) and providing the Viewport meta information element to control the size of the virtual window.

In a desktop browser, the browser window width is the maximum width we can use for our CSS layout. If the content width exceeds the viewport width, a scroll bar will appear to view all the content. In a mobile browser, however, you can use an additional viewport to control the viewport for presentation purposes.

Default layout viewport

The following is the normal display of a PC website:

By default on mobile, the following figure is displayed:

  1. We set the HTML, body width of the document to width:100%, so the HTML, body width is 980px, which is the browser’s default layout viewport width.

  2. By default, the mobile browser layout viewport is 980px, and then zooms in and out according to the page content so that the page content is fully displayed in the current visual window. When width is explicitly set:

    1. If width is greater than 980: if width is greater than 1200px for HTML and other elements, the viewport will shrink the layout to support more CSS pixels.

    2. If the width is less than 980: if we set the width of an HTML element to 400px, the content will be displayed in a part of the viewport, and the rest of the content will be blank.

The special thing isposition:fixed;Locate the top navigation bar element that always corresponds to the layout viewport.

Add a meta

Add a meta viewport code to the page:

<meta name="viewport" content="Width = device - width, initial - scale = 1.0 >Copy the code

After adding the above code, we explicitly set the layout viewport to the ideal viewport width so that the browser can display our page perfectly and the page will not be scaled. Of course, when we style the element, it must not be wider than the viewport width of the layout, which is 375px for the iphone6. If exceeded, a scroll bar appears.

CSS3 Media Query

Media Queries in CSS3 add more Media Queries. Just like the if expression, we can set different types of Media conditions and invoke the corresponding style sheet for the Media that meets the conditions. Such as:

  1. For a vertical display with viewport width greater than 800px, load a specific CSS file:

    <link rel="stylesheet" media="screen and (orientation: portrait) and (min-width:
800px)" href="800wide-portrait-screen.css" />
Copy the code

  2. Print device-specific CSS files:

    <link rel="stylesheet" type="text/css" media="print" href="print.css" />
Copy the code

  3. Viewport between 375 and 600, set a specific font size of 18px:

    @media screen (min-width: 375px) and (max-width: 600px) {
  body {
    font-size: 18px; }}Copy the code

Reactive implementation foundation

Reactive design implementations are often thought of in the following ways:

  1. Combination of streaming layout, elastic box (including pictures, tables, videos) and media query technologies;
  2. Using percentage layouts to create a flexible UI for streaming layouts, while using media queries to limit the size of elements and the scope of content changes;
  3. Using relative units makes content adaptive;
  4. Select breakpoints to achieve different layout and content display for different breakpoints;

Responsive design pattern

Currently, responsive design practices can be roughly summarized into five categories: mostly fluid, Column Drop, Layout Shifter, Tiny Tweaks, and Off Canvas. Often, we choose one or more of these to implement our responsive UIs.

Tiny Tweaks

The Tiny Tweaks layout mode displays most of the content in a single column, changing the text-size and padding spacing as the viewport width increases to ensure continued readability.

Fine-tuning for single column layout, simple changes in font size, padding and margin spacing, ensure the readability of the content.

.c1 {
  padding: 10px;
  width: 100%;
}

@media (min-width: 600px) {
  .c1 {
    padding: 20px;
    font-size: 1.5 rem; }} @media (min-width: 960px) {
  .c1 {
    padding: 40px;
    font-size: 2rem; }}Copy the code

Floating (Mostly Fluid)

The Mostly Fluid layout is a multi-column layout that sets a large margin on a large screen, but floats the following columns vertically on mobile. This pattern is common because usually only one breakpoint needs to be set.

Float layout, the essence of float, float the following columns as the screen shrinks, usually float/Flex + width and then use the Media Query to set different width values.

Take the following HTML structure as an example:

<! --Pattern HTML-->
<div id="pattern" class="pattern">
  <div class="c">
    <div class="main">
      <h2>Main Content (1st in source order)</h2>
      <p>1</p>
    </div>
    <div class="c2">
      <h3>Column (2nd in source order)</h3>
      <p>3</p>
    </div>
    <div class="c3">
      <h3>Column (3nd in source order)</h3>
      <p>4.</p>
    </div>
  </div>
</div>
<! --End Pattern HTML-->
Copy the code

It is usually styled in the following ways:

.main {
  background-color: #8e352e;
}

.c2 {
  background-color: #c84c44;
}

.c3{
  background-color: #a53d36;
}

@media screen and (min-width: 37.5 em) {
  .c2..c3 {
    float: left;
    width: 50%; }}Copy the code

When the width of the screen is greater than 31.42em, the default font size is 16px, so 37.5 * 16 = 600px. When the width is greater than 600px, the next two divs float in parallel, otherwise they are stacked vertically.

Column Drop

Column Drop is also a multi-column layout, stacked vertically on the mobile side and tiled as the screen grows. This mode requires us to select multiple breakpoints and change columns.

The broken column core is to divide the content into multiple columns and then, as the screen gets smaller, unstack the left and right columns below the main column.

<! --Pattern HTML-->
  <div id="pattern" class="pattern">
    <div class="c">
      <div class="main">
        <h2>Main Content (1st in source order)</h2>
        <p>1</p>
      </div>
            <div class="sb">
                <h3>Column (2nd in source order)</h3>
                <p>2</p>
            </div>
            <div class="sb-2">
                <h3>Column (3nd in source order)</h3>
                <p>3</p>
                
            </div>
        </div>
    </div>
    <! --End Pattern HTML-->
Copy the code

Style such as:

.main {
  background-color: #8e352e;
}

.sb {
  background-color: #c84c44;
}

.sb-2 {
  background-color: #a53d36;
}
@media screen and (min-width: 42em) {
  .main {
    width: 75%;
    float: left;
    padding: 0 1em 0 0;
  }
  .sb {
    float: left;
    width: 25%;
    
  }
  .sb-2 {
    clear: both; }} @media screen and (min-width: 62em) {
  .main {
    width: 50%;
    margin-left: 25%;
    padding: 0 1em;
  }
  .sb {
    margin-left: -75%;
  }
  .sb-2 {
    float: right;
    width: 25%;
    clear: none; }}Copy the code

Layout Shifter

Layout Shifter responsive design is a pointer to show different screen Layout and content, usually need to set up multiple breakpoints, and then according to different screen size, different design, and several kinds of mode in dealing with a small screen in front of the stack automatically behind a column of different, in each type of breakpoint between all need to involve both the Layout and content changes; This means we need to do more coding, and of course we have more control.

The core of shift is to determine what layout and content presentation is required for different screens, and then use media Queries to control at each breakpoint.

Split screen (Off Canvas)

The previous four design ideas were to spread out on a large screen, and then stack the remaining columns vertically as the screen shrinks. The user needs to scroll up and down to see all the content on the page. The Off Canvas mode takes a different approach: split screen:

  1. On small screen devices, place uncommon or non-essential content (such as navigation and menus) on the left and right sides of the screen, and tap to switch show/hide;
  2. Optionally spread out on a large screen;

The essence of split screen is to divide the main content (such as the list of articles) and non-main content (such as the navigation bar), and then display the main content first. The non-main content can be hidden on the left and right sides, and users can actively click/swipe to switch display/hide.

A common way to do this, on small screens, is to set things that are not commonly used display: None; Or the transform: translate (- 200 px, 0); And then when clicking the Open button, add the restore style display: block; Or the transform: translate (0, 0); , can be displayed; On a large screen, you can optionally design the display, usually tiled directly.

Reactive implementation

The basic theoretical knowledge is almost ready, then implement a simple example.

Set the viewport

Add meta viewport code to HTML:

<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
Copy the code
  1. width=device-widthSpecify the viewport as the ideal viewport so that a good page can be displayed using the current viewport (unit of device independent pixels);
  2. initial-scale=1Specifies that the ratio of CSS pixels to device independent pixels is 1:1.

Intial – Scale =1.0 prevents the mobile browser from automatically resizing the page and instead renders the page based on the actual viewport size (in this case, the ideal viewport).

Of course, you can also declare it via CSS@viewport, which has the same effect as the Meta tag:

@viewport {
  width: device-width;
  zoom: 1;
}
Copy the code

The zoom attribute is equivalent to the initial-sacale attribute of the Viewport Meta tag.

Media queries

Meida Query is currently supported by all major browsers, but if you expect your site to perform well in IE8 or below, you need to add compatibility. Respond with media-queries.js or respond.js:

<! --[if lt IE 9]> <script src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <! [endif]-->
Copy the code

Set breakpoints

Another important question in responsive design is how to determine view breakpoints, based on the device? Of course not, there are an endless number of devices, and the best practice is to build on the content, and then start with the mobile device, adding a screen of content from the smallest to the largest, identifying the multiple view breakpoints we expect and designing the UI accordingly.

Taking the material- UI as an example, it can be divided into:

  1. xs, extra-small: > 0
  2. sm, small: >= 600
  3. md, medium: >= 960
  4. lg, large: >= 1280
  5. xl, xlarge: >= 1920

You are free to select breakpoints and set a responsive layout using the Media Query, such as:

/* for 1280px or less */
@media screen and (max-width: 1280px) {
  #pagewrap {
    width: 95%;
  }
  #content {
    width: 65%;
  }
  #sidebar {
    width: 30%; }}/* for 960px or less */
@media screen and (max-width: 960px) {
  #content {
  	width: auto;
  	float: none;
  }
  #sidebar {
  	width: auto;
  	float: none; }}/* for 600px or less */
@media screen and (max-width: 600px) {
  h1 {
    font-size: 0.8 em;
  }
  #sidebar {
    display: none; }}Copy the code

This does not mean that we can only use these breakpoints, but maybe we want to do certain things in certain cases:

@media (min-width: 360px) {
  body {
    font-size: 1rem; }}Copy the code

Relative unit

Since a responsive design requires a responsive view, a fixed-value unit of length is bound to be difficult to meet expectations; If you use a fixed unit, such as PX, you need to deal with each case differently, which is a lot more work, otherwise you can’t achieve the response.

For example, set width: 100% in the container div; This ensures that it fills the viewport width and is neither too big nor too small relative to the viewport. Div will fit into the screen of any 320px iPhone5, 375px iPhone6, or 360px Nexus 5. In addition, the use of relative units automatically adjusts the content size space without horizontal scroll bars.

.wrap { width: 320px; font-size: 20px; }.wrap {width: 100%; The font - size: 1.25 rem; }Copy the code

Relative units are %, EM, REM, etc.

Responsive text

According to the readability survey of the website, the line of a reading experience friendly paragraph should contain 70 to 100 characters, usually 8 to 15 English words and 20 to 50 Chinese characters, so the view breakpoints need to be controlled:

width: 100%;
padding: 10px;
@media screen (max-width: 600px) {
  .article {
    width: 100%;
    papdding: 15px;
    margin: 0 auto;
    font-size: 1rem; }} @media screen (min-width: 600px) and (max-width: 960px) {
  .article {
    max-width: 700px;
    margin-left: 0auto; }}Copy the code

As shown above, on a smaller screen, a font size of 1rem can render about 20-30 Chinese words per line perfectly, while on a larger screen you need to add breakpoints. For example, when the browser width exceeds 600px, the ideal content width is 100%, and the maximum ideal width is 700px.

Responsive picture

Because layouts are responsive, images need to be responsive to the layout.

Flexible picture layout

First of all, in terms of layout, we definitely need our images to be flexible as the layout changes, so we can’t set fixed sizes, usually using relative units, and set the following styles:

.img-wrap {
  width: 100%;
}
img { max-width: 100%; }
Copy the code

Set the width to 100%, the width is adaptive, do not set the height, the height of the image will be in accordance with the image resolution ratio adaptive, so, the image can automatically follow the container zoom good display.

At the same time, it is necessary to set the maximum width of the image container to avoid the situation that the image is stretched too much and the quality is lost:

.img-wrap {
  max-width: 200px;
}
Copy the code

Image response

Is that the end? Of course not, usually, PC need to use the big size pictures show, but limited to bandwidth and network traffic on the mobile end reasons, not necessarily is suitable for using large size figure, image content also need response type, we should provide different images for different screen size, large size images for large screen, small screen for size smaller clear images, In addition, high-resolution (2X, 3X) images on the display provide clarity.

srcset

The srcset attribute enhances the behavior of the IMG element, allowing us to provide images of different sizes for different devices. Similar to the CSS native image-set CSS function, srcset also allows the browser to automatically select the best image based on device characteristics, for example, using a 2X image on a 2X display.

<img src="photo.png" srcset="[email protected] 2x" />
Copy the code

On browsers that do not support srcset, the browser uses the default image file specified by the SRC attribute, so always include a default image that can be displayed on any device. If srcset is supported, the comma-delimited conditional list of images is parsed before any requests are made, and only the default images are downloaded and displayed.

Of course, the compatibility of this way is not optimistic, less use.

Art Direction (Picture)

Art direction refers to the use of the Picture element to select specific images based on device characteristics. The picture element can be defined declaratively to provide multiple versions of an image depending on device size, device resolution, screen orientation, and other features:

<picture>
  <source media="(max-width: 599px)" srcset="profile-s.png">
  <source media="(min-width: 600px)" srcset="profile-600w.png">
  <img src="profile-600w.png" alt="Progile">
</picture>
Copy the code
  1. pictureThe element containssourceThe browser can select a specific source image based on the current device characteristics, and then needs to declare oneimgThe element provides the default image;
  2. <source>The element contains amediaAttribute. This attribute is a media condition that determines which image to display according to this condition. From top to bottom, the corresponding image will be displayed if the matching condition is true. In the example above, if the viewport width is less than 599px, the first one is displayed<source>The elementsrcsetIf the window width is greater than or equal to 600px, display the second image.
  3. srcsetProperty contains the path to display the image. Please note, as we do in the<img>As you can see above,<source>You can use one that references multiple imagessrcsetProperties, andsizesProperties. So support for passing one<picture>The element provides multiple images. It is also possible to provide multi-resolution images per image, but usually requires less;
  4. The last thing to note is that we should always be at</picture>I’ve provided a<img>Element and itssrcandaltProperty, otherwise no image will be displayed, and will be loaded when none of the media conditions matchimgPictures provided,; Also, if the browser does not support<picture>Element, which is also used by defaultimgElement substitution;

See Resources for more information on responsive images.

conclusion

This paper mainly introduces the relevant theoretical basis of responsive design, including: screen size, physics, CSS pixel and other related concepts, viewport, responsive design basis, common design patterns, and the basic idea of responsive UI implementation, and the most common multi-screen adaptation REM mode, which the blogger plans to introduce in the future.

reference

  1. Responsive Design
  2. Respinsive Web Design
  3. A tale of two viewports
  4. Display Size
  5. Viewport Meta tag