Uniapp adaptation problem

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 :