On the design of Responsive Web page

My first contact with responsive web design also starts with the application bootstrap. We use Bootstrap's grid class to simply bring responsive design into our web design, and of course the bootstrap framework actually does other things to support web responsive design. Now, let's get a glimpse of the rationale behind responsive web design.

The premise of implementing responsive Design: Allow Web page scaling

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

The meta tag of the viewport overrides the default viewport and helps to load styles related to a particular viewport.

The Width property sets the screen widths. It contains a value, such as 320, that represents 320 pixels, or a value of ' device-width ', which tells the browser to use the original resolution.

The Initial-scale attribute is the initial scale of the viewport. When set to 1.0, the original width of the device is rendered.

Realizing the core of responsive design: CSS3 media Query

Automatically detects screen width and chooses to load the appropriate CSS file.

CSS Media queries, which is commonly used for layouts, has the following

Device type (media type):

allAll devices
screen Computer monitor
printPrint paper or Print preview view
handheldPortable Devices
tvEquipment for TV type
speechSemantic and Audio box generators
brailleBraille Tactile feedback device for the blind
embossedBraille Printers
projectionVarious projection devices
ttyMedia using fixed density letter grids, such as telex typewriters and terminals

Device features (media feature):

widthBrowser width
heightBrowser height
device-widthWidth value of the device screen resolution
device-heightHeight value of device screen resolution
orientationThe direction of the browser window is portrait or landscape, and the value is portrait when the height of the window is greater than or equal to the width, otherwise landscape
aspect-ratioScale value, the aspect ratio of the browser
device-aspect-ratioScale value, aspect ratio of the screen

Example

1. /* for PX width screen */
2. @media only screen and (max-device-width:240px) {
3. Selector{ ... }
4. }

2. /* For 320px width screen */
4. @media only screen and (min-device-width:241px) and (max-device-width:320px) {
6. Selector{ ... }
8. }

1. /* for 480 px width screen */
2. @media only screen (min-device-width:321px and (max -device-width:480px
3. selector{ ... }
4. }< /span>

Other knowledge

1 CSS does not use absolute width, but with percent width

. p {width:80%}

2 fonts do not use PX units, instead of EM units

3 for different width of the device, to achieve the image of adaptive loading

Reference connection:

1.https://isux.tencent.com/responsive-web-design.html

2.http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html

3.http://www.runoob.com/bootstrap/bootstrap-v2-responsive-design.html

On the design of Responsive Web page