其工作原理是:配置一个 remUnit ,在打包过程中把所有的 px 单位通过换算: font-size: 16px;//转换 16/remUnit ,remUnit =16font-size: 1rem; 这样全局的 px 全部转换为了 rem。 再配置 html 下的 font-size ,进而设置 rem 的值,达到自适应当前尺寸。 基本原理清除了。继续搜索了一些这方面的工具库: ...
因为lib-flexible主要用于手机自适应,当屏幕尺寸大于540px时,它设置html的font-size固定为54px,并不能根据屏幕尺寸调整html的font-size的大小,所以这里需要修改lib-flexible源码。在node-modules依赖包lib-flexible文件夹中的flexible.js文件,可以看到源码 function refreshRem(){ //获取屏幕宽度 var width = docEl.get...
.selector { width: 150px; height: 64px; /*px*/ font-size: 28px; /*px*/ border: 1px solid #ddd; /*no*/}复制代码 1. 2. 3. px2rem-loader 基于 px2rem 实现,很多用法和 px2rem 类似 https://github.com/Jinjiang/px2rem-loader复制代码 1. 2. 3. 配置完成,本地运行,看到如下效果,...
除非重写,否则它将继承浏览器默认设置的字体大小。 例如,让我们把网站的`html`元素没有设置`font-size`值。 如果用户让他们的浏览器默认字体大小为 16px,那么根元素字体大小将为 16px。 假如在项目开发中,我们需要设置一个全局的自适应字体,也就是根的字体大小,这里将`html`设成根,那我们来看看详细步骤吧: 步...
答案是否定的,pc端下和移动端下我们设置的font-size统一为16px。 可以看出,字体都是16px,显然在pc端中文字正常显示,而在移动端文字很小,几乎看不到,说明在css中1px并不是固定大小,直观从我们发现在移动端1px所表示的长度较小,所以导致文字显示不清楚。
vue中适配,页面使用rem,函数设置rem基础font-size自适应问题 1 (function(){ //适配设置基础rem 2 function w() { 3 var r = document.documentElement; 4 var a = r.getBoundingClientRect().width;//获取当前设备的宽度 5 console.log(a,'获取当前设备的宽度s'); 6 if (a < 1280) { //414不...
此方案不打开控制台或不改变浏览器的显示区域宽高,会自动把html的fontsize改变造成样式变化,每次都要手动刷新下才正常,此bug暂时没找到解决方法,感觉不是很好。 方案二(完美解决) 1.在自己项目utils下新建rem.js文件 // rem等比适配配置文件 // 基准大小 ...
自适应是每个开发者必走的路,该篇掘文是前者踩过一些坑 而踏出来的几条路,希望这些经验能在开发的过程中帮助到大家!!! 1.传统布局 => rem 方式一 const deviceWidth = document.documentElement.clientWidth || document.body.clientWidth; document.querySelector(‘html’).style.fontSize = deviceWidth / ...
postcss-px2rem会将px转换为rem,rem单位用于适配不同宽度的屏幕,根据标签的font-size值来计算出结果,1rem=html标签的font-size值。 如下所示: 全是px为单位,但是仍然可以自适应,这样很方便开发,你在设计图上量到的像素(px)是多少你就可以写多少px
font-size: 16/$r+rem; //这里计算出来的结果就是0.5rem; text-indent: 5px; } 通过以上方法确实可以实现字体自适应屏幕大小,有个很XX的问题就是当浏览器窗口缩小或者原本小窗口的放大窗口后字体还是原来的大小,即改变窗口大小后需要手动刷新页面,字体才会自适应页面,这是个很不友好的现象。于是我想到需要一个...