What is responsive design? Making responsive design

Article Introduction: What is responsive design? Some students think responsive design is adaptive layout, but also some students think responsive is grid layout. In fact, these ideas are not correct.

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

What is responsive design? Some students think responsive design is adaptive layout, but also some students think responsive is grid layout. In fact, these ideas are not correct. Wikipedia made a detailed description of responsive , and I'll just say it here. Responsive design is simply called RWD, is a well-designed way to provide a variety of devices can read the Web page, RWD can make your Web page in different devices to show different design style. From this point of view, responsve is neither a fluid layout nor a grid layout, he is a unique approach to web design.

Responsive design is undoubtedly a hot topic in web design. In a way, he will be one of the most popular web design concepts, because there are different forms of screen displays, such as "IPad", "IPhone", "Android mobile Device", "Tablet PC", "desktop" and "Notebook", as Web users increasingly diversify their access methods. In this way, our previous web design can not be suitable for all the above devices to browse, which also gives us a new design of the web design concept responsive design. So that our web page can adapt to a variety of platforms, various devices rendering.

At this time, someone may be wondering if responsive is 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 of view, if the responsive design is used to make mobile pages and improper, You can only say that responsive design can make your page on the mobile display more perfect. Speaking of which, maybe you'll feel what responsive is. And how to use it? How do I learn? In fact, these are not asked, and then share with you the learning or the use of responsive design some of the basic skills, as well as the corresponding learning resources.

One, keep a simple cloth layout

Layout is a simple problem, but also a part of every web design that must be included, but the first thing we 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 without reservation:

1. As little as possible with unimportant div
2. Do not use inline elements (inline)
3. As little as possible with JS or flash
4. Throw it away. Absolute positioning and floating style
5. Discard any redundant structures and do not use 100% settings

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

1. Using HTML5 DOCTYPE and related guidelines
2. Reset your Style (RESET.CSS)
3. A simple, semantically-centered layout
4. Use simple tips for important page elements, such as navigation menus

Using these tips is to keep your html simple and clean , and the key parts of your page layout (elements) should not be overly dependent on modern techniques, such as CSS3 effects or JS scripts.

With so much to say, how about a layout or HTML structure that is simple and clean? Here's a quick test to teach you how to:

You first ban all of the styles (and the information associated with the style) on your page, open in the browser, and if your content is arranged in order to facilitate reading, then your structure will not be poor.

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. Initializr
8. 5 Patterns to rearrange responsive Layouts

Ii. use of medial Queries

Medial queries is greatly expanded in CSS3, if you don't know much about medial queries? I suggest you click here to understand. and medial queries plays a very important role in responsive, it can be said that responsive design left the medial queries lost his meaning of survival. Simply put, medial queries is a media query, which can be queried according to the size of the set and the matching style. We look back, responsive design is the most concerned about the width: According to the user's use of the device's current width, your Web page will load a spare 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>/* Write directly in the style file/@media screen and (max-width:300px) {   /*tiny styles*/} @media the screen and max-width:600 px) {   /*small styles*/} @media screen and (max-width:900) {   

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/} @media only screens and (-webkit-min-devi Ce-pixel-ratio:2) and (min-width:320px), only screens and (Min--moz-device-pixel-ratio:2) and (Min-width:3 20px), only screens and (-O-MIN-DEVICE-PIXEL-RATIO:2/1) and (min-width:320px), only the screen and (Min-devic E-pixel-ratio:2) and (min-width:320px), only screens and (min-resolution:192dpi) and (min-width:32  0px), only screens and (MIN-RESOLUTION:2DPPX) and (min-width:320px) {/* Small screen, retina, stuff To override above media query/} @media only screens and (min-width:700px) {/* Medium screen, Non-retina/} @ Media only screens and (-webkit-min-device-pixel-ratio:2) and (min-width:700px), only the 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:700  PX), only the screen and (      Min-device-pixel-ratio:2) and (min-width:700px), only screens and (min-resolution:192dpi) and (min-width:700px), only screens and (MIN-RESOLUTION:2DPPX) and (min-width:700px) {/* Medium scree N, retina, stuff to override above media query/} @media only screens and (min-width:1300px) {/* Large screen, non   -retina/} @media only screens and (-webkit-min-device-pixel-ratio:2) and (min-width:1300px), only the screen and ( Min--moz-device-pixel-ratio:2) and (min-width:1300px), only screen and (-O-MIN-DEVICE-PIXEL-RATIO:2/1) a nd (min-width:1300px), only screens and (Min-device-pixel-ratio:2) and (min-width:1300px), only the 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 point you may not be concerned about how the style files are written, and more concerned about this size I want to decide, if you are careful, from the above example of the template code to find a point of the answer, then I have here from elsewhere cut and Zhang Tu, put here for your reference:

Extended reading:

1. The combination of responsive design and CSS3 Media queries
2. CSS3 Media Queries
3. CSS3 Media Queries Template
4. Create a CSS3 media Queries using the EM unit
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 have 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, so what is the breakpoint? The simple description is, the device width of the critical point, that is, in front of everyone more concerned about the medial queries in the min-width and max-width values are? Then in the responsive design, the common breakpoint has six kinds, our future medial queries condition judgment can according to these six breakpoints to decide.

The main are:

1. The first breakpoint group is for smart phone settings, and his width is less than 480px (
2. The second breakpoint is a highly intelligent mobile device, such as a ipads device, whose width is less than 768px (
3. The third breakpoint is for large devices, such as the PC side, whose width is greater than 768px (>768PX)

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

1. Add a breakpoint less than 320px for a small mobile device;
2. You can also add breakpoints that apply to a tablet device, greater than 768px less than 1024px (>768PX and
3. Finally, you can set a breakpoint for the very wide desktop, greater than 1024px (>1024PX)

Combined, set breakpoints to grasp three key points:

1. satisfy the main breakpoint;
2. Add a few other breakpoints if possible;
3. Set a desktop breakpoint above 1024px

As shown in the following illustration:

Extended Reading

1. Determining breakpoints for a responsive
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
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

[1] [2] Next page