H5移动端px转rem格式 1rem = 100px

使用这个方法配适之后，1rem = 100px；
例如ui图中字体大小24px ，那么开发时字体大小为0.24rem

<script>export default {mounted(){setRem()},}function setRem() {var whdef = 100/750;// 表示1920的设计图,使用100PX的默认值var bodyWidth = document.body.clientWidth;// 当前窗口的宽度var rem = bodyWidth * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值document.getElementsByTagName('html')[0].style.fontSize = rem + 'px';}window.addEventListener('load', setRem);window.addEventListener('resize', setRem);
</script>

H5移动端px转rem格式 1rem = 100px相关推荐

pc端和移动端px和rem的转换
关于pc端和移动端px和rem的转换直接复制下方代码 (function (doc, win) {var docEl = doc.documentElement,resizeEvt = 'orien ...
移动端px和rem的换算
今天又遇到了移动端rem的计算,感觉自己弄了很多遍,还是迷迷糊糊,今天参考了很多网站上的文章,重新整理一遍: 看根元素html里面设置的font-size是多少(50)px,即认为1rem为多少(50 ...
html px转换,pc端px转换为rem针对屏幕分辨率进行页面适配
常用的pc端网站适配方案是什么?用的最多的大概就是父元素按照设计图的宽度进行固定宽度,margin:0 auto居中,两边留白.但是有的设计图不适合这样两边留白的适配方案. 最近接手了一个pc端的项目 ...
html分辨率的适配方法,pc端px转换为rem针对屏幕分辨率进行页面适配
常用的pc端网站适配方案是什么?用的最多的大概就是父元素按照设计图的宽度进行固定宽度,margin:0 auto居中,两边留白.但是有的设计图不适合这样两边留白的适配方案. 最近接手了一个pc端的项目 ...
H5移动端适配方案rem/vw
前言在讲解适配方案之前,我们聊聊为什么要做适配? 因为视口.逻辑像素.分辨率这些变量的不同,在每个设备展示都不一样,需要一种方案来统一. 物理像素:也就是分辨率,一个物理像素是显示器上的最小的物理显 ...
H5移动端适配 rem 和 vw 的区别
当我们做H5移动端项目或移动官网时,要求要根据不同机型做等比例缩放一.rem适配 rem是相对单位,是相对HTML根元素的 font-size 来决定它的大小,1rem 就等同于 html标签fon ...
html移动端怎么做城市选择,移动端页面单位的选择（px, em, rem, vw）
px, em, rem的区别: px:绝对字体大小 em:基于一个基数来计算出相对字体大小.(移动端用的少) rem:基于根节点(html)的字体大小来计算. vw:可视区宽度单位.1vw等于可视区宽 ...
uniApp开发h5踩坑 px转rpx转rem 1px转2rpx 2倍
项目要求开发h5移动端页面,查看了后续可能会出现的ui设计.不选择使用原生写法写h5,选择了uniApp+vue3来开发h5,高效简洁.由于第一次使用uniApp开发h5,所以挺多坑和报错. 在h5移 ...
移动端页面单位的选择(px em rem)
移动端页面单位的选择(px em rem) 绝对单位: px 相对单位: rem em em具有继承性继承自直接父类所以说在移动端很少用浏览器默认的字体大小 16px 那么 1em= ...

H5移动端px转rem格式 1rem = 100px

H5移动端px转rem格式 1rem = 100px相关推荐

最新文章

热门文章