Some hard skills in mobile Web Front end (ii) basic knowledge that must be mastered before you begin

Remember the beginning of contact with the mobile Web, the book and the online information are not many, look up very laborious, now better than before, but there will be some just contact mobile friends will ask me some of my initial problems, perhaps the book is not so heavy, or perhaps it is the knowledge written too scattered, That most people are not very good at noticing.

　　

Actually do mobile web front-end, most and the PC end of the Web front-end basically the same, just have some things to pay attention to, otherwise the trouble is not stint.

　　

First, viewport

If you have seen the mobile web code you should see something similar to this sentence <meta name= "viewport" content= "Width=device-width" >.

Among them, the interpretation of <meta> in the Web is "to provide meta-information about the page (meta-information), such as the search engine and update the frequency of the description and keywords," my personal understanding is to provide some of the page's property information, supply to the browser and server requests So that it returns the appropriate value. The viewprt is the key in the key-value of its meta-information, which means the virtual window . The content that follows is its value, which specifies the width and height of the virtual window . The "Width=device-width" in the above sentence is about the width of the virtual window and the width of the device. Popular Point says, viewport refers to the size of the browser on our PC, not the size of the computer display. (Because the mobile browser is full-screen, so the viewport is also indirectly equal to the size of the display, but this is only a ... How to say, "coincidence" bar, haha).

There is no stopping here, because the virtual pixel and the physical pixel concept are explained.

Previously we were 1 pixels on the PC, 2 pixels are still relatively standard (of course, the MAC launched the Retina screen that is later), until the iPhone4 launched a high-density display, everything has changed. IPhone4 physical like wide is 640, but the returned device width is 320, that is, the value of IPhone4 device-width is 320px.

However, note that the general mention of "but" is the rhythm of the accident-but when we do not set the viewport, the iphone default width is 980px, for example, we made a 320px wide page, do not set viewport, It's going to look like this in the IPhone4 Safari browser.

If we set width=device-width, or width=320, and then put the page in it, it will look like the following.

That is, if the width=device-width, if the page is more than 320px wide, it will become the following look.

Why do we use iPhone4 for example, that cell phone has been too angry, I last took to sell, people just give 300 yuan to receive = = ... The main thing is that these were originally caused by this cell phone, "Genesis" things are classic. Pull away, come back--is not that the page width set to 320 is all right, not, after all, the market equipment, what size, 320 is a part of the mobile phone, Android pixel than more complex--right, pixel ratio! If you should have seen this parameter with Chrome's simulation tool, it's actually the ratio between the physical pixel and the virtual pixel.

One might ask why it is so complicated, it should be that Apple is not so complicated for developers to think about it that it returns such a virtual pixel value. But when making a Web page, there will be such considerations-if you want to make a iPhone4 on a mobile phone, the picture is to do 320 of the appropriate, or do 640 suitable? The answer is to do as much as possible 640, because twice times the pixel than the cell phone, display 1 virtual pixels, to use 4 physical pixels (field grid, horizontal twice times, vertical twice times), even if the picture is compressed, the finer the picture, the better the display effect, on the contrary, if 320, also can only apply to 320, because have not considered , but do mobile web must be in different sizes of devices to display, to measure the largest and smallest size, this is to optimize the site of a content, this will be mentioned later.

　　

Second, the self-adaptation of the page

Now the PC-side with the response type is mainly foreign some websites, this, they always go ahead. On the mobile side, the response is generally used for the conversion between the horizontal screen and vertical screen, in order to improve the user experience to use, that is, for the browser, the need for multiple demarcation points to judge, for the mobile side, only need a demarcation judgment.

The above-mentioned judgment, mainly refers to the media query, @media appear earlier, but the use of it seems not very extensive, these years only began to use more and more, and early mainly embedded in the style of the introduction of tags, such as:

<link rel= "stylesheet" media= "only screens and (max-width:320px)" href= "Style.css"/>

However, when the DOM is loaded, the imported CSS will be downloaded, but not used. And this will add HTTP requests, for such a precious request, this is a gluttony, of course, this is also an optimized content, detailed later. In short, now more and more used in CSS files, using chunks of the way to write, waiting for the user to trigger, specific @media how to use, outside the data a lot, to see it.

There is also a "percentage theory", it is also common, often people confused with this, I am no exception, in the end to adopt which is more suitable for the development of Mobile station.

The percentage theory is actually a bit like the bootstrap, which sets the size of the elements within the Web page in percent, so that the device can have a more "harmonious" display, but "indulgence" will eventually reveal the tail, size one but exaggerated a bit will look very awkward, so, According to the actual project oneself weigh this use degree, used well, can let the user feel not to respond to the gap, combine to do, still is very interesting.

Tri, px, EM and REM

There are many definitions of the size of the CSS, but there are only two commonly used, PX and Em,rem is CSS3 new, in fact, is also the essence of EM, but the root em = rem. There was a time when EM fire, and then went out, REM and fire, for what, this question from the difference between these units.

PX: Pixel, a point on the computer screen (referenced from w3school); EM: relative dimensions, relative to the dimensions of the previous level element, the value can be a floating-point number; Rem, as mentioned above, is relative to the root node's font size in multiples.

At first, the browser only changes the font size of the ability, EM is relative size, so the layout of the force, and later the browser ability, not just the font, can be changed globally, plus em according to the characteristics of the superior change, so that it is very difficult to control the changes, easy to appear to hold a full body, And I just want to scratch the awkward situation, so people began to favor the simple px. Fortunately, however, CSS3 launched REM, which is based on the root node to change the size of the characteristics, making people love him more and more.

Browser default font size is generally 16px, that is 1em, that is, 100%, in order to make developers more intuitive, you can set the global font size of 62.5%, that is, the global size of 16*62.5%=10px, so that, 12px=1.2rem, and PX can be converted to each other, Let's have a clearer idea of the font size value.

This is not only on the mobile side, the same application on the PC side, this time, change the global only need to change the size of the root.

One more word, how come 62.5%? 1em is divided into 16 parts, 1px = 0.0625em,10px = 0.625em = 62.5%, so, suppose I want to set a 18px-sized rem, that is 18/10 = 1.8rem.

Some hard skills in mobile Web Front end (ii) basic knowledge that must be mastered before you begin