Responsive web Design tips and writing a response page instance

Response Web Design Tips

What is a responsive design?

The release of IOS and Android, smart phones, tablets, smart appliances and other new equipment, a great convenience of our lives, but the face of a variety of terminal devices, different screen resolution, to the web design has brought new challenges, we can not estimate the user's terminal equipment and network conditions, It is not possible for each device to design a set of Web sites, how to achieve the Web UI in the multi-terminal adaptation? In 2010, Ethan Marcotte once published an article "Responsive Web Design" in a List Apart, which provides a design method that enables the same Web site on smartphones, desktops, And a perfect display on any device between the two. This method can be based on the user's screen size, reasonable for the existing and future various devices to provide the best browsing experience.

Figure 1. Froont Response Design Website screen-cutting

This also means that the design thinking of the conversion, should not be attached to the layout, wireframe and other specific size, but should consider how to use fluid elements. Instead of designing pages based on the size of different devices, focus more on how to design the content. Discard pixels, discard the fixed width, design from a small screen, and then step up the design for the big screen





Of course, you also need to guide customers, the site does not have to be consistent in all browsers, time should be spent in more valuable places, rather than spend a lot of time to repair bad browser inherent defects. The core idea is that elegant demotion, content first.








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 2. IE Developer Toolbar Viewport Debugging screenshot

Figure 3. Firesizer Viewport Debugging Tool screenshot

The principle of responsive Web design

Apply CSS3 Media Query (medium Queries) to create a CSS that contains styles for 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 a media query

The following code illustrates one of the simplest examples of media queries, 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 inquiries.

Figure 4. Browser Rollup for Media Query compatible

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





Advantages：





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 &lt;link&gt; and &lt;style&gt; 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 &lt;link&gt; 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.





&lt;link rel= "stylesheet" type= "text/css" media= "screen" href= "Screen.css" &gt;





&lt;link rel= "stylesheet" type= "Text/css" media= "print" href= "Print.css"/&gt;





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:





&lt;link rel= "stylesheet" media= "screen and (orientation:portrait)" href= "Portraitscreen.css"/&gt;





Are you a portrait display?





&lt;link rel= "stylesheet" media= "not screens and (orientation:portrait)" href= "Portraitscreen.css"/&gt;





Append not reverses the logic of the query





&lt;link rel= "stylesheet" media= "screen and" (orientation:portrait) and (min-width:


800px) "href=" 800wide-portrait-screen.css "/&gt;





Longitudinal display with a viewport width greater than 800px





&lt;link rel= "stylesheet" media= "screen and" (orientation:portrait) and (min-width:


800px), projection "href=" 800wide-portrait-screen.css "/&gt;





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





&lt;link rel= ' stylesheet ' href= ' a.css ' &gt;





Or





&lt;style&gt;


@import url (' a.css ');


&lt;/style&gt;





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 &lt;body&gt; 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 5. 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.

Flow layout is the base and starting point of response design.


Start making a responsive web site.

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

Figure 6. Page Layout Example

First step: Meta tag or @viewport{}





&lt;meta name= "viewport" content= "Width=device-width, initial-scale=1.0" &gt;





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





&lt;!--[If Lt IE 9]&gt;


&lt;script src= "Http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js" &gt;&lt;/script&gt;


&lt;! [endif]--&gt;





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 the media query statement?





Save the different media query styles to a separate file. Personally, it's not much of a benefit because multiple separate files increase the number of HTTP requests used for page rendering, causing the page to load slowly, and in fact this does not make it easier to organize your code, and it's very easy to omit some of the media query statements.





It is recommended that you append 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 the screen and (max-width:768px) {#header h1{}} method.





Bottom of form








How do I set a breakpoint?





The traditional way to determine the breakpoint is to use some fixed width to divide, such as 320px (IPhone), 768px (IPad), 960px or 1024px (traditional PC browser), the benefit of this scheme is good to take care of the current mainstream equipment, but technology development is too fast, A variety of different resolution equipment, such as a number of mobile phone size close to the flat, some flat size than the computer and so on, it is difficult to ensure that the future can be a good support for 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.

Figure 7. 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 8. 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 paper briefly introduces the commonly used response design tools, ideas and skills, in addition to the need to master a certain technical means of implementation, more need to have how to design, how to layout the thinking, also can not ignore the support of high-resolution equipment, understand the gradual enhancement and elegant downgrade of the essence of difference, truly achieve the page good-looking, easy to use, reasonable.

Write an instance of a response page

Get ready

Before we start to implement our own response page, we have to master several important concepts.

Introduction to HTML

HTML is the basic language of the Web, and it describes the structure of the document. Take a newspaper, for example, and we'll see a headline, a citation, a text, a footnote, and so on. HTML, too, uses a variety of semantic tags to describe the structure of the Web page. Its syntax is simple:

Listing 1. HTML tag Syntax

<tag attribute= "Value" >content</tag>

Web page structure is all provided by the HTML tag description, you can refer to MDN provided by the HTML reference manual to learn the commonly used tags. Here's a sample code that the reader can copy into a text editor, save as a HMTL format, and then open with a browser to have an intuitive feel for HTML.

Listing 2. Example HTML code

<body>
<p>
clouds to rain, snow to wind, Jan Zhao to clear skies. Laihong to the Swallow, the host bird to the Ming worm. Three-foot sword, six-June bow,
Ridge north to the Jiangdong. The world clear the Hall of summer, the sky desolate. cross-strait Xiao Smoke Willow Green, a garden spring rain apricot red.
Temples wind and frost, passers-by early in the trip, a rain, the river late fishing Weng.
</p>
<q>
Once upon a time, there was a programmer who got a magic lamp. The lamp God promised to fulfill his one wish.
Then he made a vow to the lamp, hoping to write a good project in his lifetime. Then he got eternal life.
</q>
<a href= "http://www.ibm.com/developerworks/cn/
 " >http://www.ibm.com/ Developerworks/cn/</a>
<blockquote>
Romantic love is morbid, because you cannot love many people, you accumulate the power of love, and then flood it out.
Whenever you find someone, this flood of love is projected, an ordinary woman becomes an angel,
an ordinary man becomes divine. But when that flood is over, you become normal again and you feel cheated.
He's just an ordinary man, she's just an ordinary woman.
</blockquote>
</body>

Here are two places to note:

    Select labels, A label that should match the semantics. For example, many of the above tags can also use a <div> tag instead, but this makes the corresponding part of the loss of semantics, is a bad way to achieve.

HTML only describes the document structure, does not describe the style! If readers use the browser to open the example HTML code above, may feel a little puzzled, the text of the three paragraphs in the style looks very different Ah, this is not the effect of the various tags? No, the browser provides the default style for HTML tags, and if you disable all styles in the browser, you'll see that they don't look any different. For example, in Chrome browser, you can install the Web Developer plug-in to disable the style.

Introduction to CSS

CSS (cascading style Sheets), Chinese translation cascading style sheet, used to define the style of the document, such as font, color, layout, and so on. Its syntax is also very simple:

Listing 3. CSS syntax

selector {
Property:value;
...
}

You can refer to the CSS manual to familiarize yourself with its usage.

CSS can be defined in the head of an HTML document, in an element, or in a separate CSS file. In actual development, in order to achieve the separation of content and style, generally in a separate file to define CSS, at this point, you need to introduce CSS in the head of the HTML document:

Listing 4. Introducing CSS Files

<link rel= "stylesheet" type= "Text/css" href= "Style.css" >
<body>
</body>

In CSS, the so-called Cascade refers to the child elements will inherit the style of the parent element, so when you define a style, you should start with the topmost element, first define the common style, and then layer down to define the unique style of each child element.

Everything is a box.

Diagram Box model

You can review any element on the page casually in the browser's developer tool, and you will find that it looks like a box model as shown in the previous illustration. Take this figure as an example: the element size is 200x200, the inner margin is 30, the border is 10, and the top and bottom of each have 20 and 59 outer margin. When displayed on a page, the size of an element contains its own size, as well as the inner margin and border, which is the part of the black solid line enclosed in the diagram. It's a bit cumbersome for front-end developers to constantly compute the actual display size of an element when they're writing CSS.

Fortunately, the Box-sizing property can change the CSS box model, the attribute is specified as Border-box, the actual size of the element display is defined in the CSS width and height, and the size of the elements on this basis minus the size of the inner margin and border, automatic adaptation. For example, if you add the following code to the CSS, the size of the element is automatically adapted to 120x120. Give it a try!

Listing 5. Box-sizing

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

}

The following content is based on what you know about the box model, and using the CSS fragment to change the behavior of the box model, if you have any questions about this knowledge, please refer to the resources at the end of the article to learn to master.


Design your own responsive CSS framework

Above we have a brief introduction to HTML and CSS, starting from this section, will focus on how to implement the response design. To implement a responsive page, you must have two abilities: first you need a flexible layout, and then you need to adjust the layout of the page at the right time. Before we focus on the two approaches, let's take a moment to study the web design principles.

Everything is grid.

You open a Web page, the eyes will focus first to the top of the page, and then from the top down, moving from left to right, which is the most consistent with human behavior habits. Web design also follows the same principle, the page from top to bottom, from left to right into different cells. If you don't believe it, you can open a website to see if you are following the principle. The picture below is the author's watercress page, I use the red color box to draw the approximate cell, of course, this is only a rough division, the contents of the cell can also be divided into finer.

In fact, when a front-end developer gets a design, it divides the design into such a way that it defines the HTML structure and then uses CSS to lay out the page, adjust the font, color, and so on, and finally achieve the page that meets the designer's requirements.

Those common CSS frames on the page is also a grid division, the General page divided into 12 columns, the reason for choosing 12, because 12 is 2, 3, 4, 6 LCM, so it is easy to divide the entire page into 2, 3, 4 ... Column.

Diagram. Everything is grid

Let's look at how to use HTML and CSS to implement such a grid system. In simple terms, we divide the page from landscape into rows, from portrait to 12, each column to 1/12 of the entire row width, so that when the page size changes, the width of each column is scaled up or down proportionally. For example, the following HTML fragment divides the page into 4 lines, the first two rows are divided into three columns, and each column occupies a different page width.

Listing 6. Grid-html

  <div class= "grid"
<div class= "Row"
<div class= "Col-2" >2 Columns</div>
<div class= "col-10" >10 columns</div>
</div>
<div class= "Row"
<div class= "col-3" >3 columns</div>
<div class= "col-9" >9 columns</div>
</ Div>
<div class= "Row"
<div class= "col-4" >4 columns</div>
<div class= "col-4" >4 Columns</div>
<div class= "col-4" >4 columns</div>
</div>
<div class= "Row" >
<div class= "col-3" >3 columns</div>
<div class= "col-6" >6 columns</div>
<div class= "col-3" >3 columns</div>
</div>
</div>

We use the following CSS to define the grid, for debugging convenience, specifically for the element added 1 A pixel border. In CSS, we define the ruled as 100% and define 1 columns, 2 columns respectively ... 12 The width of the column.

Listing 6. Grid-css

* {
border:1px solid Red!important;
}
. Row {
width:100%;
}

. col-1 {
width:8.33%;
}

. col-2 {
width:16.66%;
}

. col-3 {
width:25%;
}

. col-4 {
width:33.33%;
}

. col-5 {
width:41.66%;
}

. col-6 {
width:50%;
}

. col-7 {
width:58.33%;
}

. col-8 {
width:66.66%;
}

. col-9 {
width:75%;
}

. col-10 {
width:83.33%;
}

. col-11 {
width:91.66%;
}

. col-12 {
width:100%;
}

Opening a page in a browser does not work as we expect, although the widths of each column correspond to our expectations, but they are not lined up in the same row, but are arranged from top to bottom. This is not surprising, this is the browser's default layout for HTML elements. Luckily, we only need a CSS element, we can adjust the layout to the way we expect.

Figure unfinished Grid

Flex layout

Flex layout is very powerful, it can be an element of all the child elements in a flexible layout, automatically fill the width of the elements in a proportional manner. All we need to do is change the following CSS. Row class:

Listing 7. Flex layout

. Row {
width:100%;
Display:flex;
}

Like a juggler, the grid we want is out!

The grid after the figure is completed

Flex layouts also have a Flex-wrap:wrap property that automatically places child elements on the next line when the remaining width of the parent element holds more child elements, which is particularly useful in response design.

In fact, this page is now a response page, you can resize the browser, or on the tablet, mobile phone access to the page, its content will be based on the resolution size to adjust accordingly.

Figure-Response Grid

Of course, the usual response page to do more work, not only the content can automatically adapt to the size of the browser window, layout should make corresponding adjustments, even on the phone or flat, due to limited resolution, need to hide some unimportant content, so as to bring users a better experience.

Media Query

All of this can be done through media query, and media query can apply a different CSS to the page based on some judgment criteria. For example, the following CSS fragment hides the first row of the second column when the browser window is less than 500 pixels, and changes the background color of the third row to yellow.
Listing 8. Media Query

@media only screen and (max-width:500px) {
. col-4 {
Background-color:yellow;
}

. col-10 {
Display:none;
}
}

In fact, we've implemented a responsive CSS framework that we've been able to implement with some simple response pages. Of course, in the actual work we do not generally do so, we usually use the existing CSS framework, such as Bootstrap, these frameworks are more powerful, we can only write a small number of code to implement a responsive page. The reason why we have to design a responsive CSS framework is to understand the rationale behind it, which makes it easier to use other frameworks, and to customize your framework when the framework doesn't meet your needs.


Conclusion

This article, through examples, explains what is the response page, and introduces the basic knowledge needed to implement the response page, and finally realizes a simple and responsive CSS framework. I hope this article can help you start your own response page tour.