Introduction to mobile front-end development (i)

　　Responsive layout definition: A responsive layout that integrates elastic grid layouts, elastic images, media, and media queries.

　　First, media query: Support different windows

Basic syntax:

@media screen and     (max-width:960px) {    body{         background-color:red;         } }

Use the @inport directive to introduce additional style sheets conditionally in the current style sheet. The following example:

@inport URL ("phone.css") screen and (max-width:768px);

However, it is important to note that using the @inport method increases the HTTP request

The capabilities that media queries can detect are:

Width: viewport widths

Height: Viewport Height

Device-width: Device Screen width

Device-height: Device Screen height

Orientation: test equipment in landscape or portrait orientation

Aspect-ratio: Based on the viewport aspect ratio, a 16:9-display screen can be defined like this, ASPECT-RATIO:16/9

Device-aspect-ratio: Based on device screen aspect ratio

Color: Number of colors, min-color:16, detects if the device has a 16-bit color

Color-index: Number of colors in the Device Color Index table, must be a nonnegative integer

Monochrome: Detects the number of bits per pixel used in a monochrome frame buffer and must be non-negative integers

Resolution: Detecting screen or printer resolution

Scan: The scanning mode of the TV, the value can be, progresssive (progressive scan), interlace (interlaced scanning)

Grid: Detects whether the output device is a network device or a bitmap device

Note: The above features, in addition to scan and grid, can create query scopes with min and Max.

　Second, the use of flow-style layout

Target element width/context element width = percent width

　　In a responsive layout, to discard the use of PX, use EM.

IE cannot adjust the size of the font using PX as the unit.

Features of EM:

1, the value of EM is not fixed.

2, EM inherits the font size of the parent element.

REM, also relative unit:

is relative to the root element of the HTML, not the parent element.

　　Elastic Image:

You can add attributes to the picture, which is to set a threshold for the picture:

img{max-width:100%;} or img{max-width:220px;}

Max-width Properties:

You can add an max-width attribute to an element to limit the maximum width of the element.

The viewport feature is a mobile-specific meta value that defines the various behaviors of the viewport.

Layout viewport: Layouts viewport

A viewport meta tag is defined in iOS Safari to create a virtual layout viewport with a resolution close to the PC.

Visual Viewport: Visual Viewports

The visual area of the physical screen of a handheld device, the visual viewport.

Ideal viewport: Perfect viewport

Perfect viewport. You don't have to zoom in or drag a page to get a good view of the web.

Viewport Features:

Width:

Widths are used to define the width of the layout viewport, and if you do not specify this property (or remove the viewport meta tag), the layout viewport width is the vendor default.

<name= "Viewport"  content= "width=device-width"/> 

The layout viewport will become ideal viewport because the layout viewport width is consistent with the device visual viewport width.

Height:

Similar to width, but actually not used, because there are not too many use case.

Initial-scale:

If you want the page to zoom in or out by default at a certain scale and then present it to the user, you can do so by defining Initial-scale.

Initial-scale is used to specify the initial scale of the page, assuming that you define:

<name= "Viewport"  content= "initial-scale=2"/>

Then the user will see twice times the size of the page content.

<name= "Viewport"  content= "initial-scale=1"/> 

As above Initial-scale can also realize ideal viewport.

Maximum-scale:

On the mobile side, you may consider the user browsing inconvenience, and then give the user the right to enlarge the page, but also want to be within a certain range of amplification, then you can use Maximum-scale to constrain.

The Maximum-scale is used to specify the scale at which the user can enlarge.

<name= "Viewport"  content= "Initial-scale=1,maximum-scale=5" />

Assuming that the default zoom value of the page Initial-scale is 1, the user will eventually be able to enlarge the page to 5 times times the initial page size.

Minimum-scale:

A description similar to Maximum-scale, but Minimum-scale is used to specify the page scaling. Typically, in order to have a better experience, the value of this property is not defined to be smaller than 1 because the page becomes difficult to read.

user-scalable:

If you don't want the page to be zoomed in or out, define user-scalable to constrain whether the user can scale the page by gesture.

The default value of this property is yes, which can be scaled (if the default value is used, the property may not be defined), and of course, if your app does not intend to have the user have the Zoom permission, you can set the value to No.

Here's how to use it:

<name= "Viewport"  content= "User-scalable=no"/>

Introduction to mobile front-end development (i)