It's going to be a lesson. Practical Tips for Responsive Web design

What is responsive web design?

Let's take a look at the explanation of Baidu Encyclopedia

The idea of responsive web design (responsive web designs) is:
Page design and development should be based on user behavior and equipment environment (System platform, screen size, screen orientation, etc.) to respond and adjust accordingly. Concrete practices are made up of many aspects, including flexible grids and layouts, pictures, and the use of CSS media query. Whether the user is using a notebook or an ipad, our pages should be able to automatically switch resolutions, picture sizes and related scripting features to suit different devices; in other words, the page should have the ability to automatically respond to the user's device environment. Responsive web design is a Web site that can be compatible with multiple terminals-not a specific version for each terminal. In this way, we don't have to do a special version design and development for the coming new devices.

Response design was mentioned more in the 2012, but the response design is still changing and innovating constantly. New devices, for example, continue to come out (the IPad Mini), which has made previous design ideas fall apart. and a variety of Web response design has been more and more attention, "Let people forget device size" concept will be driven faster response design, so web design will usher in more responsive design elements.

is response design the best choice?

In the actual project, when do we need to use the response design? Not all page rendering, content design problems can be solved by the response design, the project budget, target users and positioning determines its implementation.

For a few examples, if a website that offers promotional content, we can through CSS3 Media query technology, according to the size of the viewport to provide users with a matching visual effects, to cater to the small screen at the same time compatible with the large screen, different visual display to respond to a variety of design size, provide a better user experience and non-discriminatory design , such as a design that provides easier finger handling for small screens while providing additional improvements for large screen content, response design is optimal. If it's a budget-sufficient spot site, custom a real "mobile mobile version" more appropriate, users can be based on GPS to find nearby stores ordering meal, or a dashboard Web site, there is a large number of data content and management commands, at this time the individual response design scheme is far from supporting such a solution. Any tool or technology should be used only when the application requires it, IE 7 and 8 do not support new properties for HTML5, CSS3. If the vast majority of users of a Web site use IE 7 or 8, or lower version, to make a response is not significant, but does not mean that do not.

To sum up, the advantage of the response design is flexibility, adapt to different resolution of the equipment, the disadvantage is compatible with a variety of devices lead to code bloated, loading time lengthened.

Select enhanced compromise response design based on existing code? Or choose a real "mobile phone version", depends on the actual situation of the project.

What is viewport (viewport) and screen size (screen.width)?

The viewport and screen size are not the same concept. Viewport (viewport), the size of the viewable area, refers to the content area within the browser window, not including toolbars, tab bars, and so on. The area that the page actually displays. The screen size refers to the physical display area of the device, the overall size of the user's screen.
Viewport Debugging Tools

In IE, you can use MS IE Developer toolbar, chrom Debugging tools can also be very convenient for the viewport debugging. Safari users can choose Resizeme or Resize, and Firefox users can use Firesizer.

Figure. IE Developer Toolbar Viewport Debugging screenshot

Figure. Firesizer Viewport Debugging Tool screenshot

The

response Web design work

applies CSS3 media queries (medium Queries) to create a CSS that contains styles adapted to various device sizes. Once the page is loaded on a specific device, the viewport size of the device is detected first, and then the device-specific style is loaded. That is, you set a proprietary style sheet for different media types.

Create media query

The following code demonstrates one of the simplest instances of a media query, browsing this page and constantly adjusting the width of the browser window. The background color of the page changes depending on the current viewport size. CSS properties are used to declare how page background color transitions are performed, and the Media Query statement is a conditional expression that determines whether the maximum viewport width of an output device satisfies a certain condition.

Listing 1. Basic Media Query Code

Body {
Background-color:grey;
}
@media screen and (max-width:960px) {
Body {
background-color:red;
}
}
@media screen and (max-width:768px) {
Body {
Background-color:orange;
}
}
@media screen and (max-width:550px) {
Body {
Background-color:yellow;
}
}
@media screen and (max-width:320px) {
Body {
Background-color:green;
}
}

Current Firefox 3.6+, Safari 4+, Chrome 4+, opera 9.5+, IOS Safari 3.2+, opera Mobile 10+, and Android 2.1,ie9+ all support media queries.

diagram. browser Rollup

compatible with Media Query

IE8 and the older versions below do not support Media query queries, but you can also introduce Polyfill scripts (Putty script Polyfill is a collection of diverse technologies designed to fill the gaps in old browsers for HTML5, CSS3 support), based on JAVASCRI PT implements compatible repair, introducing respond.js (Https://github.com/scottjehl/Respond) or css3-mediaqueries.js (Https://github.com/livingston /CSS3-MEDIAQUERIES-JS) can solve this problem.

Listing 2. Introduction of Putty Script for IE old version

<!--[If Lt IE 9]>
<script src= "Https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js" ></script> <! [endif]-->


<!--[If Lt IE 9]>
<script src= "Http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js" ></script>
<! [endif]-->

Comparison of Respond.js and Css3-mediaqueries.js
　　

Respond.js Introduction
　　

Advantage:

Small size, fast speed.
Reliable! Bootstrap 3 also cites the respond.js.
Do not rely on other scripts or libraries, and optimize for the mobile end (Respond.min.js only 1kb)

Disadvantage:

Only Min-width and Max-width are supported.
Respond.js does not resolve the media queries included in the style label without parsing the CSS referenced through @import, because these styles cannot request resolution again.

Tips:

When referencing respond.js, please put it behind all CSS files (the earlier you run it, IE users will not be easy to see the flicker of non media content)
Respond.js request a raw copy of your CSS via Ajax, and if you deploy your style file on a CDN (or sub domain name), you need to upload a proxy page to enable Cross-domain communication.
Because of security restrictions, some browsers may not allow this script to work in File://ruls (because he uses XMLHttpRequest).

Summary: It is not the only CSS3 media query Putty script, but it may be the fastest.

Css3-mediaqueries.js Introduction

Advantage:

More robust, supports many media query features, supports PX and EM
Real-time response

Disadvantage:

Large size (15kb), slow running
Width not supported
@import not supported
Invalid media properties within <link> and <style> labels

Summary: When rendering a complex, responsive design, it can support many media query, but it is significantly slower to run.

CSS3 Media Query for more information

In HTML4 and CSS 2, you can specify the device type for the stylesheet by using the <link> tab's media properties, eight, and screen and print are two of the most common media types, and for example, the following code specifies that different style files be loaded for different devices, such as , a page is displayed on the screen with a sans-serif font, while printing with a serif font to show better readability, or when a page is displayed on the screen with ads, and when printed to remove ads, the media properties can be used to load matching CSS files separately.

<link rel= "stylesheet" type= "text/css" media= "screen" href= "Screen.css" >

<link rel= "stylesheet" type= "Text/css" media= "print" href= "Print.css"/>

Media Queries in CSS3 has increased the number of press queries, in CSS3 we can set different types of media conditions, and according to the corresponding conditions, to the appropriate media call corresponding style sheet. You can imagine a media query as a conditional expression, with an example:

<link rel= "stylesheet" media= "screen and (orientation:portrait)" href= "Portraitscreen.css"/>

Are you a portrait display?

<link rel= "stylesheet" media= "not screens and (orientation:portrait)" href= "Portraitscreen.css"/>

Append not reverses the logic of the query

<link rel= "stylesheet" media= "screen and" (orientation:portrait) and (min-width:
800px) "href=" 800wide-portrait-screen.css "/>

Longitudinal display with a viewport width greater than 800px

<link rel= "stylesheet" media= "screen and" (orientation:portrait) and (min-width:
800px), projection "href=" 800wide-portrait-screen.css "/>

As long as the projection is true, all queries are not true, then do not load

@media screen and (max-device-width:400px) {h1{color:red}

Media queries can also be written to the style sheet

@import url ("phone.css") screen and (max-width:360px);

It is also unusual to use @import to refer to other style sheets in the current style sheet in a CSS style sheet. However, it is necessary to pay attention to the use of CSS @import, will affect the loading speed.

About link vs @import digression

We can introduce CSS files through link and @import two ways

Listing 3. Introducing a CSS approach

<link rel= ' stylesheet ' href= ' a.css ' >

Or

<style>
@import url (' a.css ');
</style>

The difference between the two is:

Link uses HTML tags to associate CSS, and import can introduce other CSS files into a CSS file

Differences in compatibility. IE6 below does not support @import

difference in load order (see also: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/)

4 JS Control DOM style differences (link supports using Javascript to control dom to change style; @import does not support)

The actual project experience is that @import in IE can cause the file download order to be changed, such as the script file placed behind the @import will be downloaded before the CSS, if the script in the Getelementsbyclassname error.

The premise of responsive design

The response design concept is based on a combination of mobile layouts, resilient images, resilient forms, flexible video and media queries. Use a percentage layout to create a flowing elastic interface and use media queries to limit the range of elements that are grouped together to form the core of the responsive design. The fixed-width pixel layout cannot implement the changeable, unknown device.

With regard to the flow layout, it is a way of adapting to the screen, that is, not fixing the width of the DIV, but using a percentage as the unit to determine the width of each block. The specific way is to discard the PX, using EM or% as the unit, early we this way is for text scaling, ensure that the old version of IE can also adjust the font size. You may be wondering, since modern browsers have long supported the scaling of text in pixels, where is the advantage of EM? The biggest advantage is that when we use relative unit em to write layout and font size, if we give <body> labels a text size of 100% and use relative unit em for other text, the text will be affected by the initial statement on the body. This allows you to bulk modify page text and layout, and is relatively more flexible. The disadvantage is that it may not be as straightforward as a pixel in the calculation of percentages, the trick to turning pixels into em is that Dan Cederholm wrote an article about streaming layouts that mentions a formula, the target element size, the context element size = percent size, and it's not easy to understand the target element as a child element, The context element is understood as a parent element, although most of the time it is understandable, but the context element does not necessarily represent the parent element, as shown in the following example:

If a real PSD design is designed with a fixed pixel, the 940px header layer is included in the 960px wrapper layer.

Figure. Examples of PSD design draft

Wrapper layer in the package header layer, according to the PX is:

Listing 4. Fixed-width Design code example

#wrapper {
Margin-right:auto;
Margin-left:auto;
width:960px;
}
#header {
margin-right:10px;
margin-left:10px;
width:940px;
}

When you go to a percentage, you should write this, and the context element is the parent element:

Listing 5. Percent Width Design code example

#wrapper {
Margin-right:auto;
Margin-left:auto;
width:90%; /* Control of the outermost div, which can be 100%, 90%, or whatever you think the actual page shows the best percentage * *
}
#header {
margin-right:10px;
margin-left:10px;
width:97.9166667%; * 940÷960 * *
}

To illustrate, the following HTML structure


CSS styles are:
h1 {Font-size:4.3125em}/* 69÷16 *
#content H1 span {
Font-size:. 550724638em; * 38÷69 * *
Line-height:1.052631579em; * 40÷38 * *
}

The default browser text size is 16px, assuming that the H1 in the design is 69px and span is 38px,line-height 40px, you can see that the text size (38px) of the <span> element is relative to the text size (69PX) of its parent element. and its row height (40px) is relative to its own text size (38px), so we can not generalize that context element is equivalent to the parent element.

Summary: Flow layout is the basis and starting point of response design.

Web page Production Examples

For example, change the layout of a page layout with a maximum width of 980px, 700px, and 480px, respectively:

Figure. Page Layout Example

First step: Meta tag or @viewport{}

<meta name= "viewport" content= "Width=device-width, initial-scale=1.0" >

intial-scale=1.0 prevents the mobile browser from automatically resizing the page, indicating that the browser will render the page according to the actual size of its viewport.

We can also use the @viewport rule to control the viewport, which is the same effect as using the META tags, but is completely controlled using CSS. The zoom descriptor is equivalent to the Initial-sacale attribute of the viewport meta tag.

@viewport {
Width:device-width;
Zoom:1;
}

Step two: For IE8 and the following version of the support media query to add JS, you can use Media-queries.js or respond.js

<!--[If Lt IE 9]>
<script src= "Http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js" ></script>
<! [endif]-->

Step three: Write the HTML structure of the page

* STRUCTURE * *
#pagewrap {
width:960px;
}
#header {
height:180px;
}
#content {
width:600px;
Float:left;
}
#sidebar {
width:300px;
Float:right;
}
#footer {
Clear:both;
}

Fourth step: Write the media query statement

The percentage width is defined when the viewport width is 980px and below. When the viewport width is 700 and below, remove the width and float, at this time content and sidebar will fill the entire width, when the viewport width is 480 and below, reduce H1 title font size, hide sidebar, to more Good to adapt to small screen limited space. The code is as follows:

/* for 980px or less * *
@media screen and (max-width:980px) {

#pagewrap {
width:95%;
}
#content {
width:65%;
}
#sidebar {
width:30%;
}

}
/* for 700px or less * *
@media screen and (max-width:700px) {

#content {
Width:auto;
Float:none;
}
#sidebar {
Width:auto;
Float:none;
}

}

/* for 480px or less * *
@media screen and (max-width:480px) {

H1 {
Font-size:0.8em;
}
#sidebar {
Display:none;
}

}

(Above code reference article: Http://webdesignerwall.com/tutorials/responsive-design-in-3-steps)

Where is the best place to write

media query statements?

Saving different media query styles to separate files is not considered to be of great benefit because multiple separate files increase the number of HTTP requests used for page rendering, resulting in slower page loading and, in fact, no easier organization of code for this process. It is very easy to omit some of the media query statements. The

recommends appending the media query style to an existing style sheet. One of the benefits of following the media query statement after the main style is that when the main style changes, the media query style is likely to need to be adjusted accordingly so that you are not easily missed. such as:

#header h1{}
@media screen and (max-width:768px) {#header h1{}} method.

The bottom of the form

How do I set a breakpoint? The

Traditional definition of a breakpoint is divided using a number of fixed widths, such as 320px (IPhone), 768px (IPad), 960px or 1024px (traditional PC browser), The benefits of this scheme is very good to take care of the current mainstream equipment, but the development of technology is too fast, a variety of different resolution of equipment, such as some mobile phone size close to the flat, some flat size than the computer and so on, it is difficult to ensure a good future to support a variety of equipment Another way to determine a breakpoint is to set breakpoints based on the content and to set the number of breakpoints. With the advent of various size devices, breakpoint naming is more commonly used, rather than being named by a device.

Diagram. Breakpoint Settings Reference

Response picture

The implementation of the picture with the flow layout of the corresponding scaling is very simple. Need to declare in CSS:

img {max-width:100%;}

This allows the picture to be automatically scaled to match its container 100%. We can apply the same style to other multimedia labels. Such as:

img,object,video,embed {max-width:100%;}

The picture can be scaled as the viewport scales, but if the viewport is pulled up (such as 1900px) until the picture stretches beyond its original size, the picture is likely to be widened too, and a CSS declaration must be appended:

. img{max-width:202px;}

We can also give the outermost #wrapper to set the max-width to limit the fluid layout page being pulled up, such as:

Listing 6. Example of a response picture code

#wrapper {
Margin-right:auto;
Margin-left:auto;
width:96%;
max-width:1414px;
}

So, what's the problem? Did you finish the response to the picture? The answer is in the negative. An elastic picture is not equal to a response picture. We should provide different pictures for different screen sizes. As shown below, is no longer a picture to meet different devices, but for large screen to prepare large size pictures, small screen to prepare smaller size of the clear picture.

Figure. A picture applied to different sizes of devices

Figure 9. Apply a different picture to a different device

The recommended two response picture solutions are as follows:

　　 Matt Wilcox Solution

Put the htaccess and adaptive-images.php in the root directory.
Create a writable Cache folder
<script>document.cookie= ' resolution= ' +math.max (screen.width,screen.height) + '; path=/';</script>

Sencha.io SRC Solution:



　 Responsive Video

Unlike the previous need to insert video requires a piece of bloated code, HTML5 inserting video requires only one line of code, but the problem is that it is not responding.

<video src= "Video.ogg" ></video>

Note: Safari only allows the use of MP4/H.264/AAC media files in <video> and <audio> elements, while Firefox and Opera only support OGG and WebM, so the more complete wording is as follows:

　　 Listing 7. Example of a response video code

<video width= "640" height= "he" controls AutoPlay preload= "Auto" loop
Poster= "Myvideoposter.jpg" >
<source src= "VIDEO/MYVIDEO.OGV" type= "Video/ogg" >
<source src= "Video/myvideo.mp4" type= "Video/mp4" >
Responsive video
</video>

How do I get the video to respond? We need to append the max-width:100% statement:

Video {max-width:100%; height:auto;}

Question: How do you implement a response if the video is embedded in an IFRAME? The easiest way to do this is to use a jQuery widget called Fitvids. The code is as follows:

　　 Listing 8. An example of a video implementation response code introduced by Iframe

<script src= "Js/fitvids.js" ></script>

<script>
$ (document). Ready (function () {
$ ("#content"). Fitvids ();
});
</script>

Response Table

There are many ways to implement the data table response, according to the table content, the amount of data to carry out the specific design. A fluid table is not equal to a response table, such as a percentage-width table, which can be displayed normally on a small-screen device but the overall content is compressed smaller and less readable, and does not represent a true response.

For example, for the following data more tables, there are a variety of design ideas can be used.

Figure 10. A table example of how to implement a complex table with a responsive style

Idea 1: Hide unnecessary columns for small screens, and streamline tables. The main use of CSS table Td:nth-child (n) {display:none} implementation.

Idea 2: The horizontal table head is changed to portrait and fixed position by using CSS, the remainder of the content is unchanged and the horizontal scroll bar appears. Tbody on the application of White-space:nowrap; tbody TR application of Display:inline-block;

Idea 3: Display each row of data corresponding to the header in an area, followed by each row. Using the HTML data attribute, write the header name into CSS, td:before{content:attr (Data-title);

Idea 4: Display the data in a richer form in a pie or histogram on a small screen with a plain text form, provided that it is the appropriate table content.

Idea 5: Use a small thumbnail to display on the small screen and prompt the user to click to view the table, thus opening the page to get a larger screen space to display the entire table.

Please refer to the "Reference resources" link for the specific implementation code of the above solutions.

Recommended Framework for Responsive design

Using MODERNIZR allows older versions of IE to support HTML5 elements, BootStrap, semantic UI, and Foundation front-end interface development frameworks are selectable.

Summarize

This tutorial we can say is from the introduction to the in-depth explanation of the response web design, introduced a number of commonly used design tools and thinking skills, of course, how to design the layout, sometimes according to the actual needs of the business.