Shulou(Shulou.com)06/03 Report--

This article will explain in detail the example analysis of the responsive layout of web development. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

I. Preface

Responsive Web design allows a site to adapt to multiple devices and multiple screens at the same time, allowing the layout and function of the site to vary with the user's environment (screen size, input mode, device / browser capabilities).

II. Viewports

The viewport (viewport) commonly referred to in the mobile front end is the area in the browser used to render the web page. Viewports are usually not equal to the screen size, especially if you can zoom the browser window. The viewport on the mobile side is different from that on the PC side. The width of the viewport on the computer side is equal to the resolution, while the width of the viewport on the mobile side has nothing to do with the resolution. The default width is specified by the device manufacturer. IOS and Android basically set the viewport resolution to 980px.

1. Why is the mobile viewport set to 980px?

At that time, Jobs imagined: if the iPhone is popular in the market, but each website has not yet had time to create a mobile web page, then users will have to use the mobile phone to access the computer version of the web page. How to use a small screen to access a large screen page is also readable? Master Qiao wants to fix a viewport width for the phone, so that the width of the phone's viewport is equal to the center width of most PC pages in the world, that is, 980px. In this way, when you use your mobile phone to visit the computer version of the web page, there happens to be no blank next to it. However, the text will become very small after the page is zoomed in, and users need to zoom in and out manually to see it clearly, and the experience is very poor.

two。 Constrain Viewport

To solve the previous problem, you can add the following line of code to the web page:

Width=device-width viewport is the width of the device (that is, a width set by human) / / if it is not set, the default is that the size of the viewport initialized by 980pxinitial-scale=1.0 is 1.0x maximum-scale=1.0, and the maximum multiple is 1.0x user-scalable=0 does not allow viewports to be zoomed.

The label for this viewport tells the browser how to render the web page. Here, the tag means that the content of the web page is rendered according to the width of the device (device-width). In fact, you can see the effect on the device that supports this tag and you will understand.

Not bad! The user experience is greatly improved!

At this point, if you use document.documentElement.clientWidth to test the browser screen width, you will find that the current viewport width is equal to the width of the phone screen, and the approximate viewport width is between 3200480 (when the phone is used vertically).

The size of this viewport, set by the mobile phone manufacturer, ensures that our text, such as 16px, is clear and just the right size in our own viewport. So the constrained viewport of the large screen phone > the constrained viewport of the small screen phone. This ensures that our web pages can use px to write font size and line height.

It should be noted that the width of the viewport after the constraint is not its own resolution! The resolution of each phone is much larger than its own viewport width!

The most important sentence: front-end development engineers, do not care about the resolution of the phone, we only care about viewports.

3. Pictures

People often say that "one picture is worth a thousand words", and it is true. No matter how many words on our web page about muffins, none of the pictures are attractive. Let's add a muffin picture (2000 pixels wide) at the top of the page, which is similar to the big picture that tempts users to look down.

Wow, what a big picture, it makes the whole page look out of balance, and the picture overflows horizontally. No, this problem must be solved. You can use CSS to specify a fixed width for an image, but the problem is that we want it to zoom automatically in screens of different sizes. For example, the iPhone screen in our example is 320 pixels wide. If we set the picture to 320 pixels wide, what happens when the iPhone screen is rotated? At this time, 320 pixels become 480 pixels.

The solution is simple: with a single line of CSS code, the image can be scaled automatically according to the width of the container:

Img {max-width: 100%;}

Go back to the phone, refresh the page, and the results are more in line with expectations.

The max-width rule is declared here to ensure that all images are displayed at a maximum of 100% of their own size (that is, the maximum can only be displayed as big as themselves). At this point, if the element that contains the picture (such as the body or div that contains the picture) is smaller than the inherent width of the picture, the picture will zoom to fill the maximum available space.

Why not use width:100%?

To achieve automatic scaling of images, you can also use more generic width properties, such as width:100%. However, this rule does not apply here. Because this rule causes it to appear as wide as its container. When the container is much wider than the picture, the picture is stretched needlessly.

Fourth, the kernel of mobile browser

On the mobile side, there are only four independent browser kernels, namely Microsoft's Trident, Firefox's Gecko, the open source kernel Webkit, and Opera's Presto.

At present, Microsoft's Trident is mainly built-in browsers for WP7 and 8 systems on mobile terminals. The Presto kernel of Opera is mainly Opera Mobile, OperaMini, Openg browser and Openg HD Beta version. The Webkit kernel has a wide range of applications. Android native browsers, Apple's Safari and Google Chrome (used by Android4.0) are all developed based on Webkit open source kernels.

Compatible prefix: 1-ms-2-moz-3-Omuri 4-webkit-

Browser market share of Chinese users:

UC, Android built-in, Chrome, Safari, and QQ Browser are all webkit kernels, accounting for the vast majority of market share.

So be sure to take good care of webkit-. Some companies are only compatible with webkit-, and others, such as-ms- is not written.

5. Streaming layout

Percentage layout is also known as streaming layout and elastic box layout. The mobile phone web page has no version center, and it is full around.

The properties that the percentage can be set are width, height, padding, margin. Other properties such as border and font-size cannot be set as a percentage.

If you write width as a percentage, it means how many percent of the parent element width.

If you write height as a percentage, it means how many percent of the parent element height.

If you write padding as a percentage, it refers to how many percent of the parent element width, whether horizontal padding or vertical padding.

If you write margin as a percentage, it refers to how many percent of the parent element width, whether horizontal margin or vertical margin.

The width of the border cannot be written as a percentage

Let's take a look at an example:

Div {width:200px; height:300px; padding:10px;} div p {width:50%; height:50%; padding:10%;} what is the true width of p at this time?

The true width of p at this time is 140px*190px

VI. Media enquiries

1. Why does responsive Web design need media query

CSS3 media queries allow us to apply specific CSS styles to web pages based on specific device capabilities or conditions. Without media queries, CSS alone cannot greatly modify the appearance of a web page. This module allows us to write CSS rules in advance to adapt to many unpredictable factors, such as horizontal or vertical screen orientation, large or small viewports, and so on. Although flexible layout can adapt the design to more scenes, including certain sizes of screens, sometimes it is not enough, because we need to make more detailed adjustments to the layout. Media queries make all this possible, which is equivalent to the basic conditional logic in CSS.

two。 Media query syntax

The first rule we write outside the media query is the "basic" style, which applies to any device. On this basis, we gradually add different visual effects and functions for different viewports and devices with different capabilities.

Body {background-color: grey;} @ media screen and (min-width:1200px) {body {background-color: pink;}} @ media screen and (min-width:700px) and (max-width:1200px) {body {background-color: blue;}} @ media screen and (max-width:700px) {body {background-color: orange;}}

Among them, @ media represents a media query, querying what the device that is now looking at this page is and how wide it is. Screen says the device that sees the page is a monitor, not a hearing device for the disabled or a printer. All the possibilities are listed later with the and symbol.

It is worth noting that media inquiries can only wrap selectors, not KRV pairs.

IE6, 7, 8 do not support media queries, and to prevent some browsers on mobile phones from not supporting media queries, do not put all selectors in media queries.

7. Rem responsive layout

The thought of rem responsive layout

Generally do not set a specific width for the element, but for some small icons you can set a specific width value

The height value can be set to a fixed value, and we will strictly write the size of the design draft.

All the fixed values are set in REM (first set a base value in HTML: the corresponding ratio of PX to REM, then get the PX value on the effect picture, and convert it to REM value when layout)

JS gets the width of the real screen, divides it by the width of the design draft, calculates the ratio, and resets the previous reference value proportionally, so that the project can be adapted on the mobile side.

What is rem and what is the difference between it and em

Rem: the style values of the REM units of the element on the current page are dynamically calculated for the font-size value of the HTML element

Em: represents a multiple of the font size of the parent element. (special case: in the text-indent attribute, it represents the width of the text)

Body → font-size:20px; → font-size:2em; box1 → font-size:2em; box2 → font-size:2em; box3

When em is a unit, the font-size attribute is inherited after calculation, and box1 calculates to be 40px. Then the box2 and box3 in it all inherit 40px. Em units can be used not only to set font sizes, but also to set properties of any box model, such as width, height, padding, margin, border.

One advantage of rem is that it can cooperate with media queries to achieve a responsive layout:

@ media screen and (min-width: 320px) {html {font-size: 14px;}} @ media screen and (min-width: 360px) {html {font-size: 16px;}} @ media screen and (min-width: 400px) {html {font-size: 18px;}}

Application scene

If the H5 page we do is accessed only on the mobile side, it is because REM is not compatible with older browsers. If the mobile side and the PC side share a set of codes, it is recommended to use streaming layout.

How to make a REM responsive layout

1. Get the PSD design draft from the UI designer, and then set a font-size value for HTML in the style. We usually set a value that is convenient for later calculation, such as 100px.

Html {font-size:100px;//1rem=100px}

2. Write the page and style

First, write the style according to the size of the design draft, and then when writing the style value, you need to divide the pixel value by 100 to calculate the corresponding REM value.

It is worth noting that we usually do not write a fixed value for the width of the outer box in the real project, but follow the idea of the flow layout method, and we use the percentage layout method.

Margin:0 0.2remheight:3rem

3. Calculate the font-size value of our HTML according to the width of the current screen and the width of the design draft.

For example: the width of the design draft is 640px, and one part of it is a broadcast picture, and its size is 600mm 300. If you set a font-size value for HTML to 100px in the style, then the rotation map size should be 6rem × 3rem. If the screen width of the phone is 375px, its font-size should be set to how much.

375According to 640mm 100-> fontsize=58.59375//, the rotation picture can adapt to the screen size of the mobile phone at this time.

According to the ratio of the current screen width to the design width, dynamically calculate what the fontsize value under the current width should be. If the fontsize value changes, the values of all previously set REM units will automatically be enlarged or reduced. This can be achieved through the following code:

~ function () {var desW=640,winW=document.documentElement.clientwidth,ratio=winW/desW;document.documentElement.style.fontSize=ratio*100+ "px";} ()

However, if the current screen width is greater than the design width, the image will be elongated and distorted, so the above code needs to be modified slightly:

/ / html part / / js part ~ function () {var desW=640,winW=document.documentElement.clientwidth,ratio=winW/desW;var oMain=document.getElementById ('main'); if (winW > desW) {oMain.style.width=desW+ "px"; oMain.style.margin= "0 auto"; return;} document.documentElement.style.fontSize=ratio*100+ "px" } (); this is the end of the article on "sample analysis of responsive layout of web development". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.