Responsive layout and response Layout
| I. Overview |
A responsive design is a display mechanism for the perfect layout of webpage content on any device. HTML5 and CSS3 are even more powerful.
HTML5 emphasizes simplifying tags, such as document type declaration. In HTML5, only <! DOCTYPE html> can be used to link external scripts and style files. The type attribute is not required, as shown below:
<script src='Monkey.js'></script>
Replace -->
<script src='Monkey.js' type='text/javascript'></script>
Meanwhile, HTML5 adds semantic tag elements, which are easy to read and use in SEO, as follows:
-- <Section> elements are used to define areas in a document or application.
-- <Nav> is used to define the main navigation area of the document.
-- <Article> elements are used to enclose independent content fragments.
The <aside> element is used to indicate content that is loose to the page master content.
-- <Header>, <footer>, <address>, and
CSS3, based on its new features, can replace JavaScript to achieve some animation effects, lightweight and easy to maintain.
The responsive design combines CSS3 media query, stream layout, and elastic image technology. Let's take a look at it.
| Ii. CSS3Media Query |
CSS3 media query is composed of a media type (screen and print) and one or more conditional expressions that detect media features. It can be used without changing the page content, custom display effects for specific output devices.
Common media features in media queries are as follows:
-- Width: the width of the view;
-- Height: the height of the view;
-- Device-width: the screen width of the device;
-- Device-height: the screen height of the device;
-- Orientation: Check whether the device is in the vertical or horizontal direction;
-- Aspect-ratio: Based on the view width and height ratio;
You can use the prefix min and max to create a query range.
For example, when the width of the video port in the screen is less than 960 pixels, the following CSS Code takes effect:
/* Query media in the CSS style sheet */@ media screen and (max-width: 960px) {body {background-color: gray ;... }/* Use media query in CSS external links */<link rel = "stylesheet" media = "screen and (max-width: 960px)" href=”monkey.css "/>
PS:To prevent the mobile browser from automatically adjusting the page size, we also need to use meta, which is defined as follows:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
The content tells the browser that the page width is equal to the device width.
| Iii. Stream Layout |
Media query has infinite power, but its limitations are also obvious. In different breakpoints set in media query, CSS styles only change from one group to another, without any smooth gradient between styles.
Therefore, we introduce "stream layout" to make up for the short board of media queries.
Stream layout is also called percentage layout. As the name suggests, percentage is used to replace the fixed pixel width. How can the two be converted?
The formula is as follows:
Target element width/context element width = percentage width
For example, the existing html code is as follows:
<body> <div id="wrapper">The fixed pixel style is as follows:
* { margin: 0; padding: 0;}#wrapper { margin: 0 auto; width: 960px; background: grey;}header { margin-right: 10px; margin-left: 10px; width: 940px;}nav { padding-top: 20px; padding-bottom: 20px; width: 940px;}nav ul li { display: inline-block; list-style-type: none;}Now, we use the formula above to convert the width and horizontal margin of the style into percentages, as shown below:
PS: Let's assume that we use a 1000 pixel view as the reference.
/* Target element width/context element width = percentage width */* {margin: 0; padding: 0 ;}# wrapper {margin: 0 auto; width: 96%; /* 960/1000 = 96% */background: gray;} header {margin-right: 1.041667%;/* 10/960 = 1.041667% */margin-left: 1.041667%; /* 10/960 = 1.041667% */width: 97.916667%;/* 940/960 = 97.916667% */} nav {padding-top: 20px; padding-bottom: 20px; width: 100%; /* 940/940 = 100% */} nav ul li {display: inline-block; list-style-type: none ;}In the preceding CSS style, the conversion percentage is reserved to be more accurate.
In addition, we can convert pixel-level text into relative units-em. The preceding conversion formula also applies to converting the pixel unit of a text to the relative unit.
However, it is worth noting that the default text size of modern browsers is 16 pixels (excluding the display Declaration ), therefore, applying the following rules to the body tag at the beginning produces the same effect:
font-size: 100%;font-size: 16px;font-size: 1em;
| Iv. Elastic Images |
In modern browsers, it is very easy to scale images as they flow. You only need to make the following statement in CSS:
img { max-width: 100%;}
In this way, the image can be automatically scaled to match the container 100%. Furthermore, you can apply the same style to other multimedia tags so that they can be scaled automatically, as shown below:
img, object, video, embed { max-width: 100%;}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
