AI 助理
备案控制台
开发者社区 云计算 文章 正文

uni-app(移动端) 修改(动态修改)根节点html的样式

2022-11-05 938
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： uni-app 修改(动态修改)根节点html的样式

uni-app中修改根节点的样式，例如背景颜色、字体大小等样式。由于uni-app不能直接使用@media媒体监听来直接修改html的样式（我这里是需要修改html中的font-size，使用过page，@media都修改失败）。

经过多次尝试后发现uni-app官网推出的page-meta可以修改根节点的属性。具体方法如图5defb6d796b441a39d02358ec420a54f.png
直接在需要修改样式的页面顶部添加，这里的root-font-size是我动态绑定的字体大小（因为需要动态改变根节点样式），可以按照自己的需要来设置样式参数。

也可以看uni-app官网的page-meta介绍。
a47982faf0a3414d919ce147ddcdf10f.png

关键词：
HTML节点
APP样式
APP html
HTML动态
APP移动端
汪汪队出击
目录
相关文章
游客44yag4ft7nckq
|
7天前
|
JavaScript
HTML DOM 节点树
HTML DOM 节点是指在 HTML 文档对象模型中，文档中的所有内容都被视为节点。整个文档是一个文档节点，每个 HTML 元素是元素节点，元素内的文本是文本节点，属性是属性节点，注释是注释节点。DOM 将文档表示为节点树，节点之间有父子和同胞关系。
游客44yag4ft7nckq
12 3
游客44yag4ft7nckq
|
7天前
|
JavaScript
HTML DOM 节点
HTML DOM（文档对象模型）将HTML文档视为节点树，其中每个部分都是节点：文档本身是文档节点，HTML元素是元素节点，元素内的文本是文本节点，属性是属性节点，注释是注释节点。节点间存在父子及同胞关系，形成层次结构。
游客44yag4ft7nckq
20 3
六卿
|
2月前
|
移动开发 前端开发 JavaScript
Twaver-HTML5基础学习(11)形状节点(ShapeNode)
本文介绍了Twaver HTML5中的形状节点（ShapeNode），它通过一系列点连接成形状来表示物体，支持直线和曲线绘制。文章通过示例代码展示了如何在React组件中创建ShapeNode并设置其形状和样式。
六卿
24 1
Twaver-HTML5基础学习(11)形状节点(ShapeNode)
六卿
|
2月前
|
移动开发 前端开发 JavaScript
Twaver-HTML5基础学习(9)HTML节点(HTMLNode)
本文介绍了Twaver HTML5中的HTML节点（HTMLNode），这是一种专门用于呈现HTML元素的网元。文章解释了HTMLNode如何继承自Node并具有所有Node的特点，以及如何通过setName()方法将HTML元素作为网元的LabelAttachment或者AlarmAttachment呈现。示例代码展示了如何在React组件中创建HTMLNode并添加HTML元素，以及如何自定义告警显示样式。
六卿
15 1
Twaver-HTML5基础学习(9)HTML节点(HTMLNode)
六卿
|
2月前
|
移动开发 前端开发 HTML5
Twaver-HTML5基础学习(8)拓扑元素(Element)_网元(Element)、节点(Node)
本文介绍了Twaver HTML5中的拓扑元素（Element），包括网元（Element）、节点（Node）和连线（Link）的基本概念和使用方法。文章详细解释了Element的属性和方法，并通过示例代码展示了如何在React组件中创建节点、设置节点属性和样式。
六卿
37 1
Twaver-HTML5基础学习(8)拓扑元素(Element)_网元(Element)、节点(Node)
cqtianxin1
|
2月前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 节点列表
JavaScript HTML DOM 节点列表
cqtianxin1
18 5
cqtianxin1
|
2月前
|
JavaScript 前端开发
JavaScript HTML DOM 元素 (节点)
JavaScript HTML DOM 元素 (节点)
cqtianxin1
25 2
你真的不认识我了
|
2月前
|
移动开发 小程序 前端开发
uni-app组件样式修改不生效
uni-app组件样式修改不生效
你真的不认识我了
219 4
全栈程序猿
|
5月前
|
开发框架 移动开发 JavaScript
SpringCloud微服务实战——搭建企业级开发框架（四十七）：【移动开发】整合uni-app搭建移动端快速开发框架-添加Axios并实现登录功能
在uni-app中，使用axios实现网络请求和登录功能涉及以下几个关键步骤： 1. **安装axios和axios-auth-refresh**： 在项目的`package.json`中添加axios和axios-auth-refresh依赖，可以通过HBuilderX的终端窗口运行`yarn add axios axios-auth-refresh`命令来安装。 2. **配置自定义常量**： 创建`project.config.js`文件，配置全局常量，如API基础URL、TenantId、APP_CLIENT_ID和APP_CLIENT_SECRET等。
全栈程序猿
216 60
疯狂的猿
|
4月前
动态粒子发射404网站HTML源码
动态粒子发射404网站HTML源码，粒子内容可以进行修改，默认是4，0数字还有一个页面不存在英文，可以自行修改，喜欢的朋友可以拿去使用，源码是html，记事本打开修改即可，鼠标双击可以运行
疯狂的猿
55 1
动态粒子发射404网站HTML源码

热门文章

最新文章

  • 1
    weex-html5 组件进阶
  • 2
    用jQuery向div中添加Html文本内容
  • 3
    gzip压缩js和html文件java源码
  • 4
    HTML5 Web Workers
  • 5
    markdown to html
  • 6
    Zip 压缩、解压技术在 HTML5 浏览器中的应用
  • 7
    15个前卫的 HTML5 & CSS3 网页设计作品
  • 8
    extractCSS – 帮助你从 HTML 中快速分离出 CSS
  • 9
    HTML，javascript，Json数据在线格式化工具
  • 10
    42个非常有用的 HTML5 开发教程和学习资源
  • 1
    云擎技术---分析工信部APP备案的“传闻”
    119
  • 2
    uni-app使用v-html输出富文本图片溢出解决
    617
  • 3
    解决 App 自动化测试的常见痛点
    67
  • 4
    深入探究App压力测试的关键要点：从零开始学习Monkey
    99
  • 5
    UniApp打包教程：使用HBuilder X和AppUploader完成原生App云打包和上架指南“
    222
  • 6
    APP安全加固怎么做？加固技术、加固方法、加固方案
    88
  • 7
    提高APP安全性的必备加固手段——深度解析代码混淆技术
    81
  • 8
    利用uni-app 开发的iOS app 发布到App Store全流程
    221
  • 9
    【Uniapp开发】APP的真机调试指南，从开发到上架全过程
    190
  • 10
    强化您的应用安全，从app加固开始
    80

    • 相关课程

    更多
  • HTML 入门与实战
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS
  • 互联网安全-移动APP漏洞风险与解决方案
  • Node.js 入门教程文档

    • 相关电子书

    更多
  • 爆款App小咖秀产品服务端架构设计分享
  • 如何完成一份像样的互联网金融APP安全检测报告
  • 天猫HTML5互动技术实践

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • 前端开发基础6：Node.js和LESS预编译工具
  • HTML及前端框架
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月