[FE] Responsive Web Design Overview

Layout features 1. Single row layout vs horizontal layout

Mobile phone screen width is small, so the use of single-column layout.
Anti-View Desktop web design, in order to use the width, often use a variety of horizontal layout components, such as horizontal navigation bar, horizontal button group, horizontal paging and so on. However, the horizontal layout of the components, in the mobile side, if the device width is not enough, will cause the component to break the line, affecting the visual effect.
So one of the basic ideas of RWD, the desktop uses a horizontal layout, and the mobile side uses a single-column layout.

Implementation Reference
Button Group http://zrss.github.io/ResponsiveDesign/templates/rw-btn-group.html
Pagination Style http://zrss.github.io/ResponsiveDesign/templates/rw-pagination.html
Post Topic http://zrss.github.io/ResponsiveDesign/templates/rw-topic.html

2. Streaming layout vs Fixed layout

The so-called flow layout, for example, like a bowl of water, the width becomes smaller, the height will become longer. The essence is the percent width layout, which does not use an absolute positioning style, because absolute positioning is used, which leaves the element out of the document stream, and when the width becomes smaller and the height is longer, the other elements in the document flow are obscured.
In addition, the flow layout needs to pay attention to the desktop display width problem, on the mobile side of the width of 100% is appropriate, and on the desktop 100% of the width is not significant, and even affect reading, when you need to limit the width, you can use the CSS Max-width property.
Fixed layout, the arrangement of elements can be precisely arranged, but when the screen width is small, there will be a horizontal scroll bar, affecting the user experience, this is also the general fixed layout of the page footer hint to use greater than 1024x768 resolution reason.
So the basic idea of RWD is two, using a streaming layout.

Implementation Reference
Home style http://zrss.github.io/ResponsiveDesign/templates/rw-navbar.html two columns of layout

3. EM vs PX

Both EM and px are font-size units.
EM is not an absolute unit, it is relative to the currently selected font size unit, visually, 1em equals the current font size, such as the current document font size is 12px,1em = 12px,2em = 24px. Friendly to mobile devices.
PX is an absolute unit, which is a fixed size unit for the screen medium, and 1px equals the 1 point of the computer screen (the smallest partition of the screen resolution). Of course, due to the fixed size of the nature, can not scale, unfriendly to mobile devices.

Implementation Reference
Table Styles http://zrss.github.io/ResponsiveDesign/templates/rw-table.html the headings in them

4. Word Wrap

Word wrap problem, if a word is very long, if you do not force line wrapping, it may exceed the boundary that contains the word element, affecting the layout.
Use the following CSS code to force line breaks

{    word-break: break-all;     word-wrap: break-word;}

Debugging methods

Chrome Desktop Debugging page, right-click on the element, or press F12 to use developer tools, such as view element, network and console, and in Chrome Mobile can do the same function, But you need help with chrome desktop.
First, turn on USB debugging on your Android phone, connect to your computer with a USB cable, and then, in Chrome Desktop, enter About:inspect in the address bar to check for Chrome mobile in your phone, which you can Open the page you want to debug in mobile, refer to

Click Inspect to open developer Tools for that page, and then you can debug the page as you would in Chrome desktop

PS: The icon on the right side of the Red arrow points to the screen projection, which shows the view on the phone on the left side of the browser;

In addition, Chrome desktop also has the device mode function, can simulate the page on different mobile phone display situation, the advantages are simple and fast, the disadvantage does not completely accord with the actual situation.
Here are the steps:
1. f12/option + COMMAND + I outbound developer tools
2. Click Toggle Device Mode
3. Adjust the developer tools position so that it moves to the right side of the browser
4. Ctrl + R/command + R Refresh Page

Toggle Device mode and adjust Developer Tools button location, reference

Complete operation Process

Information

Http://blog.froont.com/9-basic-principles-of-responsive-web-design/RWD 9 Basic Principles
http://stackoverflow.com/questions/609517/why-em-instead-of-px em vs px
Http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design RWD CSS Tricks
http://bradfrost.github.io/this-is-responsive/patterns.html RWD Patterns
Http://www.lingulo.com/tutorials/css/how-to-build-a-html5-website-from-scratch Web design with sophisticated tech ( Fucking awesome)
http://www.smashingmagazine.com/2014/09/03/testing-mobile-emulators-simulators-remote-debugging/2/Android and IOS Debugger

Summarize

? The first implementation is inspiration, and the follow-up implementation is micro-innovation repetition. Personally think the overall idea is the desktop level, the mobile side vertical 100% full; simplify the element structure; Cannot write style, use CSS class (for media Query), and use absolute positioning when floating affects layout.
Finally I just network resources porters, integration people, translators, RWD practitioners, and then wrote this article, there are personal views, all kinds of mistakes are unavoidable, very welcome to correct, supplement and exchange.

[FE] Responsive Web Design Overview