Question

我必须实现一个使用rem单元的第三方css文件。

仅在网站的特定部分中使用。

是否可以仅为容器div而非整个站点设置rem的基础？

我知道em可以做到这一点，但我希望保持CSS文件不变

Answer 1

简而言之：这是不可能的。

1 rem定义为root element的1 x计算字体大小。在HTML页面中，根元素是<html>元素，每个窗口只能有一个。 W3C standard是一本不错的书：

零售单位

等于根元素上的font-size的计算值。   如果用于根元素的font-size属性或没有根元素的文档中，则1rem等于font-size属性的初始值。

您应该承担修改CSS样式表并将其改编到自己的站点的任务，因为从那时起，您就知道它会按需工作。

Answer 2

如果您将将使用第三方CSS的容器包装在<iframe> element中，则可以这样做。 iframe使用其自己的根元素创建一个新的浏览上下文，因此rem相对于该根元素的字体大小，而不是您的顶级根元素。

index.html

…
<iframe id="that-section" src="page-section-using-third-party-css.html"></iframe>
…

page-section-using-third-party-css.html

<html>
<head>
  <link rel="stylesheet" href="third-party-styles.css">
  <style>
    /* modify the third-party CSS here if you want */
  </style>
</head>
<body>
  …
</body>
</html>

这确实具有缺点，您必须将页面的包含部分移至其自己的HTML文件。页面的该部分加载速度也将变慢，因为必须为此请求额外的HTTP请求。

将本地库用于物料单位

2 个答案: