148th Day: Js+rem dynamic calculation of the size of font-size, suitable for a variety of mobile devices

Demand:

Implemented in different mobile terminal devices, the UI design draft of the proportional adaptation.

Scheme:

Layout and typesetting are used REM to do units, and then different width of the screen, JS Dynamic Computing root node font-size.

Assuming that the design is 750px wide, writing CSS for easy calculation, the root node font-size assumed to be 100px, the device width is 7.5rem. Any PX value that is marked in the design can be converted to the REM value of px/100.

That is, the width of each device is set to 7.5 rem, and then the width of non-750px devices, you need to use JS to font-size dynamic calculation.

The conversion relationship is: font-size= device width/7.5 for the root node.

namely: Document.documentElement.style.fontSize = document.documentelement.clientwidth* (window.devicepixelratio| | 1)/7.5 + ' px ';

Note: You need to take into account the DPR, that is, a screen twice times the problem.

Http://mobile.51cto.com/web-484304.htm

Note:

Support for minimum font-size is different for each browser. The font-size value of JS dynamic calculation is too small, which results in the UI display on the ultra-low screen is larger than expected.

For example, the font-size calculation is 10px, but Chrome only supports 12px, and he follows 12px to render, which leads to a large UI. (100px in the above scenario is definitely not a problem)

Specific performance:

Minimum browser support font-size

PC Chrome 12px (can be supported to 6px by installing the Advanced Font settings plugin)

Android and iOS 1px (tested only for mainstream browsers, not fully tested)

Cordova (Android and iOS) 9px

Orientationchange Direction Change Event

(Function (doc, win) {

var docel = doc.documentelement,//root element html

The Judge window has no Orientationchange this method, has to assign the value to a variable, does not return the Resize method.

resizeevt = ' orientationchange ' in window? ' Orientationchange ': ' Resize ',

Recalc = function () {

var clientwidth = docel.clientwidth;

if (!clientwidth) return;

The fontsize size of document is set to the size of a certain proportion of the window, thus achieving a responsive effect.

DocEl.style.fontSize = (clientwidth/320) + ' px ';

};

Alert (Docel)

if (!doc.addeventlistener) return;

Win.addeventlistener (Resizeevt, Recalc, false); The//addeventlistener event method accepts three parameters: the first is the event name, such as Click event OnClick, the second is the function to execute, The third is a Boolean value

Doc.addeventlistener (' domcontentloaded ', Recalc, FALSE)//Bind browser zoom and load time

}) (document, window);

Alert (document.documentelement.clientwidth/320)

148th Day: Js+rem dynamic calculation of the size of font-size, suitable for a variety of mobile devices