Talking about the problem of pc-side rem font settings, talking about pcrem font settings

Talking about the problem of pc-side rem font settings, talking about pcrem 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 a huge effect.

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

$ (Window ). resize (function () // The Event bound to the window {var whdef = 100/1920; // indicates the design of 1920, 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; // multiply by the width of the current window by the default ratio, the corresponding FONT-SIZE value of this width is obtained ('html'0000.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. 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; // represents the 750 design drawing, using the default value of 50PX var wH = window. innerHeight; // The height of the mobile phone window var wW = window. innerWidth; // The phone window width var rem = wW * whdef; // multiply by the current window width by the default ratio, the corresponding FONT-SIZE value of this width is obtained ('html'0000.css ('font-size', rem + "px ");})

The above discussion about the pc-side rem font setting is all the content shared by the editor. I hope to give you a reference and support for the help house.