uniapp不同平台时执行不同样式

.box{
  /* #ifdef MP-WEIXIN */
  height: calc(100vh - 110rpx - var(--window-top));
  /* #endif */
  如果是h5
  /* #ifdef H5 */
  height: calc(var(--window-height) - 110rpx);
  /* #endif */
  如果不是h5
   /* #ifndef H5 */
  height: calc(var(--window-height) - 110rpx);
  /* #endif */
  }

本来以为只是个注释,没想到居然有用

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp中,可以使用postcss-pxtorem插件来实现rem自适应不同手机屏幕的功能。以下是具体操作步骤: 1. 安装插件 在项目根目录下执行以下命令: ```bash npm install postcss-pxtorem --save-dev ``` 2. 配置插件 在项目根目录下创建postcss.config.js文件,配置插件。示例代码如下: ```javascript // postcss.config.js module.exports = { plugins: { 'postcss-pxtorem': { rootValue: 75, // 设计稿宽度的1/10,这里假设设计稿宽度为750px propList: ['*'] } } } ``` 其中,`rootValue`表示基准值,这里设置为75,表示设计稿宽度的1/10,假设设计稿宽度为750px;`propList`表示要转换的属性列表,这里设置为`['*']`,表示所有属性都要转换。 3. 引入插件 在项目的main.js文件中引入插件。示例代码如下: ```javascript import Vue from 'vue' import App from './App' // 引入插件 import 'postcss-pxtorem' Vue.config.productionTip = false App.mpType = 'app' const app = new Vue({ ...App }) app.$mount() ``` 4. 设置html的font-size 在index.html文件中设置html的font-size,示例代码如下: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>uni-app</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <link rel="stylesheet" href="https://unpkg.com/uni-app-plus/dist/uni-app-plus.css"> <script src="https://unpkg.com/vue"></script> <script src="https://unpkg.com/uni-app-plus/dist/uni-app-plus.js"></script> <script> // 设置html的font-size document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px'; </script> </head> <body> <div id="app"></div> </body> </html> ``` 其中,`document.documentElement.clientWidth / 10`表示屏幕宽度的1/10。 5. 使用rem单位 在编写样式,可以使用rem单位代替px单位。例如,在设计稿中,某个元素的宽度为150px,那么在样式中可以这样写: ```css width: 2rem; ``` 这样,在不同屏幕下,该元素的宽度就会自动适应。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值