如何vue中使用rem实现给文件添加内容

　　介绍

这篇文章给大家介绍如何vue中使用rem实现给文件添加内容,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

在使用vue-cli搭建好项目框架后,在目录结构的指数。html文件中添加一段js代码:

& lt; script> 　　窗口。onload=function () { 　　var setRem=function () {//用户界面设计稿的宽度 　　var uiWidth=1200;//移动端屏幕宽度 　　var winWidth=document.documentElement.clientWidth;//比率 　　var=winWidth/uiWidth率;//设置html元素的字体大小 　　document.documentElement.style。字形大?速度* 20 +“px" 　　}; 　　 　　setRem (); 　　 　　窗口。onresize=function () { 　　setRem (); 　　} 　　} 　　& lt;/script>

然后在写css就可以将px单位换成快速眼动。

这里设置的比例是20 px=1 rem,

例如:宽度为100 px时,可以直接写成5 rem 

(函数(医生,赢得){
　　让fn=()=比;{
　　让docEl=doc.documentElement,
　　clientWidth=docEl.clientWidth;
　　如果(! clientWidth)返回;
　　docEl.style。字形大?16 * (clientWidth/1920) + & # 39; px # 39;;
　　}
　　如果(! doc.addEventListener)返回;
　　win.addEventListener(& # 39;调整# 39;,fn);
　　doc.addEventListener (& # 39; DOMContentLoaded& # 39;, fn);
　　})(文档、窗口);

<强> vue中使用雷布局的两种方法

在使用vue-cli开发H5项目时,需要进行rem适配、下面提供两种常用的方法(以750年设计稿为例),希望对大家有所帮助。

<强>方法一:在索引。html或者主要。js中添加以下代码: 

 const setHtmlFontSize=()=比;{
　　const htmlDom=document.getElementsByTagName (& # 39; html # 39;) [0];
　　让htmlWidth=document.documentElement。clientWidth | | document.body.clientWidth;
　　如果(htmlWidth祝辞=750){
　　htmlWidth=750;
　　}
　　如果(htmlWidth & lt;=320) {
　　htmlWidth=320;
　　}
　　htmlDom.style。字形大?" $ {htmlWidth/7.5} px”;
　　};
　　窗口。onresize=setHtmlFontSize;
　　setHtmlFontSize ();

注:这里设置的比例是100 px=1 rem,例如:元素宽度为100 px时,可以直接写成1 rem

<强>方法二:使用lib-flexible和px2rem-loader自动转换

1,安装插件

npm安装lib-flexible——保存

npm安装px2rem-loader——save-dev

2,配置插件

在入口文件主要。js中引入lib-flexible:

如何vue中使用rem实现给文件添加内容

在构建/跑龙套。js文件中配置px2rem-loader:

如何vue中使用rem实现给文件添加内容

安装并配置好lib-flexible和px2rem之后要重启一下项目,才能自动把px转换成快速眼动。

内联的px样式不能自动转换。

<强>另外,px写法上会有些不同,大家可以参考px2rem官方介绍,下面简单介绍一下。

1。直接写px,编译后会直接转化成快速眼动;- - - - -【除下面两种情况,其他长度用这个】

2。在px后面添加/* */,不会转化px,会原样输出;——【一般边界用这个】

3。在px后面添加/* px */,会根据dpr的不同,生成三套代码。——【一般字体大小用这个】

示例代码如下:

/*编译前*/.selector {
　　宽度:150 px;
　　身高:64 px;/* px */字体大小:28 px;/* px */边界:1 px固体# ddd;/* */}/*编译后*/.selector {
　　宽:2快速眼动;
　　边界:1 px固体# ddd;
　　}
　　(data-dpr=?“) .selector {
　　高度:32像素;
　　字体大小:14 px;
　　}
　　(data-dpr=?“) .selector {
　　身高:64 px;
　　字体大小:28 px;
　　}
　　[data-dpr=?“] .selector {
　　身高:96 px;
　　字体大小:42 px;
　　}

关于如何vue中使用rem实现给文件添加内容就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。

如何vue中使用rem实现给文件添加内容