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

This article is about how to use three steps to achieve responsive Web design, the editor feels very practical, so share with you to learn, I hope you can get something after reading this article, say no more, follow the editor to have a look.

Written in the previous words: with the gradual popularity of mobile devices and the development of Web technology, cross-end Web development needs will be increasing. How to make cross-end interface adaptation on multiple devices? We can use the Media Query of CSS3 to achieve this. This paper mainly introduces an example of the combination of mobile development and CSS3 to adapt a variety of resolutions.

Responsive web page design (Responsive web design) mentioned in this paper is a modern web page design method. The media query (Media Query) feature based on CSS3 makes the web page adapt to different devices, that is, automatically relayout according to the resolution and scaling of the device.

Responsive web design is undoubtedly a big deal now. If you don't know anything about responsive design, take a look at my recently published list of responsive sites. Responsive design may be a little complicated for beginners, but it's actually simpler than you think. To help you quickly understand responsive design, I have drafted a quick tutorial. You can learn the basics of responsive design and media query (Media Queries) in three steps (assuming you have a basic knowledge of CSS).

Step 1: Meta tag (view demo)

Most mobile browsers enlarge the HTML page to a wide view (viewport) to match the screen resolution. You can use the meta tag of the view to reset. The following view tab tells the browser to use the width of the device as the view width and to disable initial zooming. Add this meta tag to the tag.

Media Query is not supported by IE8 or earlier browsers. You can use media-queries.js or respond.js to add Media Query support for IE.

Step 2: HTML structure

In this example, I have a basic page layout that includes headers, content, sidebars, and footers. The head has a fixed height of 180 pixels, the content container is 600 pixels, and the sidebar is 300 pixels.

Step 3: media query-Media Queries

CSS3 Media Query- media query is the core of responsive design. It tells the browser based on conditions how to render the page for the specified view width.

When the view width is less than or equal to 980 pixels, the following rules will take effect. Basically, I will set all container widths from pixel values to percentages to make the container size adaptive.

Then specify the widths of # content and # sidebar for views less than or equal to 700 pixels to be adaptive and clear floats so that the containers are displayed at full width.

For cases less than or equal to 480 pixels (phone screen), set the height of the # header element to adaptive, change the font size of H2 to 24 pixels, and hide the sidebar.

You can add enough media queries according to your preferences. I have shown only three media queries in the example. The purpose of media query is to specify different CSS rules for the specified view width to implement different layouts. Media queries can be written in the same or separate stylesheet.

The above is how to use three steps to achieve 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.