## 使flexible.js用动态设置html的font-size动态设置html根字体的大小和body字体大小,使用flexible.js将为1920*1080的设计稿分为24等份,每一份80px,即1920/24=80,即1rem = 80px,24rem = 1920px,将body的fontSize设置为12px。 在窗口大小改变时调用refreshRem函数,计算屏幕宽度,并根据宽度计算出rem的基准值。
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px'; (3)布局的时候,各元素的css尺寸=设计稿标注尺寸/设计稿横向分辨率/10 (4)font-size可能需要额外的媒介查询,并且font-size不使用rem,这一点跟网易是一样的。 最后还有一个情况要说明,跟网易一样,淘宝也设置了一个临...
1<html data-dpr="1" style="font-size: 54px;"> 解决方法: 修改node_modules\lib-flexible\flexible.js文件的refreshRem,可见原代码中width / dpr > 540的情况下默认不随width改变,我们把这段代码修改如下: 1functionrefreshRem(){2varwidth =docEl.getBoundingClientRect().width;3if(width / dpr > 540...
2019-12-23 16:07 − 介绍postcss-pxtorem 是一款 postcss 插件,用于将单位转化为 remlib-flexible 用于设置 rem 基准值 1、安装lib-flexible(用于设置 rem 基准值) npm i -S amfe-flexible 2、在main.js文件中引入lib-flex... 615 0 2508 9.第一个vue-cli项目 2019-12-22 14:36 − 1.什么...
2019-12-24 08:37 −今天使用了rem来写样式,前提是要给html设置font-size:100px;这样在计算比例时相对方便点;结果在将一个span标签设置为display:inline-block;时发现span不能能和父元素div同高,然后问了大神,原来是body忘记设置font-size了。 现在,对于我来说, ... ...
1<html data-dpr="1" style="font-size: 54px;"> 1. 解决方法: 修改node_modules\lib-flexible\flexible.js文件的refreshRem,可见原代码中width / dpr > 540的情况下默认不随width改变,我们把这段代码修改如下: 1functionrefreshRem(){2varwidth =docEl.getBoundingClientRect().width;3if(width / dpr >...