style.fontSize = window.innerWidth / 10 + 'px'; 这里我们将根元素的字体大小设置为屏幕宽度的十分之一(可以根据设计稿的基准宽度进行调整)。例如,如果设计稿是基于375px宽度的,那么可以将字体大小设置为37.5px,即375 / 10 = 37.5。 3. 根据设计稿尺寸计算rem值 在设计稿中,我们通常使用px作为单位。
/* 设置字体rem */ function setRem() { var width = document.body.offsetWidth; // 获取当前页面的宽度 var nowFont = width / 375 * 37.5; // 通过标签名称来获取元素 var htmlFont = document.getElementsByTagName('html')[0]; // 给获取到的元素的字体大小赋值 htmlFont.style.fontSize = nowF...
利用postcss-px-to-viewport把单位全部转换为rem 把根节点font-size值写入vuex中。 实现字体大小设置页面。修改大小后,要把值写入缓存和vuex。 APP启动时,从缓存里读取上次设置的fontSize值,赋值给vuex_fontsize。 其他需要被控制大小的页面,顶部添加代码: <page-meta :page-font-size="vuex_fontsize+'px'" :ro...
我采用的方法是在main.js中设置rem根元素字体大小,然后挂载到原型上成为全局可引用的变量。之后在每个页面对根元素大小进行设置。 //main.js let fontSize = '100px'; const res = uni.getSystemInfoSync(); if(res.screenWidth < 750){//根据屏幕宽度进行适配 fontSize = 100 * (res.screenWidth / 750)...
uniapp实现全局修改字体大小功能(方式一) 实现方法:在页面上配置page-meta节点,通过root-font-size属性重新定义rem的默认值 具体步骤: 效果: gitee地址: https://gitee.com/dream-fx/uniapp-demo.git
可以参考H5适配的做法,做一个pc的px转rem的插件,通过修改1rem等于多少px,和不同分辨率下的html的font-size的大小,设置每个元素(宽高,border等)的最终大小,每个元素的值通过sass的函数名来设置。max-height和max-width可以根据需要使用 // PX 转 rem
font-size: 0.28rem; color: #fff; width: 2.7rem; height: 0.88rem; line-height: 0.88rem; background: #a8bc6d; text-align: center; border-radius: 1rem; margin-left: 0.13rem; transition: background 0.1s ease; } .checkActive {
<view :style="{color:color, fontSize: fontSize + 'px'}" /> 动态绑定class <view class="normal_view" /> 对象语法: <view :class="{ active: isActive }"></view> 上面的语法表示active这个 class 存在与否将取决于数据isActive 数组语法: ...
<page-meta:root-font-size="fontSize + 'px'"></page-meta> // uniapp 只有app.vue为入口文件 没有结构代码 只能在各个页面上添加 //如果你写的是H5的话 可以再index.html中添加设置rem的根页面Font-size大小 在使用page-meta要注意 这个是新加的 有版本要求的 ...
font-size: 0.28rem; color: #fff; width: 2.7rem; height: 0.88rem; line-height: 0.88rem; background: #a8bc6d; text-align: center; border-radius: 1rem; margin-left: 0.13rem; transition: background 0.1s ease; } .checkActive {