Basic knowledge of mobile web development_html/css_WEB-ITnose

First of all, after the development code is compiled, we need a tool to see the effect. For PC development, we have firefox, chrome, etc., so what should we use for debugging the mobile web? There are many kinds of mobile phone devices, different brands and different screen sizes. Of course, we can't buy all the mobile devices, and then place them on the table from left to right during development. After writing a piece of code, refresh them from left to right, haha. If someone really does this, I won't say anything. I just beg the wealthy people to be friends~ Hehe.

After all the nonsense, let’s get back to the main point: First of all, we need a debugging tool for mobile web development.

1. Google emulation: Google’s mobile emulator is simply understood as a PC that simulates the screen size and browser features of a mobile phone.

Opening method: Open the chrome browser, then F12 key to open the developer tools, click the icon of the small phone, as shown below

The opening effect and the functions of each part:

First of all, we can select the device that needs to be simulated in the device. This is very important. Decide What kind of mobile phones can the page we write be adapted to?

Open the device drop-down menu to see the devices that can be simulated: You can see that mainstream mobile phones basically have O(∩_∩)O

With emulation, we can do development very conveniently.

2.veiwport: What is veiwport?

Official explanation: The mobile browser places the page in a virtual "window" (viewport) , usually this virtual "window" (viewport) is wider than the screen, so that each web page does not need to be squeezed into a small window (this will destroy the layout of web pages that are not optimized for mobile browsers). The user can pan and Zoom to see different parts of the web page. The mobile version of Safari browser recently introduced the viewport meta tag, which allows web developers to control the size and zoom of the viewport. Other mobile browsers also basically support it.

is simply understood as the visual area of ​​the mobile terminal.

About veiwport settings:

Common examples: 81bc5a98c1f3ee6c3d12fea1c2deb6b0

Chinese explanation of the above example The width is equal to the width of the output device, and the height is equal to the height of the output device. The user is not allowed to zoom. The initial zoom ratio is 1.0 (that is, 1:1 size), the minimum zoom is 1.0, and the maximum zoom is 1.0. In a word, the user is not allowed to zoom. .

width [pixel_value | device-width] width directly sets the specific value. Most Android phones do not support it, but IOS supports it.
user-scalable Whether to allow scaling (no||yes)
initial-scale initial scale
minimum-scale minimum scale allowed for scaling
maximum-scale maximum scale allowed for scaling
target-densitydpi
-- dpi_value 70?400 //pixels per inch Number of points
-- device-dpi device default pixel density
-- high-dpi high pixel density
-- medium-dpi medium pixel density
-- low-dpi low pixel density
-- The webkit kernel is no longer prepared to support

3 media queries: Media Queries

For details on the usage of media queries, please refer to: http:/ /www.w3cplus.com/content/css3-media-queries

The main function is to adapt to the size of different devices.

For example:

@media all and (min-width: 400px)

Media type all media, screen width 400px or above execute certain style

@media all and ( max-width: 399px)

Media type All media, execute certain style on screen width below 399px

@media screen and (min-width:600px) and (max-width:900px )

Media type screen, a certain style executed when the screen size is greater than 600 and less than 900px

Use when referencing the link tag in actual work:

<link rel="stylesheet" media="all and (max-width:600px)" href="small.css" type="text/css" /><link rel="stylesheet" media="all and (min-width:900px)" href="big.css" type="text/css"  /><link rel="stylesheet" media="all and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />