10 Basic tips for responsive design

English Original: Splio, compilation: W3cplus

Responsive design for me is not a stranger, from the time he appeared in the Internet, he has been watching his growth, but also in the W3cplus station to share a lot of this tutorial and resources. Because of the organization of YY activities online and everyone to share the design of responsive, in order to let everyone better understanding, I myself also need to do a good homework, today this is homework, want to share with you some of the basic skills of responsive design, and the corresponding learning resources, We hope to help you.

What is responsive design? Some students think responsive design is self-adaptive layout, also some students think responsive is grid layout. In fact, these ideas are not correct. Wikipedia has made a detailed description of responsive, and I'll simply say it here. Responsive's simple design, called RWD, is a design method that provides the ability to read Web pages in a variety of devices, and RWD allows your Web pages to be presented in different design styles on different devices. From this point of description, responsve is neither a fluid layout nor a grid layout, he is a unique method of web design.

Responsive design is undoubtedly a hot topic in web design. To some extent, he will be one of the most popular web design concepts, because of the variety of access methods that users of the Web site, such as "IPad", "IPhone", "Android mobile Device", "Tablet PC", "desktop" and "notebook" appear in different forms of display. So our previous web design will not be suitable for the above-mentioned various types of equipment, which also gives us a new design concept responsive design for the subsequent web design. Let our web page adapt to various platforms, all kinds of device rendering.

This time may have someone to ask questions, is not responsive used to make mobile pages? I often hear a classmate ask this question? In fact, this is a very simple question, mobile page and our usual page production is basically the same, but the size is not the same, where a little detail needs attention, from this point, if the responsive design is used to make mobile pages and inappropriate, It can only be said that the responsive design will make your page appear more perfect on mobile. Speaking of which, maybe you'll feel what responsive is. And how to use it? How do I learn? In fact, these are not questions, and then share with you some of the basic skills of learning or using responsive design, and the corresponding learning resources.

One, maintain a simple layout of the cloth

Layout is a simple question, but also a part of every page design, but the first thing we need to do with responsive design is to make your page layout as simple as possible. To implement a simple layout, we have a few tips:

Responsive layout Tips

In the responsive layout, we can discard without reservation:

1. Minimize the use of insignificant div

2. Do not use inline elements (inline)

3. Use JS or flash as little as possible

4. Throw away the useless absolute positioning and floating style

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

Have to have, lost some of the responsive have influence of East, then what can help responsive to determine a better layout?

1. Using HTML5 DOCTYPE and related guidelines

2. Reset your style (RESET.CSS)

3. A simple, semantic core layout

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

Using these tips is nothing more than keeping your HTML simple and clean, and the key parts of your page layout (elements) do not rely too much on modern techniques, such as CSS3 effects or JS scripts.

Having said so much, how about a layout or HTML structure that is simple and clean? Here we teach you a quick test method:

You first ban all the styles (and information related to styles) in your page, open them in your browser, and if your content is organized and easy to read, then your structure will not go any worse.

Extended reading:

1.Responsive Layouts, responsively wireframed

2.Responsive Design 101

3.A simple Device Diagram for Responsive Design planning

4.multi-device Layout Patterns

5.Beginner ' s Guide to Responsive Web Design

6.Create A Responsive, Mobile-first WordPress Theme

7.nitializr

8.5 Patterns to rearrange responsive Layouts

Second, the use of medial Queries

Medial queries is greatly expanded in CSS3, what if you don't understand medial queries? We recommend that you first click here to understand. and medial queries in responsive play a very important role, can say responsive design left medial queries lost his survival significance. Simply said medial queries is a media query, you can query the appropriate style according to the size of the set. We look back to the responsive design is the most concerned about the width: Depending on the user's current width of the device, your Web page will load an alternate style to achieve a specific page style.

So medial queries how to use it? There are several ways of calling, and the details can also be read here

/*import Import method */<style>  @import url (tiny.css) (min-width:300px);  @import URL (small.css) (min-width:600px);  @import ULR (BIG.CSS) (min-width:900px) </style>/* written 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 create some common templates for responsive, for example:

@media only screen and (min-width:320px) {/* Small screen, Non-retina */} @mediaonly screen and (-webkit-min-device-p Ixel-ratio:2) and (min-width:320px), only screen and (Min--moz-device-pixel-ratio:2) and (min-width:320px) , only screens and (-O-MIN-DEVICE-PIXEL-RATIO:2/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), onl Y screen and (min-resolution:2dppx) and (min-width:320px) {/* Small screens, retina, stuff to Overri De above media query */} @media only screen and (min-width:700px) {/* Medium screen, Non-retina */} @mediaonly scree      N 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 screens and (-O-MIN-DEVICE-PIXEL-RATIO:2/1) and (min-width:700px), only D (Min-device-piXel-ratio:2) and (min-width:700px), only screen and (min-resolution:192dpi) and (min-width:700px), Only screens and (MIN-RESOLUTION:2DPPX) and (min-width:700px) {/* Medium screens, retina, stuff to ov Erride above Media query */} @media only screen and (min-width:1300px) {/* Large screen, Non-retina */} @mediaonly S Creen 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 screens and (-O-MIN-DEVICE-PIXEL-RATIO:2/1) and (min-width:1300px), only SC  Reen 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 */}

　　

More detailed medial queries template introduction, you can click here to read.

At this time you may not care about the style of the file, but more concerned about the size of how I will decide, if you are careful, from the template code above can find a little answer, then I here from other places and sketch, put here for your reference:

Extended reading:

Combination of 1.Responsive design and CSS3 Media queries

2.CSS3 Media Queries

3.CSS3 Media Queries Templates

4. Use EM units to create CSS3 media Queries

5.Responsive Web design:layouts and Media Queries

6.Create a responsive Web Design with Media Queries

7.Responsive Web Design in sass:using Media Queries in Sass 3.2

8.The EMs has it:proportional Media Queries ftw!

9.Media Queries in Responsive Web Design

10.A Basic Responsive Grid (Plus Handy CSS3 Media Query Reporter)

11.Responsive Design and Media Queries

Third, define breakpoints

Define a breakpoint, what is the breakpoint? The simple description is the critical point of the device width, that is, what are the Min-width and max-width values in the medial queries that you are concerned about earlier? So in responsive design, there are six common breakpoints, our future medial queries conditions can be determined according to these six breakpoints.

The main are:

1. The first breakpoint group is for the smartphone settings, his width is less than 480px (

2. The second breakpoint is a high-smart mobile device, such as the ipads device, whose width is less than 768px (

3. The third breakpoint is for large devices, such as the PC side, his width is greater than 768px (>768PX)

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

1. Add a breakpoint less than 320px, for small mobile devices;

2. You can also add breakpoints for tablet devices that are larger than 768px and less than 1024px (>768PX and

3. Finally, you can set a breakpoint for the ultra-wide desktop, greater than 1024px (>1024PX)

Integrated down, set breakpoints to grasp three points:

1. Meet the main breakpoint;

2. Add some other breakpoints if possible;

3. Set a desktop breakpoint above 1024px

As shown in the following:

Extended Reading

1.Determining breakpoints for a responsive design

2.device-agnostic approach to responsive Web Design

3.Deciding What responsive breakpoints to use

4.Overview of breakpoints in responsive Web Design

5.Responsive Web Design Case Study:zee

6.Looking Beyond Common Media Query Breakpoints

7.re-thinking Breakpoints in Responsive Design

8.Where and how to Set breakpoints in Media Queries

9.Using Breakpoint 1.0 In a responsive Web Design Project

10.Responsive Breakpoints and Goldilocks

Four, make your layout more flexible

The breakpoint is confirmed and the next step is to make your layout more flexible. It is recommended to use flexible grids for layout, flexible grids can make your layout more suitable for viewport size relative to fixed-width layouts. And the entire flexible grids in the fluid layout (which is often said that the adaptive layout, liquid layout, percent layout) most suitable for various types of screen size, combined with the correct medial Queries, you can make suitable for any possible device page layout.

Look at a simple contrast chart

Using the fluid layout, there is a little trick to note that in order for the browser to calculate the rounding problem of the decimal point, affecting the page layout, so your percentage of decimal places as many bits as possible, (if you have to look at Bootstrap source, you can obviously see his percentage layout, the decimal point is accurate to more than 10). Of course, you can use the off-the-shelf grid system if you are not sure about this value.

1.30+ CSS Grid System (the introduction of nearly 40 different grid systems is collected here)

2.8 Practical Responsive design frameworks (15 mesh frame systems with responsive design are collected here)

The fluid layout is convenient, but the trouble is that if you add padding and border to the elements that set the fluid width value, that's dangerous, you Know (CSS Box module) is introduced:

Is there a way to solve it? Method is, early in the set width of the element nested a div, and set padding and border on this inline element, so that adds an extra tag, in fact, there is a better way in CSS3, is to use the box-sizing to change the box The default model for module.

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

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

This causes the Web page total layout width is greater than 100%, thus bursting the Web layout, in order to let this div does not change the width of the box module, that is, regardless of his padding and border set of what value, and its width will never change, or "67%" , then we need to use box-sizing to change, so that we can set this in the style sheet:

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

　　

Extended reading:

1.30+ CSS Grid System

2.8 Practical and responsive design frameworks

3.Mobile Responsive Design:the Flexible Grid

4.flexibility:a Foundation for Responsive Design

5.Going from Adaptive to Fully responsive

6.Responsive Web Design

7.gridpak:the Responsive Grid Generator

8.Five steps to Gettin ' Flexy in responsive web design

V. Self-adaptation of pictures

Layout implementation of self-adaptation is not difficult, then how to do the picture? In other words, one of my pictures, there is a way for him to display on different devices can adapt to the screen size, to deal with this effect there is a way, if your Web page is not affected by bandwidth (regardless of performance), you can first make a picture to fit the maximum screen, You can then control the size of the display under different devices by style, and another option is to have different images for each breakpoint.

Image self-adapting size

Use styles to control the adaptive Picture:

img {  max-width:100%;}

　　

Breakpoint Picture

For each breakpoint to provide a different picture, this is a more headache thing, because medial queries can not change the image "src" attribute value, there is no way to solve it? You can refer to the following workaround:

1. Use Background-image: Use a background image for the element,

2. Show/Hide parent elements: Use a different picture for the parent element, and then control these pictures to show or hide by medial queries.

Let's take a look at a breakpoint. An example of adaptive image resolution:

The 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);}  }

　　

Extended reading:

1.Adaptive images:solving The responsive image problem

2.Responsive Images without JavaScript

3.How to style flexible images for RWD

4.Adaptive Images for Responsive Designs

5.Rundown of handling Flexible Media

6.On Responsive Images

7.Responsive Images:what ' s The problem, and how do we fix it?

8.Responsive Images:how They almost worked and what We need

9.Responsive images without Javascript

10.Responsive Image Techniques & Resources

Six, don't forget the Min and Max

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

1. Prevent your layout from getting bigger or smaller

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

Take a look at a few simple uses:

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

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

For example, the "#main" element is displayed on a desktop with a width of not less than 1000px, then we can use this:

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

　　

Seven, make most things 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 inherit it from its child and post-code elements. There are two common types of units that are currently used:

1. Percent (%) method: To identify a fixed size or fluid size for the main container, and then give each of its sub-elements using a percentage (%) to calculate the respective parameters, such as Width/padding/margin;

2. "Em" unit: First define a font size (font-size) in a primary container or "<body>", make it a basic unit, and then other elements use this as a benchmark to calculate the relevant value

The conversion between "em" and "px" is a bit tricky, and if you never know the relationship between them, I suggest you read this article, "Powerful Em in CSS," in a simple way, to see:

Eight, the effect on the mobile side

In the mobile device, especially the small screen mobile phone, all the content will be displayed in a column, this time, we need to do some processing of the style, first of all to see a layout of the comparison:

Layout on the PC desktop

This layout will be shown on our phone like this:

So what are we going to do to make these two kinds of layouts change? The implementation is simple: simply overwrite the width of each element in your mobile style sheet and convert the original width to "100%"

Do we need to add the removed style to each of the unimportant elements in the mobile phone style? In fact, we just need to add the class name "Not_mobile" to the unimportant element and add it to the phone style:

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

　　

Ten, check your viewport.

The students who have played the mobile side may know that many mobile browsers emulate the desktop PC under the browser, and your Web page will be compressed and displayed directly under a screen when browsing the browser on the mobile side. It's a powerful feature, but it's also a responsive deadly feature.

Look at a comparison chart I'm on the Internet:

In this case, I can use the "meta" attribute to make it appear normal:

< meta name= "viewport" content= "Width=device-width" >

So here to share with you the 10 basic techniques for making responsive design, if you are interested in responsive design, you can open "mediaqueri.es" to see some excellent cases. Finally, I hope this article will bring you some help. If you have a better share, we can discuss it together.

10 Basic tips for responsive design