Streaming and responsive layouts and adaptive and elastic layouts

Fluid layout

The effect

  • Streaming layout, which dates back to the CSS2 era, is based on percentage layout and can display the same layout at different resolutions.

Design approach

  • Use % percentages to define widths. Use px to define heights (with min-* and Max -* attributes). For example, set the width of the main page to 80% and min-width to 960px. Do the same for the image (width:100%, max-width is generally set to the size of the image itself, to prevent distortion caused by stretching).

disadvantages

  • Use percentage defined width, but px height and size and so on are mostly used to fixed, so under the big screen mobile phone display effect will become some of the elements on the page width is pulled very long, but the height, size is the same (that is, these things can’t become the “flow”), showed very not harmonious.

Responsive layout

The effect

  • Response type is used to solve without between devices without resolution compatibility between (generally refers to the PC, tablet, mobile devices such as the resolution of the large difference between), the design goal is to ensure that a page on all terminals (various size of PC, mobile phones, watches, refrigerator Web browser, etc.) can show a satisfactory result.

Design approach

  • The key technology of responsive layout is the media query in CSS3, which monitors the screen size of the device. CSS media query can be used to change the page layout in a targeted manner. It can monitor the screen direction (mobile devices), device type and so on.

Compatible with Internet explorer 6, 7, 8

  • For IE6/IE7/IE8, we use JavaScript to dynamically create a CSS file based on the resolution of the user’s display. Embed the following code in the head tag:

  • <script> if (! window.screenX) { //IE6~8 var oStyle = document.createElement("link"); oStyle.rel = "stylesheet"; oStyle.type = "text/css"; if (screen.width > 1024) { oStyle.href = "widthScreen.css"; } else { oStyle.href = "normalScreen.css"; } document.getElementsByTagName("head")[0].appendChild(oStyle); } </script>Copy the code

Adaptive layout

The effect

  • Defining layouts for different screen resolutions means creating multiple static layouts, each corresponding to a screen resolution range. Changing the screen resolution allows you to switch between different static parts (the position of page elements changes)

Design approach

  • Use @media media query to switch different styles for devices of different sizes and media. Under the excellent response range design can give the best experience to the device within the range, in the same device is actually fixed layout.

disadvantages

  • When the screen resolution changes, the position of the elements on the page changes without changing their size.

Elastic layout

The effect

  • Early browsers didn’t scale the entire page, only allowing text within the page to be enlarged, in this case. With an elastic layout, you can make the elements that wrap text zoom as the text scales.

Design approach

  • The dimensions of the elements surrounding the text are em/ REM, while the dimensions of the main sections of the page are still percentages or PX (same as “flow layout” or “static/fixed layout”).