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

This article focuses on "how to achieve responsive design in web layout". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "how to achieve responsive design in web layout"!

First, why use responsive design?

We want our website to be available on all devices by responding to user behavior, device screen size, and screen orientation.

II. A fragmented world

By 2013, there were thousands of different devices browsing the web, so it was impossible to design web pages that fit all screen sizes. Instead, we have to design in a more fluid way.

III. Mobile priority

Recently, a more popular word is mobile first. It means to design the style for the mobile first, and then optimize the style of the larger screen according to the demand. In other words, if you take the mobile style as the default style for the site, and you don't have to optimize it in the future, you can do it in one step. That would be even easier!

The code is as follows:

"assuming a flexible but simple layout is used by default, you can indeed adapt to a variety of browsers, but this is not a completely responsive layout. So when we talk about" mobility first ", we are actually talking about" progressive enhancement "."

-Ethan Marcotte

4. Use Min-width for media query (Media Queries)

Now let's introduce a special layout. Use min-width to define how different screens should be laid out. It can detect the screen size of different devices nearby (that is, media queries, which can be literally translated as a media query), which is easier to handle than at the end of a stylesheet or in a separate file.

The code is as follows:

/ * Small screens (default) * /

Html {font-size: 100%;}

/ * Medium screens (640px) * /

@ media (min-width: 40rem) {

Html {font-size: 112%;}

}

/ * Large screens (1024px) * /

@ media (min-width: 64rem) {

Html {font-size: 120%;}

}

1. Not all browsers are created equal

The same CSS is rendered differently by different browsers. To avoid this, you can use a better CSS like Normalize.css to help you achieve cross-browser display. Of course, you should put this CSS at the front of your stylesheet.

The code is as follows:

2. Add the Meta tag in Viewport

Add Meta tags to your HTML code. It enables media queries to work on different devices

The code is as follows:

3. CSS box model

The foundation is very important! Before diving into responsive design, it's best to figure out how elements like HTML are generated and rendered in browsers. The CSS box model consists of the following four parts.

4. Set box-sizing: border-box

Set box-sizing at the top of the CSS file. Use the * universal selector to apply it to every element of the page.

The code is as follows:

*, *: before, *: after {

-moz-box-sizing: border-box

-webkit-box-sizing: border-box

Box-sizing: border-box

}

5. Your choice

CSS has a common BUG. Whether or not to set box-sizing will mean whether the values of border and padding are calculated in width.

6. Create a container

A container will contain all the tags on the page and control the maximum width of the page. The use of containers makes our responsive design a step further!

The code is as follows:

.container {

Margin: 0 auto

Max-width: 48rem

Width: 90%

}

7. Create columns

In mobile priority, columns are all block-level by default (can take up the full width of the row). No extra style is needed!

The code is as follows:

8. Create column widths

In the big screen, use float: left to arrange the columns horizontally. Then use padding to set the gap between two adjacent columns and forget the traditional margin.

The code is as follows:

@ media (min-width: 40rem) {

.column {

Float: left

Padding-left: 1rem

Padding-right: 1rem

}

.column.full {width: 100%;}

.column.two-thirds {width: 66.7%;}

.column.half {width: 50%;}

.column.third {width: 33.3%;}

.column.column {width: 25%;}

. column.flow-opposite {float: right;}

}

9. Create a row

Columns should be wrapped in rows to avoid layout confusion caused by other elements stacked next to them. Otherwise, there will be the well-known clearing problem. After it appears, you can use the clearfix solution invented by Nicolas Gallagher.

The code is as follows:

.clearfix: before

.clearfix: after {

Content: ""

Display: table

}

.clearfix: after {

Clear: both

}

.clearfix {

* zoom: 1

}

10. Relative flow (Flow Opposite)

Add the. flow-opposite class to the column you want it to display first on the mobile and on the right side of the big screen.

The code is as follows:

@ media (min-width: 40rem) {

. column.flow-opposite {float: right;}

}

Practice makes perfect

Through these simple steps, you have embarked on the road of responsive design. Keep practicing, it will make your web page better and more practical.

At this point, I believe you have a deeper understanding of "how to achieve responsive design in web layout". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.