Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "what are the methods of adapting vue mobile html5 pages according to screen adaptation". The editor shows you the operation process through an actual case, and the operation method is simple, fast and practical. I hope this article "what are the methods of vue mobile html5 pages adapting to the screen" can help you solve the problem.

Method 1: introduce the scalable layout scheme of Taobao open source

Introduce Taobao open source scalable layout scheme:

Taobao is actually a bit like viewport, but it mainly sets the value of scale according to the device pixel ratio, keeps the viewport device-width always equal to the device physical pixels, and dynamically calculates the root font size, specifically dividing the screen into 10 equal parts. This piece can also be implemented directly in js, which will be mentioned later

Specific introduction and use, move to github view, very detailed.

Method 2: the use of viewport

The use of viewport is mentioned in github. I feel that the introduction of viewport in this article is particularly detailed, including the introduction of attributes such as scale and whether to scale or not. although the content of the article looks like a lot of words, please read it patiently, it is all practical information to let you know viewport very well. If you are in a hurry, please continue to look at the summary picture.

With regard to viewport, this section directly quotes the content of the above article. I think it is also the most straightforward summary.

Method 3: use js+viewport to dynamically set manual adaptation rem

My editor is vscode, add plug-in cssrem automatic transfer

Method 4: dynamically set the root html font size according to the media query of css

This is the end of the content about "what are the methods of adapting vue mobile html5 pages according to the screen". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.