一种灵活处理大屏响应式的单位适配分析方法

技术领域

本发明涉及前端技术领域，尤其涉及一种灵活处理大屏响应式的单位适配分析方法。

背景技术

前端开发人员在开发大屏展示的项目时，对于样式的单位换算很是头疼，以往的有em,rem等单位的相关处理方法，但是在换算过程中，由于em是相对于父元素的计算基础，在每个页面进行换算比较耗时，影响开发效率；rem的换算呢又是基于根节点，换算的前提是在body的根元素进行单位基准的逻辑处理，有时候渲染不及时，会导致界面单位没有及时的响应渲染。

在开发前端大屏的响应式处理的过程中，由于既往的单位响应方法换算关系比较复杂，手动计算的步骤比较繁多，无法利于前端代码自动化的实现。

发明内容

为了解决以上技术问题，本发明提供了一种灵活处理大屏响应式的单位适配分析方法，基于快速简便的换算单位，同时自动化时的处理，不用再进行复杂的逻辑处理。

本发明的技术方案是：

一种灵活处理大屏响应式的单位适配分析方法，

包括：

1)安装相关依赖包，sass-loader、node-sass以及style-loader

2)配置文件的修改

3)Scss变量基础文件的定义

4)组件引用

进一步的，安装的是node-sass以及sass-loder解析器，样式编译器style-loader；

node-sass是一个库，它将Node.js绑定到LibSass(流行样式表预处理器Sass的C版本)；允许用户将.scss文件本地编译为css，并通过连接中间件自动编译；

sass-loader是加载sass/scss，并且把sass/scss编译成css,而该loader依赖于node-sass,node-sass依赖于node；

style-loader通过js脚本创建一个style标签。

再进一步的，

通过webpack的相关配置文件webpack.config.js进行变量规则的声明，找到module下的rules的最后一个配置即可，通过webpack的插件css的loader进行样式变量的全局配置。

css的插件loader使用css.loaderOptions，具体实现步骤如下：

首先找到当前框架的配置项vue-config.js，样式css的插件配置项配置下，引入基础变量的scss文件；loaderOptions是webpack针对各种loader的配置项板块，针对的scss采用additionalData附加配置器，来进行scss全局变量的文件导入；采用variable.scss，导入对应的scss文件即可，文件名可以自由定义。

再进一步的，

运用scss的函数定义功能，定义一个单位转换的方法，函数传参即当前设计稿的数值，然后经过此定义函数转换的逻辑转换，自动转换成当前适配屏幕宽度的尺寸。实现方法：

运用scss的函数定义功能，定义单位转换的方法，variable.scss是本文件的相关配置，$gutter-width是定义的单位换算基数，换算基数的具体数值取决于当前设计稿的宽度尺寸大小，然后除以100就是对应的基数值；接下来是单位换算函数的定义，vw-transerfer($n),函数入参即当前设计稿中相应的宽度，此处定义变量$n，函数返回值就是当前$n除以当前换算基数，得到换算完之后的尺寸大小，单位vw(一种响应式的尺寸单位)，进而完成转换函数的定义功能。

再进一步的，

组件引用的具体实现方法：在各页面的引用，此处分两种形式：

1)如果是以样式文件单独引入的，首先在本样式文件引入全局变量文件variable.scss；这样宽度定义变量的功能就被引进来了，接下来是具体单位的转换使用，在样式的宽度或者高度书写位置直接写入vw-transfer(a),传参a就是所要转换的尺寸大小；

2)如果是在当前模板文件写入样式(style标签引入的形式)，那首先在style标签属性内写入scoped lang＝“scss”,scoped是vue单独加载当前模板样式的标识属性，lang＝“scss”,是表示当前样式是scss文件，需要进行css预编译的，引入lang＝“scss”的属性，同1)的单位写法一样，写入定义的单位转换函数vw-transer(),进行相应的单位转换即可。

本发明的有益效果是

通过使用本发明，可以快速简洁的进行大屏开发的单位换算，以实现响应式开发的目的。

附图说明

图1是本发明的工作流程示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例，基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。

本发明提供了一种灵活处理大屏响应式的单位适配分析方法，运用前端的样式预处理器sass来处理界面样式的单位换算，再scss变量定义的基础样式里，定义好基准样式，然后灵活的引用即可，即可实现响应的单位处理，换算简便高效。

由于前端工程是基于vue框架开发，所以先要安装node-sass和sass-loader,以及style-loader,当然如果前端框架是基于其他的(比如react,angular),请安装对应的loader和样式处理器的插件，react需要安装的也是sass-loader和node-sass相关依赖，angular也是同样的处理。

(1)安装相关依赖包，sass-loader和node-sass依赖

本工程安装依赖包node-sass,sass-loader,style-loader,依赖的前端的样式预处理器sass，所以此处安装的是node-sass以及sass-loder解析器，样式编译器style-loader,node-sass是一个库，它将Node.js绑定到LibSass(流行样式表预处理器Sass的C版本)。它允许用户以令人难以置信的速度将.scss文件本地编译为css，并通过连接中间件自动编译；sass-loader是加载sass/scss，并且把sass/scss编译成css,而该loader依赖于node-sass,node-sass依赖于node,所以要注意node-sass和node之间的版本支持；由于vue-cli是采用webpack打包模式加载前端js文件的，运行在node环境，而css这样的文件不是JavaScript模块，所以需要配置style-loader去合理的处理，style-loader是通过js脚本创建一个style标签，里面包含一些样式，style-loader是不能单独使用的，应为它并不负责解析css之前的依赖关系，每个loader的功能都是单一的，各自拆分独立。

(2)配置文件的修改

由于框架依赖的是webpack,所以此处通过webpack的相关配置文件webpack.config.js进行变量规则的声明，找到module下的rules的最后一个配置即可，通过webpack的插件css的loader进行样式变量的全局配置，而对于css的插件loader来说，推荐使用css.loaderOptions，不是使用链式的方式指定loader，因为项目中的各种css文件类型都有多个规则，然而loaderOptions正好可以确保通过一个地方影响所有的样式规则，从而达到我们全局的样式变量的目的，具体实现步骤如下：

首先找到当前框架的配置项vue-config.js，样式css的插件配置项配置下，引入基础变量的scss文件；loaderOptions是webpack针对各种loader的配置项板块，由于本方案是用的scss,所以是针对的scss采用了additionalData附加配置器，来进行scss全局变量的文件导入，由于本方案是用的variable.scss，然后导入对应的scss文件即可，文件名可以自由定义。

(3)Scss变量基础文件的定义

为了实现高效的单位转换，运用scss的函数定义功能，定义一个单位转换的方法，函数传参就是当前设计稿的数值，宽度高度均可，然后经过此定义函数转换的逻辑转换，自动转换成我们当前适配屏幕宽度的尺寸。

实现方法：此处是运用scss的函数定义功能，定义单位转换的方法，步骤(2)中提到的全局变量文件variable.scss，就是本文件的相关配置，$gutter-width是定义的单位换算基数，换算基数的具体数值取决于当前设计稿的宽度尺寸大小，然后除以100就是对应的基数值，本方案中用到的设计稿宽度是7680px(7680/100＝76.8),因为本方案是用的响应式单位vw,满屏是100vw,当前设计稿的宽度除以100就是1vw代表的基准值，所以此次的基数是76.8，当然你可以根据你当前的设计稿的宽度进行相应的换算即可；接下来是单位换算函数的定义，vw-transerfer($n),函数入参即当前设计稿中相应的宽度，此处定义变量$n，函数返回值就是当前$n除以当前换算基数，得到换算完之后的尺寸大小，单位vw(一种响应式的尺寸单位)，进而完成转换函数的定义功能。

(4)组件引用

实现方法：接下来是在各页面的引用，此处分两种形式，分别如下所示，

如果是以样式文件单独引入的，首先在本样式文件引入全局变量文件variable.scss；这样宽度定义变量的功能就被引进来了，接下来是具体单位的转换使用，在样式的宽度或者高度书写位置直接写入vw-transfer(a),传参a就是所要转换的尺寸大小；比如width:280px；280px是设计稿中设计的尺寸大小，那此处就是vw-transfer(280)。那么vw-transer(280)的数值就是当浏览器渲染完之后的尺寸，即转换完的响应式大小。

如果是在当前模板文件写入样式(style标签引入的形式)，那首先在style标签属性内写入scoped lang＝“scss”,scoped是vue单独加载当前模板样式的标识属性，lang＝“scss”,是表示当前样式是scss文件，需要进行css预编译的，注意此处一定要引入lang＝“scss”的属性，否则此处的样式文件会当做普通的css文件，无法运用css，也就是scss的换算函数vw-transfer()无法生效，同1)的单位写法一样，写入我们定义的单位转换函数vw-transer(),进行相应的单位转换即可。

以上所述仅为本发明的较佳实施例，仅用于说明本发明的技术方案，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所做的任何修改、等同替换、改进等，均包含在本发明的保护范围内。