1. 什么是uniapp
uniapp是一款跨平台的前端框架，可以用来开发微信小程序、支付宝小程序、H5页面等多个端的应用。它基于Vue.js框架，通过一些语法糖的封装，实现了一份代码，多端运行的效果。
uniapp提供了对各种端的适配能力，开发者可以通过简单的设置来实现多端的自适应布局。根据不同的设计需求，开发者可以选择不同的适配方式，比如rem、vw/vh等。
2. PC端如何自适应
2.1 VW/VH单位适配
在uniapp中，可以使用vw、vh作为CSS单位来实现自适应布局。这两个单位分别代表视口宽度和视口高度的百分之一。
以下是实现自适应布局的代码：
/* 根据设备视口调整 font-size */
const calcRem = () => {
const viewPortWidth = document.documentElement.clientWidth || window.innerWidth;
document.documentElement.style.fontSize = viewPortWidth / 10 + 'px';
};
window.addEventListener('resize', calcRem);
calcRem();
/* 使用vw、vh作为CSS单位进行布局 */
1
2
3
4
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 70vw;
height: 70vh;
margin: auto;
}
.box {
display: flex;
justify-content: center;
align-items: center;
width: 25vw;
height: 25vh;
font-size: 3rem;
background-color: #ccc;
}
上面的代码，我们先根据设备视口的宽度调整了页面的字体大小，然后使用vw、vh作为CSS单位，进行了自适应布局。
vw、vh为常用的CSS单位，但是在部分移动端浏览器上支持不佳，所以还有其他的自适应布局方案。
2.2 rem单位适配
rem是相对于根元素html的字体大小来计算的单位。可以通过设置根元素的字体大小，来实现整个页面的自适应布局。
以下是实现自适应布局的代码：
/* 根据屏幕宽度计算rem的大小 */
function setHtmlFontSize() {
var html = document.documentElement;
var windowWidth = html.clientWidth;
html.style.fontSize = windowWidth / 20 + 'px';
}
setHtmlFontSize();
/* 使用rem进行布局 */
1
2
3
4
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 12rem;
height: 12rem;
margin: auto;
}
.box {
display: flex;
justify-content: center;
align-items: center;
width: 3rem;
height: 3rem;
font-size: 3rem;
background-color: #ccc;
}
上面的代码，我们首先根据设备的屏幕宽度来计算出了根元素的字体大小，然后使用rem作为CSS单位，来实现自适应布局。
需要注意的是，对于PC端的自适应布局，我们可以结合使用两种方案，先使用vw/vh布局页面框架，然后再使用rem布局内容。
3. 判断设备类型
通过一些简单的方法，我们可以判断出当前设备是PC端还是移动端，从而根据不同设备的特点，来进行自适应布局。
/**
* 判断设备是否为移动端
*/
function isMobile() {
return 'ontouchstart' in document.documentElement;
}
if (isMobile()) {
// 移动端布局
} else {
// PC端布局
}
通过isMobile()函数，我们可以判断出当前设备是否为移动端。如果是移动端，我们就可以使用vw、vh作为CSS单位，进行自适应布局；如果是PC端，我们可以使用rem作为CSS单位，来实现自适应布局。
4. 总结
在使用uniapp开发跨平台应用时，实现自适应布局是非常重要的。通过使用不同的CSS单位，我们可以实现以一份代码，多端适配的效果。
针对PC端的自适应布局，我们可以结合使用vw/vh、rem两种方案，先使用vw/vh布局页面框架，然后再使用rem布局内容。另外，判断设备类型、调整字体大小等操作也是非常关键的。