uniapp实现全局设置字体大小,实现小中大的字体切换

这篇具有很好参考价值的文章主要介绍了uniapp实现全局设置字体大小,实现小中大的字体切换。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、效果图

uniapp实现全局设置字体大小,实现小中大的字体切换

二、原理解析

要实现文字大小的动态切换,考虑到使用rem机制。只需要通过修改根节点的font-size值,就能改变文字呈现出来的大小

但是一般我们的项目始用的都是px或rpx单位,全局修改单位未免不现实。所以这里用到了postcss-px-to-viewport插件。
postcss-px-to-viewport可以帮助我们把项目的单位进行统一的转换,且不需要改动源代码。

所以思路为:

  1. 利用postcss-px-to-viewport把单位全部转换为rem
  2. 把根节点font-size值写入vuex中。
  3. 实现字体大小设置页面。修改大小后,要把值写入缓存和vuex。
  4. APP启动时,从缓存里读取上次设置的fontSize值,赋值给vuex_fontsize。
  5. 其他需要被控制大小的页面,顶部添加代码:
    <page-meta :page-font-size="vuex_fontsize+'px'" :root-font-size="vuex_fontsize+'px'"></page-meta>
    

(说明:写进缓存是为了下次进入页面时还能保留上次设置的值,写进vuex中是为了可以响应式修改。)

三、代码实现

(一)、安装和配置postcss-px-to-viewport

1、安装命令:

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

2、根目录下创建一个 postcss.config.js文件,文件内容如下:

const path = require('path')
module.exports = {
  parser: 'postcss-comment',
  plugins: {
    'postcss-import': {
      resolve(id, basedir, importOptions) {
        if (id.startsWith('~@/')) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3))
        } else if (id.startsWith('@/')) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2))
        } else if (id.startsWith('/') && !id.startsWith('//')) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1))
        }
        return id
      }
    },
    'autoprefixer': {
      overrideBrowserslist: ["Android >= 4", "ios >= 8"],
      remove: process.env.UNI_PLATFORM !== 'h5'
    },
    // 借助postcss-px-to-viewport插件,实现px转rem,文档:https://github.com/evrone/postcss-px-to-viewport/blob/master/README_CN.md
    // 以下配置,可以将px转换为rem,如果要调整比例,可以调整 viewportWidth 来实现
    'postcss-px-to-viewport': {
      unitToConvert: 'px', // 需要转换的单位。我这里是px,如果你的项目都是用的rpx,就改成rpx
      viewportWidth: 1800,// 密度,一般为750 || 375。这里可以自己修改
      unitPrecision: 5,
      propList: ['*'],
	  viewportUnit: "rem", // 指定需要转换成的视窗单位,默认vw
      fontViewportUnit: 'rem', // 字体需要转成的单位,只针对 font-size 属性
      selectorBlackList: [],
      minPixelValue: 1,
      mediaQuery: false,
      replace: true,
      exclude: undefined,
      include: undefined,
      landscape: false
    },
    '@dcloudio/vue-cli-plugin-uni/packages/postcss': {}
  }
}

(二)在vuex里定义vuex_fontsize

在你的store存储里添加变量,我设置的是

vuex_fontsize: 18.75	//数值根据自己项目调整

(三)实现字体设置页面

利用滑块,设置font-size的值。点击确定后,要把所设置的值写入vuex_fontsize和缓存里。

<template>
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
	<view class="content">
		<view>
			<view class="fontchange">文字大小</view>
		</view>
		<view style="width:100%;padding: 0 10px;">
			<slider
				:min="16.25"
				:max="21.25"
				:value="fontValue"
				@change="sliderChange"
				:step="2.5"
			/>
			<view class="change-fontsize-box">
				<text style="font-size: 12px;">
					最小
				</text>
				<text style="font-size: 14px;">
					标准
				</text>
				<text style="font-size: 16px;">
					最大
				</text>
			</view>
		</view>
		<view style="padding: 20px 10px;width: 100%;">
			<u-button type="primary" @click="submit">确定</u-button>
		</view>
	</view>
</template>
 
<script>
export default {
	data() {
		return {
			fontValue: 18.75,
		};
	},
	onShow() {
		this.fontValue = this.vuex_fontsize;
	},
	methods: {
		sliderChange(e) {
			this.fontValue = e.detail.value;
		}
		submit() {
			this.$u.vuex('vuex_fontsize', this.fontValue);
			uni.setStorageSync("fontSize", this.vuex_fontsize);
			uni.showToast({
				title: '设置成功',
				icon:'none',
				duration: 1500
			});
		},
	},
};
</script>
 
<style>
.fontchange {
	font-size: 0.8rem;
	margin: 20px 0;
}
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 5px;
	box-sizing: border-box;
}
.change-fontsize-box{
	margin: 10px 18px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}
</style>

(四)App启动时,读取缓存值,赋值给vuex_fontsize

修改App.vue文件,添加以下代码

onLaunch: function() {
	//读取Storage里的字体大小
	let fontsize = uni.getStorageSync("fontSize")
	if (fontsize) {
		this.$u.vuex('vuex_fontsize',  fontsize);
	}
}

(五)其他页面引用

在需要用到的页面加上page-meta。如果是全局修改,就需要全部页面都加上这。

<template>
	<page-meta :page-font-size="vuex_fontsize+'px'" :root-font-size="vuex_fontsize+'px'"></page-meta>
	<view>
		...
	</view>
</template>

开发者工具可以看到根节点html的font-size值可以被成功设置,且页面元素的单位都是rem。大功告成~
uniapp实现全局设置字体大小,实现小中大的字体切换文章来源地址https://www.toymoban.com/news/detail-480778.html

到了这里,关于uniapp实现全局设置字体大小,实现小中大的字体切换的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • VSCode设置鼠标滚轮滑动设置字体大小

    1:打开\\\"文件-首选项-设置 2 :打开settings.json文件 英文版这里有个坑 一般点击我下图右上角那个{ } 就可以打开了 在 设置的json 文件中加入如下 “editor.mouseWheelZoom”: true { “editor.mouseWheelZoom”: true, “json.schemas”: [ }

    2024年02月13日
    浏览(51)
  • IDEA 设置字体大小无效

    设置字体大小,一般都是从file=settings=editor=font=Size里设置,一般都有效。   但是,如果是更换了主体,则需要从主体颜色菜单那里这是,你看这个页面,上面黄色三角也提示你了,要去颜色主体菜单去设置,进入同级目录:Editor=Color Scheme,然后修改Font,APPLY之后就生效了。

    2024年02月13日
    浏览(45)
  • wangEditor 初始化设置行高、字体和字体大小

    wangEditor 设置字体大小16px、字体微软雅黑、行高1.5 wangEditor 配置完整代码

    2024年02月13日
    浏览(55)
  • java easyPOI导出一对多数据,设置边框,字体,字体大小

    java easyPOI导出一对多数据,设置边框,字体,字体大小 需求总是千奇百怪,解决的方式也可以是多种多样。 今天碰到导出excel是一对多结构的,以往导出的数据都是一条一条的,所以采用的是比较方便简单的方法easyExcel,今天猛然碰到一对多导出虽然用easyExcel也可以,但是相

    2024年01月21日
    浏览(34)
  • wps设置一键标题字体和大小

    wps设置一键标题字体和大小:https://www.kafan.cn/A/7v5le1op3g.html 统一一键设置

    2024年02月12日
    浏览(33)
  • eclipse设置字体大小调整的方法

    要在 Eclipse 中调整字体大小,可以按照以下步骤进行操作:    打开 Eclipse,进入菜单栏 Window - Preferences。 在 Preferences 窗口中,选择 General - Appearance - Colors and Fonts。 在 Colors and Fonts 窗口中,展开 Basic - Text Font。 双击 Text Font 下拉菜单中选择字体大小。 在字体窗口中,可以更

    2024年02月11日
    浏览(54)
  • latex插入表格,并且设置字体大小

    运行效果: 这样可以使得表格高度适中,并且表格内的字体全部上下左右居中显示。

    2024年02月11日
    浏览(42)
  • idea设置字体大小快捷键 Ctrl+鼠标上下滑 字体快捷键缩放设置

    双击 按住ctrl+鼠标滑轮上划放大就好了 这个双击设置为,Ctrl+鼠标下滑 字体缩小就好了

    2024年02月02日
    浏览(72)
  • IntelliJ IDEA 字体大小设置(有三处地方设置)!!!

    问题 :有的电脑屏幕较大 IDEA默认字体就显的较小 想把字体调大一些 但是又找不到在哪! 答:其实IDEA有三处改修字体的设置!!! 废话不多说直接开始 第一处 先打开FileSettings 这一步是设置左边项目的 字体 和 大小! 第二处   这里是修改你打代码的 字体 和 大小! 但是有的同学可

    2024年02月13日
    浏览(59)
  • Eclipse字体大小设置的5个步骤

    Eclipse是一款非常流行的Java集成开发环境(IDE),它被广泛地用于开发Java应用程序。在Eclipse中,字体大小对于用户体验至关重要。因此,了解如何在Eclipse中设置字体大小是非常有用的。 1、打开Eclipse 首先,打开Eclipse IDE。如果Eclipse未能正常启动,请按照Eclipse的安装指南进行操

    2024年02月07日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包