开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Angular:使用css变量更改字体大小适用于某些字段，但不会在浏览器中反映出来

基础概念

CSS变量（也称为自定义属性）是一种在CSS中定义和使用变量的机制。它们允许你在整个样式表中重用值，从而使样式更易于维护和更新。CSS变量的语法如下：

:root {
  --main-font-size: 16px;
}

.some-class {
  font-size: var(--main-font-size);
}

相关优势

可维护性：通过使用CSS变量，可以集中管理样式值，便于更新和维护。
灵活性：可以在不同的元素和媒体查询中重用相同的变量，提高样式的复用性。
动态性：可以通过JavaScript动态修改CSS变量的值，实现动态的样式变化。

类型

CSS变量分为两种类型：

全局变量：在:root选择器中定义的变量，可以在整个文档中使用。
局部变量：在特定元素或选择器中定义的变量，只能在当前作用域内使用。

应用场景

CSS变量广泛应用于以下场景：

主题切换：通过修改全局变量实现主题颜色的切换。
响应式设计：根据不同的屏幕尺寸调整变量值，实现响应式布局。
动态样式：通过JavaScript动态修改变量值，实现动态的样式变化。

问题及解决方法

如果你在使用CSS变量更改字体大小时，某些字段没有反映出来，可能是以下几个原因：

变量未定义或拼写错误：确保变量已经定义并且拼写正确。
作用域问题：确保变量在当前作用域内可用。
浏览器兼容性：确保浏览器支持CSS变量。

示例代码

假设你有以下HTML和CSS代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Variables Example</title>
  <style>
    :root {
      --main-font-size: 16px;
    }

    .some-class {
      font-size: var(--main-font-size);
    }

    .another-class {
      font-size: var(--main-font-size); /* 确保变量拼写正确 */
    }
  </style>
</head>
<body>
  <div class="some-class">This text should change size.</div>
  <div class="another-class">This text should also change size.</div>
</body>
</html>

如果.another-class没有反映出来，检查以下几点：

确保变量定义在:root中：
确保变量定义在:root中：
确保变量拼写正确：
确保变量拼写正确：
检查浏览器兼容性：确保你使用的浏览器支持CSS变量。大多数现代浏览器都支持CSS变量，但一些旧版本的浏览器可能不支持。

参考链接

通过以上步骤，你应该能够解决CSS变量在某些字段中没有反映出来的问题。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

AngularDart4.0 指南- 表单顶

使用跟踪控件状态的特殊CSS类提供视觉反馈。向用户显示验证错误并启用/禁用表单控件。使用模板引用变量在HTML元素之间共享信息。您可以在Plunker中运行实例（查看源代码）并从那里下载代码。...这个表格中的三个字段中的两个是必需的。遵循材料设计准则，必填字段带有星号（*）。如果您删除了英雄名称，表单将以吸引人注意的风格显示验证错误： ?...Angular可不使用Bootstrap类或任何外部库的样式。 Angular的应用程序可以使用任何CSS库或不使用。...靠近表单顶部的诊断确认所有的更改都反映在model中。从模板中删除诊断绑定，因为它已经达到了目的。根据控制状态给出视觉反馈使用CSS和类绑定，您可以更改表单控件的外观以反映其状态。...使用name和类绑定来有条件地分配适当的表单有效性类。临时将另一个名为spy的模板引用变量添加到Name 标记，并使用它显示输入的CSS类。

17.5K3 0

IntelliJ IDEA - 2022.2 正式发布！众多特性解读！

全局更改字体大小的键盘快捷键有一个新的键盘快捷键可以更改编辑器中各处的字体大小。要增加字体大小，请按⌃⇧Period。要减小它，请按⌃⇧Comma。...当您想要更改检查突出显示样式时，可以使用新的“编辑器中的突出显示”下拉菜单进行更改，该菜单可以方便地显示所有可用选项。...IDE 现在可以在模式变量隐藏字段时向您发出警告，并捕获无意义Objects.requireNonNullElse的调用。...本地和 CI 构建现在都使用项目设置中声明的 Kotlin 编译器版本运行。此更改消除了以前由于捆绑编译器版本与项目构建文件中定义的版本不匹配而出现的本地构建和 CI 构建之间的不一致。...Web开发支持 Angular 独立组件我们一直在积极致力于 IntelliJ IDEA 2022.2 中对 Angular 14 的支持。

5.3K4 0

Angular的12个经典问题，看看你能答对几个？（文末附带Angular测试）

@angular/core会创建组件，渲染它，创建并呈现它的后代。当@angular/core的数据绑定属性更改时，处理就会更改，在从DOM中删除其模板之前，就会销毁掉它。...例如，ngOnint界面的OnInit方法，这个方法必须在组件中实现。一部分事件适用于组件/指令，而少数事件只适用于组件。...在Angular2中，组件中发生的任何改变总是从当前组件传播到其所有子组件中。如果一个子组件的更改需要反映到其父组件的层次结构中，我们可以通过使用事件发射器api来发出事件。...这通常用在setter中，当类中的值被更改完成时。可以通过模块的任何一个组件，使用订阅方法来实现事件发射的订阅。...缺点：仅适用于HTML和CSS，其它文件类型需要前面的构建步骤没有watch模式，必须手动完成（bin / ngc-watch.js）并编译所有文件需要维护AOT版本的bootstrap文件（使用

17.4K8 0

Angular、React 和 Vue 三大框架，Web 开发该如何选择？

任何 Vue 应用程序都是使用 HTML、CSS 和 JavaScript 编写的——熟悉这些工具就可以立即投入工作。...你可以继续使用 Bootstrap 或 Bulma 这样的 CSS 框架，保留为јQuery 或 Backbone 编写的组件，集成你最喜欢的库执行 HTTP 请求，或使用 Promise 对象。...图片来源：https://www.madewithangular.com/ Angular 借鉴了服务器端开发中的一些最佳特性，并用它们来扩展浏览器中的 HTML 标记。...Angular 功能极多，如果需要额外的东西，可以连接第三方模块。 Vue.js VS React：双向数据绑定在 Vue 中，你可以轻松地将组件变量绑定到表单字段。...当你更改变量时，表单字段会更新，当用户更改表单字段时，组件变量也会更新。这比编写 React 中的事件处理程序要容易得多。

1.7K3 0

「译」如何编写 React 应用程序的样式

由于它未能准确反映设计意图，不同的人可能会在不适当的地方重用它。.text-box.text-box-highlited { // ...}通过这个更改，我们明确了该类应在何处使用。...样式不足如果元素的类不是设计为可重用的，你会发现它的某些样式可能来自其父级，例如间距、字体或颜色。这意味着我们可以重用 CSS 的“一些”，但随后我们必须在我们自己的类中复制其余的。...在现代浏览器中，我们可以使用 CSS 变量来定义这些值。...CSS变量，我们从应用程序中删除了大量的决策和论证燃料。...影响组件样式的道具将反映为对组件实用程序类的更改。因此，在 className props 中内联条件是执行此操作的最简单方法。

1021 0

angular面试题及答案_angular面试

用户未被授权访问其他人的数据，他/她被授权访问某些数据。 16. AOT编译和JIT编译？ Just-In-Time (JIT) 生成的JS代码，在浏览器中进行。...： – 浏览器下载js代码 – angular启动，在浏览器中开始JIT的编译过程 – 渲染页面 Ahead-of-Time（AOT...此功能用于更改模板上的输出;比如将字符串更改为大写并在模板上显示它。它还可以相应地更改日期格式。...angular路由器使用base href 作为组件、模板的基地址，开发期间，通常会在index.html所在目录中启动服务器，所以这个目录就是根目录，所以可以在index.html 的顶部添加使用场景 constructor 中不适合进行任何和组件通信类似的复杂操作，一般在constructor中进行一些简单的初始化操作，比如依赖注入、变量初始化等。

11.3K12 0

Angular10配置webpack打包「详细教程」

比如全局是否使用单引号，变量命名语法，每行最大字段数等等应用项目文件 CLI 命令 ng new my-app 会默认创建名为 “my-app” 的工作空间文件夹，并在 src/ 文件夹下为工作空间顶层的根应用生成一个新的应用骨架...polyfills.ts 为浏览器支持提供了腻子（polyfill）脚本。 styles.sass 列出为项目提供样式的 CSS 文件。该扩展还反映了你为该项目配置的样式预处理器。...2.分离第三方库要将第三方库分离出来，我们需要调整配置文件，设置 chunks: 'all'，即表示让所有加载类型的模块在某些条件下都能打包。...这里，笔者还把项目中使用到的moment、handsontable、angular库单独分离出来了。...需要注意的是，默认angular-cli打包生成的入口文件也被配置成了index.html，所以我们需要更改angular.jaon文件中的配置。

5.1K2 0

浏览器的回流与重绘 (Reflow & Repaint)

回流当 Render Tree 中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。...页面首次渲染浏览器窗口大小发生改变元素尺寸或位置发生改变元素内容变化（文字数量或图片大小等等）元素字体大小变化添加或者删除可见的 DOM 元素激活 CSS 伪类（例如：:hover）查询某些属性或调用某些方法...避免使用 CSS 表达式（例如：calc()）。 Javascript 避免频繁操作样式,最好一次性重写 style 属性,或者将样式列表定义为 class 并一次性更改 class 属性。...避免频繁操作 DOM,创建一个 documentFragment,在它上面应用所有 DOM 操作,最后再把它添加到文档中。也可以先为元素设置 display: none,操作结束后再把它显示出来。...避免频繁读取会引发回流/重绘的属性,如果确实需要多次使用,就用一个变量缓存起来。

8151 0

AngularDart4.0 指南- 模板语法二顶

有关更多信息，请参阅Dart语言导览中的布尔值。 Dart 2.0注意：检查模式不会在飞镖2.0。有关更多信息，请参阅Dart 2.0更新。...下一个示例捕获名为i的变量中的索引，并使用像这样的英雄名称来显示它。...switch指令也适用于原生元素和Web组件。例如，您可以使用以下代替switch选项。... 模板引用变量（#var）模板引用变量通常是对模板内DOM元素的引用。它也可以是对Angular组件或指令或Web组件的引用。使用hash符号（＃）来声明一个引用变量。...不要在同一模板中多次定义相同的变量名称。运行时值将是不可预知的。你可以使用ref-前缀替代＃。本示例将fax变量声明为ref-fax，而不是#fax。

30K2 0

前端人员该怎么面试经典Angular面试题有哪些

当@angular/core的数据绑定属性更改时，处理就会更改，在从DOM中删除其模板之前，就会销毁掉它。...Angular提供了一组生命周期hooks(特殊事件)，可以被分接到生命周期中，并在需要时执行操作。构造函数会在所有生命周期事件之前执行。每个接口都有一个前缀为ng的hook方法。...如果一个子组件的更改需要反映到其父组件的层次结构中，我们可以通过使用事件发射器api来发出事件。...它如何帮助Angular 2更好地执行? Shadow DOM是HTML规范的一部分，它允许开发人员封装自己的HTML标记，CSS样式和JavaScript。...因为它缓存的DOM将在浏览器中呈现得更快，并提供更好的性能。此外，还可以相对很好地管理shadow DOM，同时检测Angular 2应用的改变，并且可以有效地管理视图的重新绘制。

4.1K8 0

AngularDart4.0 英雄之旅-教程-07路由顶

在进行更改时，请通过重新加载浏览器窗口来保持运行。行动计划计划如下：将AppComponent转换为仅处理导航的应用程序外壳程序。...将模板URL更改为heroes_component.html，并将样式文件更改为heroes_component.css。...了解路由章节中的链接参数列表。刷新浏览器，浏览器显示应用标题和英雄链接，但不是英雄列表。点击英雄导航链接。地址栏更新为 /#/heroes（或同等/#heroes），英雄列表显示。...在构造函数中注入HeroService，并将其保存在一个专用的_heroService字段中。调用服务来获取Angular ngOnInit（）生命周期钩子中的英雄。.../angular_router.dart'; import 'hero_service.dart'; 将RouteParams，HeroService和Location服务注入到构造函数中，并将其值保存在私有字段中

17.6K3 0

IntelliJ IDEA 2022.2 正式发布，功能真心强大！

通过它运行和调试当前打开的文件时，IDE 将自动使用最适合该文件的运行配置类型。全局更改字体大小的键盘快捷键新增的键盘快捷键可以更改编辑器中所有位置的字体大小。要增大字体，请按 ⌃⇧Period。...如需更改检查高亮显示样式，可以使用新的 Highlighting in editor（编辑器中的高亮显示）下拉菜单进行设置，该菜单清楚显示了所有可用选项。...助记书签的新 Description（描述）字段 Add Mnemonic Bookmark（添加助记书签）对话框现已升级，增加了 Description（描述）字段，现在可以使用该字段直接向书签添加描述...IDE 现在可以在模式变量隐藏字段时发出警告，还会捕获无意义的 Objects.requireNonNullElse 调用。...点击引用即可在 Web 浏览器中打开相应的 Docker Hub URL。

2.4K1 0

面试题整理｜45个CSS面试题

例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。...Q34、解释为什么选择有时候使用translate（）而不是绝对定位？ translate是CSS transform的值。更改变换或不透明度不会触发浏览器重排或重新绘制，但会触发合成。...而更改绝对定位会触发回流。变换使浏览器为该元素创建一个GPU层，但是更改绝对定位属性将使用CPU。因此，translate（）效率更高，并且可以缩短绘制时间，从而使动画更流畅。...使网站具有响应能力意味着某些元素将通过CSS媒体查询根据设备的屏幕尺寸（通常是视口宽度）来调整其大小或其他功能，从而做出响应。例如，在较小的设备上减小字体大小。...浏览器供应商有时会在实验性或非标准CSS属性和JavaScript API中添加前缀，因此，从理论上讲，开发人员可以尝试新的想法，同时从理论上防止在标准化过程中依赖他们的实验，然后破坏Web开发人员的代码

4.5K3 0

为什么你永远不应该在CSS中使用px来设置字体大小

外部链接应该总是在新标签页中打开" 就是一个很好的例子。CSS Tricks 在将近十年前就对此进行了详细的解释（简而言之：大多数情况下是错误的），但它似乎仍然在某些角落中存在。...如果我们在上面的CSS中将 em 更改为 rem ，那么所有段落标签的字体大小将始终是浏览器的默认大小，无论它们在哪里。 font-size: 1em 等同于 font-size: 100% 。...因为边框宽度和边距都是在 px 中设置的，它们保持不变，不会缩放。但是请注意，如果将CSS中的 px 更改为相应的 rem 值，会发现线条和间距确实变大了！...我不会在任何地方使用 px ，除非是明确不想随字体大小缩放的设计元素。永远不要用 px 单位中设置 font-size ，除非你非常确定你在做什么，它会如何行动，以及在你这样做时它是否仍然可访问。...简而言之：在媒体查询中，除非您确定自己知道在浏览器中设置自己的字体大小会对用户产生什么影响，否则一定要避免使用 px 。

1.8K2 0

AngularDart4.0 英雄之旅-教程-04明细顶

当您进行更改时，请通过重新加载浏览器窗口来保持运行。应用程序重构在添加新功能之前，您可以从应用程序重构中受益。应用模板文件您将对应用程序组件的模板进行多次更新。...应用hero字段将hero字段替换为AppComponent中的公共heros字段，并使用模拟英雄进行初始化（不要忘记导入）：lib/app_component.dart (heroes) import...，英雄列表将显示出来。...而应将样式放在.css文件中，并使用@Component的styleUrls参数引用该文件。按照惯例，组件的CSS和Dart文件的名称具有相同的基础命名前缀（app_component）。...您了解了如何在组件模板中使用核心指令ngIf和ngFor。您在CSS文件中定义了样式，并使用它们来设置应用程序的样式。你的应用应该看起来像这个实例（查看源代码）。

3K3 0

Angular-Cli脚手架介绍、安装并搭建项目

执行以下命令，@angular/cli 会在当前目录下新建一个名称为 PROJECT-NAME 的文件夹，并自动安装好相应依赖。...、监视文件，并在这些文件发生更改时重建应用。...注意: 如果启动后出现 Error: spawn xxxx ENOENT 那么可能就是你环境变量没配好,或者是你刚下载了node配置了环境而没重启电脑 360游览器好像不支持使用Angular 谷歌我试了是支持的...安装组件# $ npm install ng-zorro-antd --save 引入样式# 使用全部组件样式# 该配置将包含组件库的全部样式，如果只想使用某些组件请查看使用特定组件样式配置。...在 angular.json 中引入了 { "styles": [ "node_modules/ng-zorro-antd/ng-zorro-antd.min.css" ] } 在 style.css

2K3 0

IT课程 CSS基础 022_文本、字体、链接

文本 CSS文本控制可以帮助我们更好地展示网页中文本的信息，并提高网页的视觉效果。缩进用于设置文本的首行缩进，适用于段落首行缩进的场景，避免在行内元素上使用。...justify-all（不太常见）：类似于 justify，但不仅仅在行末增加额外空白，而是在行首和行末均匀分布。 start：视浏览器的文本方向而定，表示文本在起始端（通常是左端）对齐。...; ">hello CSS hello CSS 效果：大小 CSS 中字体大小可以使用 font-size 属性来设置。...字体单位选择：使用相对单位（em、rem、%）可以更好地适应用户浏览器中设置的字体大小偏好，增加网站的可访问性。行高设置：根据字体大小适当设置行高，以提高文本的可读性。...通常，行高可以设置为字体大小的 1.4 到 1.6 倍。粗细 CSS 中字体粗细可以使用 font-weight 属性来设置。 normal: 默认字体粗细。 bold: 加粗字体。

1151 0

Vue入门—常用指令详解

比较适用于移动端，轻量级的框架，文件小，运行速度快。最近，闲来无事，所以学习一下Vue这个流行的框架，以备后用。...一、指令 v-model 多用于表单元素实现双向数据绑定（同angular中的ng-model） v-for 格式： v-for=”字段名 in(of) 数组json” 循环数组或json(同angular...中的ng-repeat),需要注意从vue2开始取消了$index v-show 显示内容（同angular中的ng-show） v-hide 隐藏内容（同angular中的ng-hide） v-if...显示与隐藏（dom元素的删除添加同angular中的ng-if 默认值为false） v-else-if 必须和v-if连用 v-else 必须和v-if连用不能单独使用否则报错...的内容就会在p标签内显示出来。

1.1K2 0

如何成为一名Web前端开发人员？入行学习完整指南

Firefox也取得了长足的进步，其中的一些好东西不在chrome浏览器中。两种浏览器都有出色的开发工具，可以对Web开发中的问题进行故障排除。终端：您将使用一些系统命令来使用CLI进行很多工作。...你可以使用变量，嵌套，条件语句来减少CSS的重复并提高其效率。你还可以为每个可重用组件创建单独的Saas文件。Sass确实节省了很多时间，所以你绝对应该在2020年学习它。...以下是你应该在javascript中涵盖的一些重要主题… JavaScript基础知识（变量，数据类型，函数，条件等） DOM（文档对象模型） JSON（JavaScript对象表示法）提取API（请求...了解如何使用浏览器开发工具。...在某些情况下，某些技术或某些语言可以与某些数据库配合使用。例如：在Mern堆栈中，M代表MongoDB，而在LAMP堆栈中M代表MySQL，但完全取决于您要为应用程序选择哪个数据库。

2.2K1 1

前端学习

一、html5 && css3 html5新增元素和标签结构 html5新增特性API css3新特性/动画 CSS 基础样式、规范总结 CSS reset CSS技术交流 bootstrap框架熟悉...MVVM 模块化自动化双向数据绑定语义化标签依赖注入　　包括的主要有　　1 angularjs模板　　视图和模板　　2 迭代器过滤　　控制器　　3 双向绑定　　输入框的任何更改会立即反映到模型变量...（一个方向），模型变量的任何更改都会立即反映到问候语文本中（另一方向）。　　...一旦模型状态发生改变，AngularJS会立即刷新反映在视图界面中，反之亦然。　　...的使用 3.bootstrap，移动Web、跨浏览器开发 4.react 5.Node.js 持续更新······ 如有其他资源或建议，欢迎留言交流~

2.3K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭