Adaptive PC-side web authoring using REM

Do a PC-side web page, the design is 1920x1080. To display normal on a common screen (proportional to correct) 1280x720 1366x768 1440x900 1920x1080

Several methods have been used

1. Content in a screen display, the use of (content box) up and down around the center of the method, the content is absolutely in this content box positioning. In this way, the content is always in the middle and looks more normal in different size screens.

2. Long, wide, left,top,right,bottom are used REM, and the HTML font-size set is 100PX one is calculated convenient, and second, if set to 10PX, Google will not be compatible. The body's font-size is set to normal, 12PX. Otherwise, the other DOM will inherit the HTML 100PX font-size, resulting in a huge effect.

3. When the browser window changes, the size of the content and relative position will also change, this relies on JS to modify the HTML Font-size value implementation. The following:

$ (window). Resize (function ()//In this event that is bound to the window
{
var whdef = 100/1920;//represents 1920 of the design, using the default value of 100PX
var WH = window.innerheight;//The height of the current window
var WW = window.innerwidth;//The width of the current window
var rem = WW * whdef;//the corresponding font-size value at that width by multiplying the default scale value by the current window width
$ (' HTML '). CSS (' font-size ', rem + "px");
});

The logic for calculating font-size is:

When the design figure is 1920, the value of the font-size that specifies HTML is 100. That is, when the browser window is adjusted to 1920PX, 1rem=100px, if you want to set a 16PX (1920 design) font, then the REM setting value is 0.16.

When the window is resized to a non-design width such as winwidth, the font-size value of the HTML is: (100/1920) *winwidth. That is, 1920 Font-size is 100px. Then Winwidth, proportionally.

Or you can do this: when the window is 1920 wide, font-size is 100PX, then winwidth when the window changes to 1920 (winwidth/1920). According to the proportional formula, the font-size of Winwidth is ( winwidth/1920) *100

winwidth/1920 = Font-size (PX)/100

100/1920 = Font-size (PX)/winwidth This formula is easy to understand

If you resize the window, you will find that the Font-size value of the HTML is changing, and the DOM settings using REM are also changing. Because REM is based on the font-size value of the HTML reference.

4. If it is on the phone, tablet, more use REM, because the phone generally does not adjust the size of the browser, so you can load the page, set one time

$ (function () {

var whdef = 50/750;//represents 750 of the design, using the default value of 50PX
var WH = height of window.innerheight;//Phone window
var WW = window.innerwidth;//The width of the phone window
var rem = WW * whdef;//the corresponding font-size value at that width by multiplying the default scale value by the current window width
$ (' HTML '). CSS (' font-size ', rem + "px");

})

5. The use of REM is an effective method, plus bootstrap swiper These tools, can be more convenient to make some simple effect

Adaptive PC-side web authoring using REM