当前位置:网站首页>Uniapp adaptation problem
Uniapp adaptation problem
2022-07-07 03:05:00 【I must win this time】
Link to the original text :https://blog.csdn.net/weixin_52312684/article/details/125218453
One . Calculation formula
Design draft 1px / Base width of design draft = Frame style 1rpx / 750rpx
In other words , The page element width is in uni-app The width calculation formula in :
750 * The width of the element in the design draft / Base width of design draft
Illustrate with examples :
- If the width of the design draft is 750px, Elements A The width on the design draft is 100px, So the element A stay uni-app The width inside should be set to :750 *
100 / 750, The result is :100rpx.
- If the width of the design draft is 640px, Elements A The width on the design draft is 100px, So the element A stay uni-app The width inside should be set to :750 *
100 / 640, The result is :117rpx.
- If the width of the design draft is 375px, Elements B The width on the design draft is 200px, So the element B stay uni-app The width inside should be set to :750 *
200 / 375, The result is :400rpx.
Two . Width 750px Design draft
With the above conversion formula
750 * The width of the element in the design draft / Base width of design draft =100rpx
The blueprint is 100px Convert into 100rpx
Conclusion :
1px=1rpx
verification :
<template>
<view class="box">
<view class="box1">
</view>
</view>
</template>
<script>
export default {
}
</script>
<style>
.box{
width: 750rpx;
height: 1000rpx;
background-color: pink;
}
.box1{
width: 100rpx;
height: 100rpx;
background-color: blue;
}
</style>
Under the big screen :
The size of the box is determined by 100x100 become 50x50
explain :
Under the big screen 1px=2rpx
Come to the conclusion :
rpx It can adapt to the size of the screen Thus, the size of conceptual elements .
The actual development can be carried out directly in the mobile phone mode
Two . Width 640px Design draft
First convert :
750x100/640=117rpx
Design draft :100:117
1:1.17
in other words 1px be equal to 1.17rpx
100rpx/1.17=85.47
Usually, we usually use 750px Develop as a standard .
3、 ... and . Expand
How does the mobile end adapt ?
1. percentage 2.rem
Here we focus on rem
Suppose the design draft is 980px How to adapt
rem Is a unit, relative to the size of the current screen .
Usually use flexbox.js This plug-in divides the screen into 10 Share .
980/10=98px
That is to say 1rem be equal to 98px.
Code :
<template>
<div class="box">
</div>
</template>
<script>
export default {
name: '',
methods: {
}
}
</script>
<style scoped>
.box{
width: 1rem;
height: 1rem;
background-color: pink;
}
</style>
Four . reflection
Design draft 999px, stay 789px Do adaptation conversion into rem
The design draft is 999px.
On the mobile phone 789px Fit .
Design draft 1rem by 99.9px.
Mobile phone 1rem by 78.9px.
Come to the conclusion :
Design draft 1px be equal to :78.9px/99.9px=0.789
You can follow the 1px Equal to on the mobile phone 0.789px It's time to draw
Or use another algorithm :
边栏推荐
- 记一次JAP查询导致OOM的问题分析
- 新标杆!智慧化社会治理
- Classify the features of pictures with full connection +softmax
- Cloud Mail .NET Edition
- Andrews - multimedia programming
- [socket] ① overview of socket technology
- [software test] the most complete interview questions and answers. I'm familiar with the full text. If I don't win the offer, I'll lose
- c语言(字符串)如何把字符串中某个指定的字符删除?
- 惯导标定国内外研究现状小结(删减版)
- Summary of research status of inertial navigation calibration at home and abroad (abridged version)
猜你喜欢
从零安装Redis
QT Bluetooth: qbluetooth DeviceInfo
MMDetection3D加载毫米波雷达数据
How-PIL-to-Tensor
Software testing -- common assertions of JMeter interface testing
密码学系列之:在线证书状态协议OCSP详解
Construction of knowledge map of mall commodities
Classify the features of pictures with full connection +softmax
Redis Getting started tutoriel complet: positionnement et optimisation des problèmes
KYSL 海康摄像头 8247 h9 isapi测试
随机推荐
Left path cloud recursion + dynamic planning
左程云 递归+动态规划
c语言(字符串)如何把字符串中某个指定的字符删除?
PSINS中19维组合导航模块sinsgps详解(时间同步部分)
Change your posture to do operation and maintenance! GOPs 2022 Shenzhen station highlights first!
你知道电子招标最突出的5大好处有哪些吗?
牛客编程题--必刷101之双指针篇
从控制理论的角度谈数据分析
Mmdetection3d loads millimeter wave radar data
导数、偏导数、方向导数
uniapp适配问题
Static proxy of proxy mode
Redis入门完整教程:客户端管理
数论 --- 快速幂、快速幂求逆元
Redis入门完整教程:客户端案例分析
Redis入门完整教程:客户端常见异常
Es6中Promise的使用
How-PIL-to-Tensor
Matlb| economic scheduling with energy storage, opportunity constraints and robust optimization
Error: could not find a version that satisfies the requirement xxxxx (from versions: none) solutions