Consulting Hotline: 0592-5774223
Victoria WeChat
Victoria Mobile

In-depth analysis of web production units

2018-09-15 14:03:29

Web page production unit in-depth analysis:

1, px: absolute unit, the page is displayed in exact pixels

2. em: Relative unit. The reference point is the size of the font of the parent node. If the font-size is defined by itself (the default font of the browser is 16px), 1em is not a fixed value in the entire page.

em refers to the font height browser default 1em = 16px, so 0.75em = 12px; we often see the font-size written by the root element on the page: 62.5%; so em becomes 16px * 62.5 = 10em; this is The font size displayed on the page is 10px; so 12px = 1.2em, 10px = 1em, which means that you just need to divide your original px value by 10, and then replace it with em as the unit.
The characteristic of em is a relative value. It will change according to the size of the parent element. However, it is a headache to calculate the size of multiple elements if it is nested. In this case, the difference between rem and rem is that It is relative to the root element, so it is not affected by its parent

Conclusion: The reason why the front-end industry will generally use rem or em as the mobile terminal is because the root element can be controlled by js (or @media) to achieve the effect of adapting the font size of various resolutions.

3, rem: relative unit, can be understood as "root em", relative to the font size of the root node html to calculate, CSS3 new attributes, chrome / firefox / IE9 + support. // is by far the most used and most popular

Rem's mobile application can refer to Taobao's page (The font-size of html is obtained through dynamic calculation)

Option 1: Simple and commonly used version

Calculation of page base 750px; html font-size value:

 (doc,win){ var htmlFont= function (){ var docEl=doc.documentElement,l=docEl.clientWidth,f;f=l/7.5;l>750?"px""px"};htmlFont();win.addEventListener("resize",htmlFont,false)})(document,window); ( function (doc, win) { var htmlFont = function () { var docEl = doc.documentElement, l = docEl.clientWidth, f; f = l / 7.5; l> 750? = 100 + "px ": = f +" px "}; htmlFont (); win.addEventListener (" resize ", htmlFont, false)}) (document, window); 

Note: This section of native JS can be placed in the head tag of HTML (need to set the meta zoom ratio 1: 1)

----------Dividing line----------

Option 2: Advanced Rem-High Definition Solution

Just like the above, you can put this native JS in the head tag of HTML (Note: Do not set the viewport manually, this solution will automatically help you set it, by modifying the viewport property to enlarge and reduce the initial-scale)

 (e){ function t(a){ if (i[a]) return i[a].exports; var n=i[a]={exports:{},id:a,loaded:!1}; return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports} var i={}; return tm=e,tc=i,tp="",t(0)}([ function (e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}); var i=window;t["default"]=i.flex= function (e,t){ var a=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=o.match(/U3\/((\d+|\.){5,})/i),c=l&&parseInt(l[1].split(".").join(""),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1); var u=1/s,m=r.querySelector('meta[name="viewport"]');m||(m=r.createElement("meta"),m.setAttribute("name","viewport"),r.head.appendChild(m)),m.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+u+",maximum-scale="+u+",minimum-scale="+u),*s*n+"px"},e.exports=t["default"]}]); flex(100, 1); ! function (e) { function t (a) { if (i [a]) return i [a] .exports; var n = i [a] = {exports: {}, id: a, loaded:! 1} ; return e [a] .call (n.exports, n, n.exports, t), n.loaded =! 0, n.exports} var i = (}; return tm = e, tc = i, tp = "", t (0)} ([ function (e, t) {"use strict"; Object.defineProperty (t, "__ esModule", {value:! 0}); var i = window; t ["default" ] = i.flex = function (e, t) { var a = e || 100, n = t || 1, r = i.document, o = navigator.userAgent, d = o.match (/ Android [\ S \ s] + AppleWebkit \ / (\ d {3}) / i), l = o.match (/ U3 \ / ((\ d + | \.) {5,}) / i), c = l && parseInt ( l [1] .split ("."). join (""), 10)> = 80, p = navigator.appVersion.match (/ (iphone | ipad | ipod) / gi), s = i.devicePixelRatio | | 1; p || d && d [1]> 534 || c || (s = 1); var u = 1 / s, m = r.querySelector ('meta [name = "viewport"]'); m | | (m = r.createElement ("meta"), m.setAttribute ("name", "viewport"), r.head.appendChild (m)), m.setAttribute ("content", "width = device-width , user-scalable = no, initial-scale = "+ u +", maximum-scale = "+ u +", minimum-scale = "+ u), = a / 2 * s * n +" px "}, e.exports = t [" default "]}]); flex (100, 1); 

Code principle:

This is the HD solution layout code of the Ali team. The so-called high definition solution is based on the DPR of the device screen (device pixel ratio, also known as DPPX, for example, when dpr = 2, it means that 1 CSS pixel is composed of 4 physical pixels). Dynamic setting of html Font-size, and adjust the zoom value of the page according to the device DPR to achieve high-definition effects.

Code advantage:

  • Simple reference, simple layout
  • According to the DPR of the device screen, the most suitable HD scaling is automatically set.
  • The consistency of the visual experience under different devices is guaranteed. (The old scheme is that the larger the screen, the larger the element; this scheme is that the larger the screen, the more you look at it)
  • Effectively solve the real 1px problem on the mobile terminal (1px here is the physical pixel on the device screen)

to sum up:
1) The two schemes default 1rem = 100px, so when you layout, you can write various sizes according to the renderings given by the designer.
2) rem is not used everywhere, rem is only suitable for fixed size!
3) For example, if you measure a button element on the effect map with a length of 86px and a width of 27px, you can write the style directly:

.div 1 { width :. 85 rem; height :. 27 rem;}

---------Dividing line----------

Regarding the second method, the root font-size of the page should be modified; the proportion of the viewport leads to a simple and rough page adaptation , which is to output the design draft in accordance with the normal drawing method of the PC and then directly modify the zoom proportion of the viewport to achieve the desired Result; the zoom code is as follows: mate viewport tag, appended with JS

 head=document.getElementsByTagName('head')[0],scalevalue=screen.width/750,metaTag=document.createElement('meta');metaTag.setAttribute('name','viewport');metaTag.setAttribute('content','width='+scalevalue+',initial-scale='+scalevalue+',maximum-scale='+scalevalue+',user-scalable=no');head.appendChild(metaTag); var head = document.getElementsByTagName ('head') [0], scalevalue = screen.width / 750, metaTag = document.createElement ('meta'); metaTag.setAttribute ('name', 'viewport'); metaTag.setAttribute ('content', 'width =' + scalevalue + ', initial-scale =' + scalevalue + ', maximum-scale =' + scalevalue + ', user-scalable = no'); head.appendChild (metaTag); 

tips: Adaptation similar to the above can also be achieved by using the scale value of the css3 transform, but you need to do some processing at the transform-origin of the element's base point (transform-origin). The following uses vw adaptation to control the page size. Useful in the method, the principle is very simple;

4, vw, vh, vmin, vmax are mainly used for page viewport size layout, compared to rem; v * is more convenient and simple on the page layout

vw: viewpoint width, window width, 1vw is equal to 1% of the window width.
vh: viewpoint height, window height, 1vh is equal to 1% of window height.
vmin: the smaller of vw and vh.
vmax: the larger of vw and vh.

The vw logic is very clear, "1vw = 1 / 100th viewport width", and the element width is set as a percentage of the viewport width.

VW was supported too late as the root cause of its unpopularity. At the time, mobile web app / page development requirements were already very strong. Flexible layout was a good way to display compatible mobile terminal interfaces. The opportunity for rem came here. , It becomes an excellent solution to achieve the effect of flexible layout.

In fact, depending on the current situation, the most unfavorable for vw is Android Browser. Users under ndroid Browser 4.4 are not compatible. After the new version x5 is updated, the vw vh vmin vmax of WeChat for Android has no compatibility issues, so with time Over time, I believe vw will be popular in the future.

vw, vh, vmin, vmax: IE9 + partial support, chrome / firefox / safari / opera support, ios safari 8+ support, android browser4.4 + support, chrome for android39 support

The page is automatically adapted based on the browser window size. If the page feels too large, you can add the following JS to control the maximum size of the page by scaling

< script type="text/javascript">
         var htmlScale = function(){
             oBdoy = doc.getElementsByTagName('html')[0];
             var domWidht = doc.documentElement.clientWidth;
             var myScale = 750/domWidht;
        = 'scale('+myScale+')';
        = '50% '+0+'%';
script >

5. Other units include:
in: inch
cm: cm
mm: mm
pt: point, about 1/72 inch

pc: pica, about 6pt, 1/6 inch

ex: take the height of the font of the current effect x, calculate 0.5em if the height of the x cannot be determined (not supported in IE11 and below, firefox / chrome / safari / opera / ios safari / android browser4.4 + etc. (Both attributes need to be prefixed)

ch: Based on the "0" character in the font used by the node, 0.5em when not found (ie10 +, chrome31 +, safair7.1 +, opera26 +, ios safari 7.1+, android browser 4.4+ support)

In practical applications: it is recommended to use a fixed fixed width, font size available rem, px; others can be combined with vw%

share it:
@ 2009-2019 Xiamen Weipin Network Technology Co., Ltd. All rights reserved. Xiamen Website Construction Fujian ICP No. 14000305


Website building QQ consultation Website Construction WeChat Consulting
15880204330 导航到维品 Long press to copy WeChat: 15880204330 15880204330 Navigate to Victoria