极客观点
项目管理
HarmonyOS
1，设计稿的宽度为1920，在网上找了计算方式，总觉的不太对，大神请帮忙看下有没有问题。
2，项目是pc端的，要适配移动端。我这个写出来后，移动端就变的特别小。
而且pc端在缩放的时候都会挤到一起。
3，在pc端和移动端需要判断吗？在网上找了好的都是移动端显示好小的，大神们请帮帮我吧
4，计算方式是，设计高100px,写1rem
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$Title$</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style lang="less">
.centre{
//border: 1px solid red;
/* width: 200px;
height: 125px;*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.header {
width: 10.66rem;
height: .5rem;
font-size: .16rem;
line-height: .5rem;
border: 0.01rem solid #9b9b9b;
box-sizing: border-box;
.color {
width: 0.05rem;
height: .5rem;
float: left;
display: inline-block;
background: #00CA89;
}
.topic {
color: #303133;
float: left;
margin-left: .2rem;
}
.time {
color: #FF9011;
float: right;
margin-right: .2rem;
}
.Total {
color: #9E9E9E;
float: right;
margin-right: .2rem;
}
}
.section {
width: 10.66rem;
height: 5.6rem;
border: 0.01rem solid #9b9b9b;
box-sizing: border-box;
}
</style>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<script>
~function () {
let computed = function () {
//=>DES-W:设计稿宽度 DEV-W:设备的宽度
//设计稿宽度：1920
let desW = 1920;
let devW = document.documentElement.clientWidth;
document.documentElement.style.fontSize = devW / desW * 100 + 'px';
};
computed();
window.addEventListener('resize', computed, false);
}();
</script>
<body>
<div id='app'>
<div class="centre">
<header class="header">
<span class="color"></span>
<div class="topic">
<slot name="topic">Unit 1 My name’s Gina.综合与测试</slot>
</div>
<div class="time">
<span>
<slot name="time">22</slot>
</span>
<span class="Total">
<slot name="Total" class>/40</slot>
</span>
</div>
</header>
<section class="section">
</section>
</div>
</div>
<script src=""></script>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: "hhhhhhhh"
}
})
</script>
</body>
</html>
html5
不知道你的rem是怎么换算出来的哈...但是如果你觉得比例是对的只是觉得小...可以把下面那个100改大点...
document.documentElement.style.fontSize = devW / desW * 100 + 'px';