export default { methods: { onChangeFontSize: function(value) { uni.setStorageSync('font-size', value) uni.setGlobalStyle({ 'html,body': { fontSize: uni.upx2px(value) + 'px' } }) } } } 在页面上调用这个方法,可以设置用户选择的不同字体大小。 <uni-list> <uni-list-item v-for="...
<page-meta :page-font-size="vuex_fontsize+'px'" :root-font-size="vuex_fontsize+'px'"></page-meta> <view> ... </view> </template> 1. 2. 3. 4. 5. 6. 用开发者工具可以看到根节点html的font-size值可以被成功设置,且页面元素的单位都是rem。大功告成~...
html = html.replace(/<pre/gi, '<p style="font-size:1em; margin:12px 0; line-height:1.2em; background:#F6F7F8; border-radius:5px; padding:8px 4%; width:92%;"'); html= html.replace(/<\/pre/gi,"</p");for(let i= 0;i < GRT.length; i++){ graceRichTextReg= newRegExp...
replace(/<pre/gi, '<p style="font-size:1em; margin:12px 0; line-height:1.2em; background:#F6F7F8; border-radius:5px; padding:8px 4%; width:92%;"' ); html = html.replace(/<\/pre/gi, "</p"); for (let i = 0; i < GRT.length; i++) { graceRichTextReg = new Reg...
https://uniapp.dcloud.net.cn/api/ui/font.html 二,js代码: 1,app.vue <script>exportdefault{ onLaunch:function() { console.warn('当前组件仅支持 uni_modules 目录结构 ,请升级 HBuilderX 到 3.1.0 版本以上!') console.log('App Launch');//加载字体文件let fontUrl = "https://spkf-zsxn-pro...
首先要改造的是style="font-size: 180rpx;" 这里不能直接写死,而是要动态改变,所以我在 data 当中定义了一个变量curFontSize,默认值为"180rpx", 并且替换掉了原来的style="font-size: 180rpx;" 代码语言:vue 复制 curFontSize: "180rpx", 代码语言:vue ...
可以参考H5适配的做法,做一个pc的px转rem的插件,通过修改1rem等于多少px,和不同分辨率下的html的font-size的大小,设置每个元素(宽高,border等)的最终大小,每个元素的值通过sass的函数名来设置。max-height和max-width可以根据需要使用 // PX 转 rem
结构布局 Wxml Html 写在template里 样式 Wxss Css 写在style里 逻辑 JavaScript JavaScript 写在script里 配置 Json 无 Json 和小程序不同的是uniapp的页面布局,样式,逻辑都是写在同一个.vue文件里,所以我们接下来学习uniapp和小程序会有一些差别,但是大体上还是很相近的。所以不管你有没有学过的小程序课程,...
}.child{font-size:0.8em;/* 等于父元素字体大小的80% */} 3.2 rem rem单位是相对于根元素(即 )的字体大小来计算的。相对于em单位,rem更容易控制和调整。 html{font-size:16px; }.box{font-size:1.2rem;/* 等于根元素字体大小的1.2倍 */} ...
代码语言:html 复制 <template><viewclass="content"><viewclass="result-view"><inputclass="result-box"type="text"v-model="showValue"disabled="true"style="font-size: 180rpx;"/></view><viewclass="btns-view"></view></view></template><script>export default { ...