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

What this article shares with you is about the steps of responsive web design. The editor thinks it is very practical, so I share it with you. I hope you can get something after reading this article. Let's take a look at it with the editor.

There is no doubt that responsive web design is becoming more and more important. If you haven't heard of responsive design, take a look at the responsive website I posted earlier. Responsive design may sound a little complicated for beginners, but in fact, it's much simpler than you think. In order to get you started quickly, I have prepared a simple tutorial. Through these three steps, you are sure to understand the fundamentals of responsive design and media query (provided you have some CSS basics).

The first step。 Meta tag (view demo)

To fit the screen, most mobile browsers zoom the HTML page to the width of the device screen. You can use the viewport attribute of the meta tag to set it. The following code tells the browser to use the device screen width as the content width and ignores the initial width setting. This code is written in it.

Browsers of IE8 and below do not support media query. You can use media-queries.js or respond.js. So IE can support media query.

The second step. HTML structure

In this example, there are basic page layouts such as header, content, sidebar and footer. Header has a fixed height of 180px the width of the content container is 600px and the width of the sidebar is 300px.

The third step. The key to Media QueriesCSS3 media query responsive web design. It is like an if statement that tells the browser how to load a web page based on a specific screen width.

If the screen window is smaller than 980px, the following rules take effect. Here, I set the width of the container as a percentage instead of pixel units, which makes it more flexible.

If the screen window is smaller than 700px, define # content and # sidebar as adaptive widths and remove its floating property so that it will be displayed full screen.

If the screen window is smaller than 480px (the screen of the mobile device), set # header high to adaptive, set H2 font to 24px, and hide # sidebar.

You can write a lot about these media query. In this demo, I only wrote three. The purpose of media query is to apply different CSS rules to implement the layout of the screen. It can be written in the same CSS file or in different files.

These are the steps of responsive web design. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

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.