移动端适配fontsize一直变,rem也会变但是px转成rem不会变
时间: 2023-10-01 13:00:38 浏览: 60
移动端适配fontsize的变化是为了适应不同屏幕大小的设备。由于移动设备的屏幕尺寸多样化,为了保证页面在不同设备上的显示效果一致,需要根据屏幕尺寸动态调整字体大小。
在移动端适配中,我们一般使用rem(root em)作为单位。rem是相对于根元素(即html元素)的字体大小来计算的单位。当根元素的字体大小发生变化时,通过rem单位设置的字体大小也会相应变化。
与此不同的是,使用px单位设置的字体大小转换成rem后,不会随着根元素的字体大小变化而发生变化。这是因为px单位是固定像素大小,不会随着屏幕尺寸变化而自动调整。因此,px单位转换成rem后的字体大小在不同屏幕上显示效果可能不一致。
为了解决这个问题,在移动端适配中,我们通常会使用媒体查询(media query)来根据不同屏幕尺寸设置不同的根元素字体大小,进而影响到通过rem单位设置的字体大小。
总结起来,移动端适配中,fontsize会一直变化是为了适应不同屏幕大小,rem也会变化是因为它是相对于根元素字体大小计算的单位,而px转换成rem不会变化是因为px单位是固定像素大小,不会随着屏幕尺寸变化而调整。
相关问题
移动端适配rem代码
移动端适配rem的代码可以通过以下方式实现:
```javascript
// 获取屏幕宽度
var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
// 设计稿基准宽度,假设为750px
var designWidth = 750;
// 设置基准字体大小
var baseFontSize = 100;
// 计算页面缩放比例
var scale = screenWidth / designWidth;
// 设置页面根节点字体大小
document.documentElement.style.fontSize = baseFontSize * scale + 'px';
```
在上述代码中,首先获取屏幕宽度,然后设定设计稿的基准宽度。接着计算页面缩放比例,最后根据缩放比例设置页面根节点的字体大小。
注意:以上代码是基于JavaScript实现的,需要在页面加载完成后执行。你可以将这段代码放在`<script>`标签中,或者在页面的`<head>`标签中引入一个外部的JavaScript文件来使用。同时,建议将上述代码放在一个自执行函数中,以免全局变量污染。
希望这个代码对你有帮助!如果有任何问题,请随时提问。
uniapp移动端rem适配
在uniapp中实现移动端rem适配,需要遵循以下步骤:
1. 在uniapp的main.js中引入flexible.js,这是一个用于计算rem值的库。在引入之前需要安装该库:
```
npm install lib-flexible --save
```
2. 在main.js中引入flexible.js,并执行初始化操作:
```
import 'lib-flexible/flexible.js'
```
3. 在CSS中使用rem单位,而不是px。例如:
```
div {
width: 6rem;
height: 3rem;
font-size: 1.5rem;
}
```
4. 在需要设置字体大小的地方,可以使用以下代码设置:
```
document.documentElement.style.fontSize = document.documentElement.clientWidth / 375 * 16 + 'px';
```
其中,375是设计稿的宽度,16是基准字体大小。
5. 如果需要设置特殊的字体大小,可以使用以下代码:
```
@media screen and (min-width: 375px) {
div {
font-size: 18px;
}
}
```
这段代码表示在宽度大于等于375px的屏幕上,div元素的字体大小为18px。
通过以上步骤,就可以实现uniapp移动端的rem适配。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)