Elegant mobile development and client development

Elegant mobile development and client development

For mobile development, in order to achieve the page HD effect, the specifications of visual drafts often follow the following two points:

1) Select the screen width and height of a mobile phone as the benchmark (for example, 375x667 of the iPhone 6 ).

2) for HD screens, in order to achieve high-definition effects, the canvas size of the visual draft will be twice that of the benchmark (for iPhone 6: The original 375x667, it will change to 750x1334 ).

 

Question 1: why can I solve the problem of HD when the size of the canvas is × 2 for a cell phone with dpr = 2?

First, we need to know what dpr is?

• The device pixel ratio (dpr) defines the correspondence between the physical pixel and the independent pixel of the device. The value can be obtained according to the following formula:

Device pixel ratio = physical pixel/device independent pixel // on one side up, x direction or y direction

• A physical pixel is the smallest physical display unit on the display (mobile phone screen). Under the scheduling of the operating system, each device pixel has its own color value and brightness value.
• Device Independent pixel. This point represents a virtual pixel (such as css pixel) that can be used by the program and then converted from the relevant system to the physical pixel.

 All in all, different devices (different systems) have different dpr. After these devices get the pages written on the front end (that is, css pixel layout, dpr occupies different numbers of physical pixels. However, they are eventually displayed (identified by the naked eye) in the same size.

 Image theft:

So the first question: why can I solve the HD problem when the canvas size is × 2 for a dpr = 2 mobile phone? What is the relationship? Steal another image ~

This is very clear. For a dpr = 2 high-definition (retina) screen, one bitmap pixel corresponds to four physical pixels, because a single bitmap pixel cannot be further divided, therefore, only colors can be selected nearby, resulting in blurred images (pay attention to the preceding color values ).

In this case, we simply use 2 times the size of the image, for example, 200*300 images, and 400*600 images on the HD screen, however, the display size is still set to 200*300. In this case, a physical pixel still displays a bitmap pixel, Which is perfect.

 

 

Question 2: similar to the following layout, how can I adapt to all mobile screens with minimal labels? And save a certain aspect ratio without distortion.

1. la s by %

If you use % to deploy the block, you will soon feel very 'Forced. Because each block has a margin value, however, you can hardly calculate the percentage of margin, and you may need to use various media queries.

@media(max-width:320px){    div{margin-right: 1%;}}

You may need to fine-tune every screen, and when you need to modify the style in the future, you need to repeat every @ media. If you want to think about it, you will be afraid.

 

2. Use rem Layout

As we all know, rem is based on the font-size of the root element html. Let's look at the example ~

1 html{font-size: 16px;}2 body{3      font-size: 0.5rem;  /*16px * 0.5 = 8px;*/4 }

Based on the rem principle, we need to dynamically change the font-size (reference value) of the root node html based on the screen size of different mobile phones and dpr ).

Back to the question, how can we use rem to implement the layout? In addition, the process of setting rem is very pleasant and does not require any annoying computing?

The html font size is changed based on the current viewport size, which is generally dividedMedia query and js dynamic computing.

The former must be used for media query interval demarcation points for mainstream resolutions on the market. The disadvantage is that only the perfectly scaled size is set to the demarcation point, and the size between the demarcation points may be faulty.

Js dynamically calculates based on the screen size to make all sizes zoom perfectly. The disadvantage is that a small segment of js code needs to be inserted in the page header.

Based on these two advantages and disadvantages, in daily development, h5 operation pages often use js dynamic computing, while normal pages (shopping, webpages) use the media query method.

 

In development, we usually select a screen as the benchmark (for example, 375 of the iPhone 6). On this screen, the font-size benchmark is set to 20px.

First, a very clever method that greatly improves the development efficiency but the principle is very simple.

$ Rem_grid: 20! Default; // when rem (10) is used, 10px @ function rem ($ val) {$ rem: $ val/$ rem_grid is displayed on the 375 screen; // because rem is first multiplied by font-size to get px, so here we first divide the number transmitted by rem () by 20, and then multiply by the 20 of html, it is actually the parameter's original value @ if $ rem = 0 {@ return # {$ rem} ;}@ else {@ return $ rem/($ rem * 0 + 1) * 1rem; // supported units with or without px }}

Well, it's easy to compute. Next is media query, covering common models?

Principle: scale according to the width of the device (375 to the width of the baseline device. Let's just talk about the code.

@ Mixin query ($ limit) {@ media screen and (min-width: $ limit) {// media query & {@ content ;}}} @ mixin _ mod_cross ($ width, 375) {@ include query ($ width * 1px) {font-size: $ width/375*20 * 1px; // here is the key} @ include _ mod_cross (320,375); // iPhone5

After the above implementation, of course, you need to @ include _ mod_cross common models. After that, you can finally use rem () happily only under iPhone 6 () the layout does not need to adapt to every screen or perform multiple computations at a time, greatly improving the development efficiency.

 

After writing the method of media query, I wrote the code using js dynamic computing:

The principle is the same, except that you can use document.doc umentElement. clientWidth to obtain a more precise device width, and then set the font-size of html.

<Script type = "text/javascript">! Function () {var maxWidth = 750; document. write ('<style id = "o2HtmlFontSize"> </style>'); var o2_resize = function () {var cw, ch; if(document&document.doc umentElement) {cw=document.documentElement.clientWidth,ch=document.doc umentElement. clientHeight;} if (! Cw |! Ch) {if (window. localStorage ["o2-cw"] & window. localStorage ["o2-ch"]) {cw = parseInt (window. localStorage ["o2-cw"]), ch = parseInt (window. localStorage ["o2-ch"]);} else {chk_cw (); // timed check return; // error} var zoom = maxWidth & maxWidth <cw? MaxWidth/375: cw/375, zoomY = ch/603; // By ip6 weChat window. localStorage ["o2-cw"] = cw, window. localStorage ["o2-ch"] = ch; // zoom = Math. min (zoom, zoomY); // ensures the display ratio of ip6 wechat window. zoom = window. o2Zoom = zoom; document. getElementById ("o2HtmlFontSize "). innerHTML = 'html {font-size: '+ (zoom * 20) + 'px ;}. o2-zoom ,. zoom {zoom: '+ (zoom/2) + ';}. o2-scale {-webkit-transform: scale ('+ zoom/2 +'); transform: scale ('+ zoom/2 + ');}. sq_sns_pic_item ,. sq_sns_picmod_erea_img {-webkit-transform-origin: 0 0; transform-origin: 0 0;-webkit-transform: scale ('+ zoom/2 +'); transform: scale ('+ zoom/2 +');} ';}, siv, chk_cw = function () {if (siv) return; // siv = setInterval (function () {// check regularly for document&document.documentelement&document.documentelement.clientwidth&document.doc umentElement. clientHeight & (o2_resize (), clearInterval (siv), siv = undefined) ;}, 100) ;}; o2_resize (); // initialize the window immediately. addEventListener ("resize", o2_resize) ;}(); </script>

 

Application scenarios of rem:

Because the rem layout is relative to the width of the view, any elements (width, height, position, etc.) that need to be changed based on the screen size can be in rem units.

However, rem also has its disadvantages-not refined, which actually involves the processing of the browser rendering engine. Therefore, for places that require fine processing (such as icons implemented through CSS), you can use absolute units such as px, and then perform proportional scaling using the transform: scale () method.