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

This article mainly introduces "what are the basic skills of web responsive design". In daily operation, I believe many people have doubts about the basic skills of web responsive design. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the questions of "what are the basic skills of web responsive design?" Next, please follow the editor to study!

First, keep a simple layout

Layout is a simple problem, and it must be included in every web design, but what we need to do with Responsive design is to make your page layout as simple as possible. To achieve a simple layout, we have some tips:

Responsive layout skills

In the Responsive layout, we can discard unreservedly:

1. Try to minimize the use of unimportant div

two。 Do not use inline elements (inline)

3. Use js or flash as little as possible

4. Throw away useless absolute positioning and floating styles

5. Discard any redundant structures and do not use 100% settings

Only if you give up, you can get rid of some things that have an impact on Responsive, so what can help Responsive determine a better layout?

1. Use HTML5 Doctype and related guidelines

two。 Reset your style (reset.css)

3. A simple core layout with semantics

4. Use simple techniques for important web page elements, such as navigation menus

Use these techniques to keep your HTML simple and clean, and don't rely too much on modern techniques, such as css3 special effects or js scripts, in key parts of your page layout.

Having said so much, what kind of layout or HTML structure is simple and clean? Here is a quick test method:

You first disable all styles (and style-related information) on your page and open them in a browser. If your content is organized and easy to read, then your structure will not be so bad.

Second, use Medial Queries

Medial Queries has been greatly extended in CSS3, if you don't know much about what Medial Queries is? It is recommended that you click here to understand. And Medial Queries plays a very important role in Responsive. It can be said that Responsive design loses the meaning of its existence without Medial Queries. To put it simply, Medial Queries is a media query, which can find out the appropriate style according to the set size. In retrospect, Responsive design is most concerned with width: depending on the current width of the device used by the user, your Web page will load an alternate style to implement a specific page style.

So how do you use Medial Queries? There are several ways to call, and the details can also be read here.

/ * import Import method * / @ import url (tiny.css) (min-width:300px); @ import url (small.css) (min-width:600px); @ import ulr (big.css) (min-width:900px) / * write directly in the style file * / @ media screen and (max-width:300px) {/ * Tiny styles*/} @ media screen and (max-width: 600px) {/ * small styles*/} @ media screen and (max-width:900) {/ * big styles*/}

The above is just a simple way to use, in fact, Medial Queries is very simple, you can develop some commonly used templates for Responsive, such as:

@ media only screen and (min-width: 320px) {/ * Small screen, non-retina * /} @ media only screen and (- webkit-min-device-pixel-ratio: 2) and (min-width: 320px), only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 320px), only screen and (- o-min-device-pixel-ratio: 2 320px 1) and (min-width: 320px) Only screen and (min-device-pixel-ratio: 2) and (min-width: 320px), only screen and (min-resolution: 192dpi) and (min-width: 320px), only screen and (min-resolution: 2dppx) and (min-width: 320px) {/ * Small screen, retina Stuff to override above media query * /} @ media only screen and (min-width: 700px) {/ * Medium screen, non-retina * /} @ media only screen and (- webkit-min-device-pixel-ratio: 2) and (min-width: 700px), only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 700px) Only screen and (- o-min-device-pixel-ratio: 2amp 1) and (min-width: 700px), only screen and (min-device-pixel-ratio: 2) and (min-width: 700px), only screen and (min-resolution: 192dpi) and (min-width: 700px), only screen and (min-resolution: 2dppx) and (min-width: 700px) {/ * Medium screen Retina, stuff to override above media query * /} @ media only screen and (min-width: 1300px) {/ * Large screen, non-retina * /} @ media only screen and (- webkit-min-device-pixel-ratio: 2) and (min-width: 1300px), only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 1300px) Only screen and (- o-min-device-pixel-ratio: 2amp 1) and (min-width: 1300px), only screen and (min-device-pixel-ratio: 2) and (min-width: 1300px), only screen and (min-resolution: 192dpi) and (min-width: 1300px), only screen and (min-resolution: 2dppx) and (min-width: 1300px) {/ * Large screen Retina, stuff to override above media query * /}

For a more detailed introduction to the Medial Queries template, you can click here to read.

At this time, you may not care about how to write the style file inside, but more concerned about how to determine such a size. If you are careful enough, you can find a little answer from the template code of the above example. Then I have taken a picture from somewhere else and put it here for your reference:

Third, define breakpoints

Define breakpoints, so what is breakpoints? The simple description is, what is the critical point of the device width, that is, what are the min-width and max-width values in Medial Queries that we are concerned about earlier? Then there are six common breakpoints in Responsive design, and our future Medial Queries condition judgment can be based on these six breakpoints.

The main ones are:

* the breakpoint group is set for smartphones, and its width is less than 480px (

The second breakpoint is a highly intelligent mobile device, such as an Ipads device, whose width is less than 768px (

The third breakpoint is for large devices, such as PCs, whose width is greater than 768px (> 768px).

For the sake of *, we can add several other breakpoints:

Add a breakpoint smaller than 320px for small mobile devices;

You can also add breakpoints for tablet devices, greater than 768px, less than 1024px (> 768px and

* you can also set a breakpoint for ultra-wide desktops, which is greater than 1024px (> 1024px)

To sum up, set breakpoints to grasp three key points:

Satisfy the main breakpoint

Add some other breakpoints if possible

Set desktop breakpoints higher than 1024px

As shown in the following figure:

Fourth, make your layout more flexible

The breakpoint is confirmed, and the next step is to make your layout more flexible. Flexible grids is recommended for layout. Flexible grids makes your layout more suitable for the size of viewport than a fixed-width layout. And the fluid layout in the whole flexible grids (that is, adaptive layout, liquid layout, percentage layout) is the most suitable for all kinds of screen sizes, combined with the right medial Queries, you can create a page layout suitable for any device that may appear.

Let's take a look at a simple comparison picture.

Use fluid layout, there is a tip note, in order to let the browser calculate the decimal point of the rounding problem, affecting the page layout, so your percentage of decimal places as much as possible to take some places, (if you have to look at the bootstrap source code, you can obviously see his percentage layout, after the decimal point accurate to more than ten places). Of course, if you are not sure about this number, you can use a ready-made grid system.

30 + CSS Grid System (here is a collection of nearly 40 different grid systems)

8 practical responsive design frameworks (15 grid framework systems with responsive designs are collected here)

Fluid layout is convenient, but the trouble is that if you add padding and border to elements with fluid width values set, it will be dangerous, as you know (css box module):

Is there a solution? There are ways. In the early days, a div was nested within the element that sets the width, and padding and border are set on this embedded element, which adds an extra tag. In fact, there is a better way in CSS3, which is to use box-sizing to change the default model of box module.

For example, we have a "div" element: its width is 67%, and we need to set a border border between padding and 3px of 15px. The default width of Box module at this time is:

Div width = 67% + 2*15px + 2*3px

As a result, the width of the total layout of the web page is greater than 100%, thus breaking the layout of the web. In order to keep the div from changing the width of the box module, that is to say, no matter what the value of its padding and border is, but its width will never change, then we need to use box-sizing to change it, so we can set it like this in the stylesheet:

* {- webkit-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box; box-sizing: border-box;}

5. Self-adaptation of pictures

It is not difficult for the layout to be adaptive, so how do the pictures do it? That is to say, is there any way for a picture of mine to be displayed on different devices that can adapt to the screen size? there is a way to deal with this effect. If your web page is not affected by bandwidth (regardless of performance), you can first make a picture to fit the screen, and then use the style to control the size of the display on different devices. Another way is that you can prepare different pictures for each breakpoint.

Picture adaptive size

Use styles to control the adaptation of pictures:

Img {max-width: 100%;}

Breakpoint picture

It is a headache to provide a different picture for each breakpoint, because Medial Queries can not change the attribute value of the image "src". Is there any way to solve it? You can refer to the following solutions:

Use background-image: use a background picture for an element

Show / hide parent elements: use different images for the parent elements, and then use Medial Queries to control whether these images are shown or hidden.

Let's take a look at an example of breakpoint solving image adaptation:

Corresponding CSS code

@ media (min-device-width:600px) {img [data-src-600px] {content: attr (data-src-600px, url);}} @ media (min-device-width:800px) {img [data-src-800px] {content: attr (data-src-800px, url);}} VI. Don't forget min and max

Two key words in Responsive are also very important, "min-width" and "max-width". These two attribute values can help you define a relative value of the critical point of responsive. Typical benefits:

Prevent your layout from getting bigger or smaller

Combined with liquid layout, max-width and min-width can achieve better adaptability at the critical point (breakpoint) of medial queries.

Let's look at a few simple applications:

In liquid layout, if your width is not less than 768px and not greater than 1024px, then we can use:

Min-width: 768px; max-width: 1024px

For example, if the "# main" meta-element is displayed on a desktop where the width of the meta-element is not less than that of 1000px, we can use this:

@ media screen and (min-width: 1024px) {# main {min-width: 1000px;}}

Let most things be relative

Let your entire Web element be relative rather than absolute. From this concept, we can define a unit for the outermost element, and then its child element and descendant code element inherit it. At present, there are two common types of relative units:

Percentage (%) method: assign a fixed size or fluid size to the main container, and then use the percentage (%) of each child element to calculate its own parameters, such as width/padding/margin, etc.

"em" unit: first define a font size (font-size) in a main container or "" as the basic unit, and then use other elements as a benchmark to calculate the relevant value.

There are some tricks in the conversion between "em" and "px". If you have never understood the relationship between them, I suggest you read this article "powerful EM in CSS" first. For a simpler one, take a look at the following figure:

8. The effect on the mobile end

On mobile devices, especially on mobile phones with small screens, all the content will be displayed in a column. At this time, we need to deal with the style. First, let's take a look at a layout comparison:

Layout on PC Desktop

This layout will appear on our phones as follows:

So how can we achieve the transformation of these two layouts? The implementation is simple: just overwrite the width of each element in your mobile stylesheet and convert the original width to "100%"

Do we need to add a removed style to each unimportant element in the mobile phone style? Actually, no, we just need to add the class name "not_mobile" to the unimportant elements, and then add it to the phone style:

@ media screen and (max-width:300px) {.not _ mobile {display: none;}}

Check your viewport

Students who have played with mobile may know that many mobile browsers simulate the browser under the desktop PC. When your web page is viewed in the mobile browser, the whole page will be directly compressed and displayed under one screen. This is a powerful feature, but it is also a fatal feature of Responsive.

Take a look at a comparison of my screenshot on the Internet:

In this case, I can use the "meta" property to make it look normal:

At this point, the study of "what are the basic skills of web responsive design" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.