设置rem基准值

html {
  font-size: 1.02865px;
}

@media screen and (max-width: 767px) {
  html {
    font-size: 0.833333px;
  }
}
// 设置rem
const handleResize = () => {
  console.log("重置rem");
  const hw = document.documentElement.clientWidth || document.body.clientWidth;
  let htmlDom = document.getElementsByTagName("html")[0];
  // 手机移动端
  if (hw < 768) htmlDom.style.fontSize = hw / 450 + "px";
  else if (hw < 1700) htmlDom.style.fontSize = hw / 1000 + "px";
  else htmlDom.style.fontSize = hw / 1850 + "px"; // 1rem=1px
};
handleResize();
window.onresize = handleResize;
### 如何在 UniApp 中配置和使用 REM 进行响应式布局 #### 配置 REM 基准值 为了使 `REM` 单位能够根据屏幕宽度动态调整大小,在项目的入口文件(通常是 `main.js` 或者 `App.vue`)中引入并初始化 `lib-flexible` 库是一个常见的做法[^1]。 ```javascript // main.js or App.vue import 'lib-flexible/flexible' ``` 此库会自动计算根元素字体大小,从而让 `REM` 能够依据不同设备的分辨率做出相应变化。 #### 设置全局样式变量 为了让组件内的样式更加易于维护以及统一管理,可以在项目中的公共 SCSS 文件里定义一些常用的尺寸单位转换关系: ```scss /* common.scss */ $baseFontSize: 75px !default; html { font-size: $baseFontSize / 100 * 100%; /* 默认情况下 lib-flexible 将 html fontSize 设定为 100% */ } ``` 这里假设设计稿是以 iPhone6 (375*667) 为准,则 `$baseFontSize` 可设为 75px ,即每份 `rem=10px` 。当然也可以按照实际需求来设定这个比例[^2]。 #### 使用 REM 定义样式 当完成了上述准备工作之后就可以放心大胆地运用 `REM` 来编写 CSS 样式了。下面给出一段简单的例子展示如何利用 `REM` 实现按钮样式的自适应效果: ```css .button { width: 4rem; /* 按钮宽度 */ height: 1.8rem; /* 按钮高度 */ line-height: 1.8rem; /* 行高保持一致 */ border-radius: .9rem; /* 圆角半径 */ background-color: #ffaa00; color: white; text-align: center; margin-top: 1rem; &:active { /* 点击状态下的样式 */ opacity: 0.8; } } ``` 通过这种方式编写的样式不仅具有良好的可读性和易修改性,而且还能很好地兼容各种终端显示环境[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值