Responsive layout summary (recommended)

Basic knowledge of responsive layout development

This chapter is mainly divided into the following parts

• Correct understanding of responsive design
• Steps to responsive design
• Issues that need to be paid attention to in responsive design
• Principles of implementing responsive web page layout

First: Correctly understand responsive layout

Responsive web design means that a website can be compatible with multiple terminals - instead of making a specific version for each terminal. For example: there are many responsive products in society now, such as folding sofas, folding beds, etc. When we need to put the sofa in a corner, the sofa is like a div, and a place in the corner is like a parent element. Due to the change of the parent element space, we have to adjust the div so that it can still be placed in the corner. In the project, you will encounter different terminals. Due to different terminal resolutions, if you want to provide a better user experience, it is necessary to make your page compatible with multiple terminals.

Second: Steps of Responsive Design

Now that we understand what responsiveness is, let's talk about the steps of responsive design. Some people may say, "Blogger, are you stupid? Aren't the steps of responsive design just 1. Write non-responsive code, 2. Process it into responsive code, 3. Handle responsive details, and 4. Complete responsive development?" The blogger was shocked. It turned out that there are many masters among the people. He smiled slightly to show his respect. Oh my god, I said it wrong. It should be smiled slightly. Don't misunderstand me.

Now, getting back to the topic, since the blogger is a person who wants to get to the bottom of things, I will dig deep into the roots of responsive design and have a deeper understanding of these four steps.

1. Layout and setting meta tags

When creating a responsive website, or making a non-responsive website responsive, the first thing to focus on is the layout of the elements. When I create a responsive layout, I usually write a non-responsive layout first, with a fixed width of the page. I don't think this will be difficult for anyone here. If the non-responsiveness is done, then I will add media queries and responsive code. This operation makes it easier to implement responsive features.

When you are done When you have finished your non-responsive website, the first thing to do is in your HTML page, paste the following code between the and tags. This will set the screen to a 1:1 display size, providing full view of the site on the iPhone and other smartphone browsers, and preventing users from zooming the page.

2. Set styles through media queries

Media query is the core of responsive design. It can communicate with the browser and tell the browser how to present the page. If the resolution of a terminal is less than 980px, you can write it like this

3. Set multiple view widths

If we want to be compatible with iPad and iPhone views, we can set it like this:

3. Font settings

So far, most of the font units used by developers are pixels. Although pixels are OK on ordinary websites, we still need responsive fonts. A responsive font should be relative to the width of its parent container so that it can adapt to the client screen.

CSS3 introduces a new unit called rem, which is similar to em but more convenient to use for HTML elements.

rem is relative to the root element, don't forget to reset the root element font size:

4. Issues that need to be paid attention to in responsive design

1. The width is not fixed, you can use percentage

2. Image processing

Here I give everyone a key. Some people may say, blogger, can you please stop showing off? What key is there for image processing? Do you think it is to open the door? Blogger, wake up!

Ouch, what a bad temper I have. The key I mentioned is not a real key, but a universal method of image processing. What is it? The picture is liquefied. Then someone will ask: "What is image liquefaction?" This is a very good question. I will give you 99 points. I would give you one more point because I am afraid you might become too proud. As we all know, water is invisible and can fit into many containers. So if we regard the image as water, can we solve the image adaptation problem?

For images in HTML pages, such as images inserted in articles, we can use the CSS style max-width to control the maximum width of the image, such as:

In addition to images in the img tag, we often encounter background images, such as logos as background images:

Finally, let's summarize the implementation principles of responsive layout

First of all, we should follow the principle of mobile first, with interaction and design mainly based on mobile, and PC as an extension of mobile. A page needs to be compatible with different terminals, so there are two key points we need to make responsive: responsive layout and responsive content (pictures, multimedia)

I know what you are expecting. No picture, no truth. No dome, isn't that nonsense? It's just talk. Don't worry, I won't be beaten like this. Here is my personal responsive layout dome.

Well, here is the result of the blogger’s hard work. Next time I will summarize the layout of the mobile terminal.

The above responsive layout summary (recommended) is all the content that the editor shares with you. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM.

Original URL: http://www.cnblogs.com/dreamsboy/archive/2016/07/09/5656009.html