一、前言

 利用Sass预处理实现换肤和字体大小调整。

 思路及达到的效果:字体大小的适配使用window.devicePixelRatio的值和需要调整的差量进行控制。页面初始化是的字体适配可以根据devicePixelRatio和css3 media进行适配.

 实现方法:1.利用全局变量和bus事件,使用js方式调整字体和颜色(这里暂不讨论);

      2.利用scss预处理方式实现

        主题更换:使用setAttribute()为html根节点添加属性,根据属性的值再进行不同主题的切换;

        字体大小的调整:

          第一种方法利用不同的class名调用相应的方法传入不同的参数进行控制,对不同的字体进行差量调整(优点:可以对不同的字体大小进行调整,缺点:class可能会很多);

          第二种方法利用一个方法、一个参数进行整体(优点:方法、参数简单,缺点:只能对一种字体大小进行调整).

      这里采用第一种方式进行实现。

二、实现步骤

  Sass的安装和环境配置不做介绍

  demo文件目录:

  

  1.自定义的一些变量 

  

//颜色定义
$background-color-theme: #2474a5;//背景主题颜色默认
$background-color-theme1: red;//背景主题颜色1
$background-color-theme2: #652BF5;//背景主题颜色2
$background-color-theme3: deepskyblue;//背景主题颜色3
$background-color-themesec: #edc148;//背景次要主题颜色
//字体大小定义
$font_size_12:12px;
$font_size_14:14px;
$font_size_16:16px;
$font_size_18:18px;
$font_size_20:20px;//字体调整的差量
$size:0;
$size_4:1px;
$size_6:2px;
$size_8:3px;             

 2.使用@mixin封装对应的方法,这些方法都通过@include  方法名(arg) 来实现调用.   

@mixin font_color($color){/*通过该函数设置字体颜色,后期方便统一管理;*/color:$color;    //默认时的color[data-theme="theme1"] & {color:$font-color-theme1;   }[data-theme="theme2"] & {color:$font-color-theme2;}[data-theme="theme3"] & {color:$font-color-theme3;}
}
@mixin add_size($val,$size){
//这里我的$size分了三种大小分别为1px,2px,3px进行差量增加,再根据不同的dpr来加载不同的css[data-size="0"][data-dpr="1"] & {font-size:($val+$size) * 1.8 ;}[data-size="4"][data-dpr="1"] & {font-size:($val+$size_4) * 1.8 ;}[data-size="6"][data-dpr="1"] & {font-size:($val+$size_6) * 1.8 ;}[data-size="8"][data-dpr="1"] & {font-size:($val+$size_8) * 1.8 ;}[data-size="0"][data-dpr="2"] & {font-size:($val+$size) * 1.8 ;}[data-size="4"][data-dpr="2"] & {font-size:($val+$size_4) * 1.8 ;}[data-size="6"][data-dpr="2"] & {font-size:($val+$size_6) * 1.8 ;}[data-size="8"][data-dpr="2"] & {font-size:($val+$size_8) * 1.8 ;}[data-size="0"][data-dpr="3"] & {font-size:($val+$size) * 1.8 ;}[data-size="4"][data-dpr="3"] & {font-size:($val+$size_4) * 1.8 ;}[data-size="6"][data-dpr="3"] & {font-size:($val+$size_6) * 1.8 ;}[data-size="8"][data-dpr="3"] & {font-size:($val+$size_8) * 1.8 ;}
}

  

3.字体调整方法的调用

4.主题的更换

根据changeTheme方法传入的参数,改变更节点中data-theme的属性值。当调用到bg_color()方法时使用[]css属性选择器进行'判断'加载对应的样式(其它方法同理)

三、总结

  1.字体大小和换肤

  2.在设置字体大小时,适配不同分辨率屏幕及初始化字体的适配

  2.保存设置操作后,初始化时应该先动态添加根节点的属性data-theme、data-size、data-dpr

 

转载于:https://www.cnblogs.com/xufeikko/p/10060676.html

vue中利用scss实现整体换肤和字体大小设置相关推荐

  1. 如何利用 SCSS 实现一键换肤

    本文首发于政采云前端团队博客:如何利用 SCSS 实现一键换肤 https://www.zoo.team/article/theme-scss 前言 在项目开发过程中,我们有时候遇到需要更换站点主题色 ...

  2. Vue + Element UI+Scss + Vuex一键换肤 , 一键换字体大小 ,动态替换全局主题颜色

    一.前言 其实我这个写法每个UI库都通用 , 不局限于ElementUI , 看明白思路就知道怎么写了 一键换肤 , 动态替换全局主题颜色功能已经实现很久了 , 在项目验收的时候出现了一个小问题 , ...

  3. 在vue中使用flexible响应式布局——默认html字体大小(font-size)是54px的问题

    rem响应式布局中,最著名的就是淘宝出品的flexible,马上到新公司,听经理说会有大屏幕展示,所以周末研究一下. 先使用命令创建一个vue项目 vue init webpack 项目名称 安装fl ...

  4. vue树形结构html,怎么在vue中利用递归组件实现一个树形控件

    怎么在vue中利用递归组件实现一个树形控件 发布时间:2021-06-11 17:26:48 来源:亿速云 阅读:81 作者:Leah 本篇文章为大家展示了怎么在vue中利用递归组件实现一个树形控件, ...

  5. 「后端小伙伴来学前端了」Vue中利用全局事件总线实现组件之间通信

    月亮啊月亮 你能照见南边,也能照见北边 照见她,你跟她说一声,就说我想她了. 前言 前一篇文章写了 vue 中利用 Props 实现组件之间的通信,那种方式是最简单也是最基础的组件之间的通信方式.父组 ...

  6. vue中,scss样式的三种写法——当前页面直接定义、@import引入样式、main.js引入公共样式 deep和important的写法

    vue中,scss样式的三种写法--当前页面直接定义.@import引入样式.main.js引入公共样式 & deep和important的写法 1.安装scss # 安装node-sass ...

  7. html 全景图three,vue中利用three.js实现全景图的完整示例

    粗暴一点,直接上代码: 第一步: 通过指令下载three.js npm install three -S 第二步: 在组件中引用 import * as THREE from 'three' 第三步: ...

  8. vue + element-ui动态主题及网站换肤2021,亲测可用

    原文地址 猛击标题 预览主题切换效果 本文 git 仓库地址 猛击查看 本文主题换肤整体实现换肤思路是,定制多套 element-ui 主题,然后通过动态更改 link href样式文件来实现,最后结 ...

  9. Vue 中利用 template标签遍历多维数组

    Vue 中利用 template标签遍历多维数组 1. 需求 2. 二维数组内容 3. 列表渲染指令 v-for 4. template 标签 5. 正确的做法 作者:高玉涵 时间:2022.7.20 ...

最新文章

  1. 出任 Twitter 独立董事,AI 女神李飞飞的传奇人生
  2. windows系统下的FTP命令
  3. 深度学习核心技术精讲100篇(四十四)-深度召回在招聘推荐中的挑战和实践
  4. Zookeeper集群搭建方法
  5. 在Hi3531上运行QT
  6. 执行perl xttdriver.pl报错Can't locate Getopt/Long.pm in @INC
  7. 融云服务器实时消息路由,IM 北极星产品功能介绍
  8. Java Applet 问题汇总
  9. [BZOJ2733] [HNOI2012] 永无乡 (splay启发式合并)
  10. eureka集群的两种配置方式:配置文件方式与DNS方式
  11. C++ 随机数函数rand()与srand()的思考
  12. Jquery中选择器
  13. java私塾(java私塾初级模拟银源代码)
  14. m6000查看端口状态_M6000日常查看维护命令.doc
  15. Permutation 和 Combination
  16. nodejs追加写入日志文件
  17. HTML5七夕情人节表白网页(流星动画3D相册) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
  18. 启用计算机双通道内存的方法,如何正确开启双通道
  19. win7怎么升级win10?
  20. 神奇的输入法——小狼毫——个性化设置

热门文章

  1. spark最新源码下载并导入到开发环境下助推高质量代码(Scala IDEA for Eclipse和IntelliJ IDEA皆适用)(以spark2.2.0源码包为例)(图文详解)...
  2. xshell virt-manager RuntimeError: could not open display
  3. javascript自定义cookie
  4. 美国本科计算机专业,美国本科计算机专业的最新排名介绍
  5. 正弦信号有效值 c语言,推导正弦波正弦量、平均值、有效值基本公式
  6. 张仰彪第二排序法_十大排序之冒泡和选择排序
  7. 左线性文法和右线性文法_线性代数期末考试复习资料
  8. android hal 驱动,AndroidHAL-Teseo
  9. 了解下WSDL 绑定
  10. JSP 自定义标签介绍