How to implement adaptive PC side in uniapp

With the popularization of the Internet, the demand for PC and mobile terminals is also gradually increasing. Many companies and individuals have carried out multi-terminal adaptation transformations for their websites to better meet user needs. Among multi-terminal adaptation technologies, uniapp is undoubtedly one of the more popular solutions currently. So, how to implement adaptive PC side in uniapp?

1. Why do we need adaptive PC version?

In the past development, the more common approach was to develop the PC side and the mobile side separately. Nowadays, with more and more interactions between PC and mobile terminals, many people have begun to realize that it is time-consuming and labor-intensive to develop a PC-side and mobile-side website every time. Therefore, adaptive PC has become an indispensable technical means.

2. How does uniapp implement adaptive PC?

1. Use flexible.js

flexible.js is a solution specifically designed for mobile development, which can automatically adjust the layout of the page according to different screen sizes. It can also be used in uniapp for adaptive PC development.

Usage:

1) First create a js folder in the static directory, and then download the flexible.js file.

2) Introduce flexible.js into index.html.

3) In the App.vue file, use the mounted hook function to set the size of the window and adapt it to the screen by introducing flexible.js.

2. Use css media queries

Css media queries are essentially adjusting styles according to different screen sizes so that they can be perfectly rendered at different resolutions. Therefore, in the development of uniapp, different style sheets can be set through media queries to achieve adaptability to devices of different sizes.

For example, for larger size devices, you can use the following code:

@media only screen and (min-width: 992px) {

/ in This adds style for large size devices /

}

For smaller size devices you can use the following code:

@media only screen and (max- width: 991px) {

/ Add the style of small-sized devices here/

}

3. Use the API provided by uniapp for adaptation

For PC-side adaptation, uniapp also provides corresponding APIs. For example, you can obtain the screen width and height of the device through uni.getSystemInfoSync(), and then adjust the style according to the aspect ratio.

For example, the following code will judge the width of the device to select a different style sheet:

let systemInfo = uni.getSystemInfoSync();

if (systemInfo. windowWidth >= 992) {

/ Add styles for large size devices here/

} else {

/ Here Add styles for small-sized devices/

}

In short, for PC-side adaptation, we can achieve it through the above three methods. Of course, the choice of technology should also be different for different needs. The key is to use it flexibly to make our development more efficient and exciting.

The above is the detailed content of How to implement adaptive PC side in uniapp. For more information, please follow other related articles on the PHP Chinese website!