Js动态设置rem来实现移动端字体的自适应代码

JavaScript04

Js动态设置rem来实现移动端字体的自适应代码,第1张

下面一段代码给大家介绍了Js动态设置rem来实现移动端字体的自适应，以此做个记录，方便以后需要，感兴趣的朋友一起看看吧。

具体代码如下所示：

//设置根元素字体

var

win

=

window,

doc

=

document

function

setFontSize()

{

var

winWidth

=

$(window).width()

//750这个数字是根据你的设计图的实际大小来的，所以值具体根据设计图的大小

var

size

=

(winWidth

/

750)

*

100

doc.documentElement.style.fontSize

=

(size

<

100

?

size

:

100)

+

'px'

}

//这里我们给个定时器来实现页面加载完毕再进行字体设置

setTimeout(function()

{

//初始化

setFontSize()

},

100)

以上所述是小编给大家介绍的Js动态设置rem来实现移动端字体的自适应代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

方法一：rem单位 使用amfe-flexible和postcss-pxtorem （写的时候需要转换单位）

vant本身是px单位的，实际项目设计图是750px宽，若要实现同时自适应，需要结合两个插件：

amfe-flexible和postcss-pxtorem

步骤如下

一、如何将px单位转化为rem？

借助 postcss-pxtorem 插件，postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem。

安装：

配置：vue.config.js文件

二、如何做rem适配？

rem适配文档上建议使用 lib-flexible ，flexible适配的原理是物理像素与逻辑像素的相互转化：物理像素px = window.screen.width(逻辑像素pt) * window.devicePixelRatio

如何配合框架使用:

1.安装

2.main.js引入

（index.html要设置meta）

————————————

关于使用

为了要使用vant的样式，rootValue应设置为37.5

设计图是750px宽的，则写的时候如果用px 则需要除以2，如果用rem的话，要自行计算 px/75=rem，或者使用IDE的插件计算

使用蓝湖的话，很方便

另，如果不使用vant，单纯的还原设计图

可以将rootValue设置为75，css像素可以直接按设计图写

参考： https://www.cnblogs.com/changxue/p/11322855.html

方法二（推荐）：vw单位 使用postcss-px-to-viewport （自定义的样式）

安装

npm install postcss-px-to-viewport --save-dev

配置：

使用这个 vant的单位不变 自定义的单位可直接写px 会转化为vw