Recently, I have been a headache due to adaptation. The design is based on 1920. After the Vue project is adapted with postcss, the web page is scaled down in IE and Firefox. The text is messed up when it is placed on chrome. The element check has been compared several times and the size is indeed zoomed. The same, for example, a certain font size is font-size:.792vw after postcss processing, but the text displayed by chrome is indeed larger than normal! ? ? ? .
After searching on Baidu for a long time, it seemed that only one person asked, but no one answered the question! ! !
The following are the methods that have been tried:
① Debug the font-size directly in the browser, and find that 14px and continue to reduce the visual display effect is the same
②The unit uppercase PX makes postcss ignore certain settings, but it can be done only for div and the converted unit can also be ignored for font-size, but the adjustment effect of div on Google is displayed normally, only font-size is visualized effect! unusual! ! !
③I found that the zoom of chrome was adjusted to 110%. Okay, I adjusted it back to 100%, but it didn't work. Then I tried it. Chrome zoomed 80%. Oh, the webpage is almost normal, but I can’t tell everyone who opens the webpage with chrome that you should adjust the zoom to 80% before viewing the webpage, right?
The following is the horrible comparison effect (1920 displayed on the 1280 screen, Firefox and Google under 1280), and wait to find a way to continue with the new
One, FireFox
two, chrome
solution: not found.
Check online information, say it is chrome browser If you want to understand the principle, please refer to this article (I didn’t understand (╯□╰ ),) https://www.cnblogs.com/beileixinqing/p/6377399.html
Final result: no way, only old Honestly added a set of media styles, handled with @media
Summary:
①postcss-px2rem (that is, postcss-pxtorem) can help us automatically convert the px unit to rem, and write px boldly according to the design draft.
②postcss-px-to-viewport is scaled according to the size of the viewport (the mobile terminal is easy to understand, for the PC terminal, it is based on the size of the browser window, not the size of your device screen!!!)
③Tossing for a long time, I found a strange phenomenon, Whether it is automatically converted to rem or vm with the above plug-in, only the font-size display is abnormal (too large) on Google. After using the plug-in, even if @media is added to control the font-size later, the console checks that the size value is normal, and the display is off. Big, oh~~