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...
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
首先要改造的是style="font-size: 180rpx;" 这里不能直接写死,而是要动态改变,所以我在 data 当中定义了一个变量curFontSize,默认值为"180rpx", 并且替换掉了原来的style="font-size: 180rpx;" curFontSize: "180rpx", :style="{fontSize: curFontSize}" ...
首先要改造的是style="font-size: 180rpx;" 这里不能直接写死,而是要动态改变,所以我在 data 当中定义了一个变量curFontSize,默认值为"180rpx", 并且替换掉了原来的style="font-size: 180rpx;" 代码语言:vue 复制 curFontSize: "180rpx", 代码语言:vue ...
结构布局 Wxml Html 写在template里 样式 Wxss Css 写在style里 逻辑 JavaScript JavaScript 写在script里 配置 Json 无 Json 和小程序不同的是uniapp的页面布局,样式,逻辑都是写在同一个.vue文件里,所以我们接下来学习uniapp和小程序会有一些差别,但是大体上还是很相近的。所以不管你有没有学过的小程序课程,...
代码语言: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 { ...
}.child{font-size:0.8em;/* 等于父元素字体大小的80% */} 3.2 rem rem单位是相对于根元素(即 )的字体大小来计算的。相对于em单位,rem更容易控制和调整。 html{font-size:16px; }.box{font-size:1.2rem;/* 等于根元素字体大小的1.2倍 */} ...
font-size:16px; } 1. 2. 3. 4. 5. 6. 7. 8. 再在vue文件里使用 打开刚才下载的demo.html文件,选择Font class,控制台里复制class内容 <view class=”icon iconfont icon-changjingguanli> </view> 1. 引入css动画库 有时候我们需要做一些动画处理,那么我们可以直接用别人封装好的文件,废话少说,上使用...