About the pc-side rem font settings ., Pc-side rem font settings

About the pc-side rem font settings ., Pc-side rem font settings

1. the content displayed on the screen is in the upper-right corner (content box). The content is definitely located in the content box. in this way, the content is always in the middle of the screen of different sizes and looks normal.

2. long, wide, LEFT, TOP, RIGHT, and BOTTOM all adopt REM, And the FONT-SIZE of HTML is set to 100PX. 1. It is convenient to calculate, and 2. If it is set to 10PX, google will be incompatible. at this time, the FONT-SIZE of the BODY is set to the normal value, 12PX. otherwise, other DOM will inherit the FONT-SIZE of PX of HTML, resulting in huge effect.

3. When the browser window changes, the content SIZE and relative position will also change accordingly. This is achieved by modifying the FONT-SIZE value of HTML in JS:

$ (Window). resize (function () // bind to this event of the window
{
Var whdef = 100/1920; // indicates the design of 1920, which uses 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; // multiply the default ratio value by the current window width to obtain the corresponding FONT-SIZE value under this width.
(('Html').css ('font-size', rem + "px ");
});

If you adjust the window SIZE, you will find that the FONT-SIZE value of HTML changes, and the DOM set with REM is also changing, because REM is calculated based on the FONT-SIZE value of HTML.

4. If you are on a mobile phone or tablet, you must use REM. Because the browser size is not adjusted on the mobile phone, you can set it once when loading the page.

$ (Function (){

Var whdef = 50/750; // indicates the design of 750, using the default value of 50PX
Var wH = window. innerHeight; // The height of the cell phone window
Var wW = window. innerWidth; // The width of the mobile phone window
Var rem = wW * whdef; // multiply the default ratio value by the current window width to obtain the corresponding FONT-SIZE value under this width.
(('Html').css ('font-size', rem + "px ");

})