body { font-size: 1rem; /* 相当于基础字体大小 */ } 4. 使用第三方库如postcss-px-to-viewport postcss-px-to-viewport是一个PostCSS插件,可以将px单位转换为vw单位,从而实现字体大小的自适应。你需要在Vue项目中配置PostCSS并安装这个插件。 首先,安装必要的依赖: bash npm install postcss-loader postcss...
其工作原理是:配置一个 remUnit ,在打包过程中把所有的 px 单位通过换算: font-size: 16px;//转换 16/remUnit ,remUnit =16font-size: 1rem; 这样全局的 px 全部转换为了 rem。 再配置 html 下的 font-size ,进而设置 rem 的值,达到自适应当前尺寸。 基本原理清除了。继续搜索了一些这方面的工具库: ...
.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. 配置完成,本地运行,看到如下效果,...
上述代码中将视图容器分为10份,font-size用十分之一的宽度来表示,最后在header标签中执行这段代码,就可以动态定义font-size的大小,从而1rem在不同的视觉容器中表示不同的大小,用rem固定单位可以实现不同容器内布局的自适应。 3. rem2px和px2rem 如果在响应式布局中使用rem单位,那么存在一个单位换算的问题,rem2...
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`设成根,那我们来看看详细步骤吧: 步骤1: 在`vue`的`App.vue`页面设置全局字体大小 mounted() { let width=$("body").width(); if(width>=1200){ let fontsize=width/1920*40;//fontsize为当前屏幕的基数字体,相对...
像手机淘宝网,就是在根标签设置font-size,然后使用rem去设置尺寸大小,它们可能有更精细化的优化处理,这里就只讲普通的实现方法。 淘宝示例图 实现过程 获取当前的设备宽度 const view_width = document.getElementsByTagName('html')[0].getBoundingClientRect().width; ...
postcss-px2rem会将px转换为rem,rem单位用于适配不同宽度的屏幕,根据标签的font-size值来计算出结果,1rem=html标签的font-size值。 如下所示: 全是px为单位,但是仍然可以自适应,这样很方便开发,你在设计图上量到的像素(px)是多少你就可以写多少px
vue中使用rem布局解析+大屏自适应 浅析rem 首先rem是css单位,相比于px固定的像素单位,rem更加的灵活,还有现在也比较好的vm。如果从未了解过,可以先过过眼 rem自适应。CSS3的REM设置字体大小 font size of the root element. 简单来说,rem就是根据html元素的字体大小来计算单位的。我们的需求就是说,根据不同的...
font-size: 16/$r+rem; //这里计算出来的结果就是0.5rem; text-indent: 5px; } 通过以上方法确实可以实现字体自适应屏幕大小,有个很XX的问题就是当浏览器窗口缩小或者原本小窗口的放大窗口后字体还是原来的大小,即改变窗口大小后需要手动刷新页面,字体才会自适应页面,这是个很不友好的现象。于是我想到需要一个...