css - 在桌面、平板电脑和移动视图的响应式构建中使用 EM 单元，但仅限于某些元素

Question

我目前正在构建一个响应式站点，并已将 EM 单元用于字体大小、行高、填充等，以便在从桌面移动到平板电脑再到移动设备时使调整大小任务更顺畅。所以目前我的正文字体设置100%为桌面，然后我想我会%在平板电脑中删除它，然后在移动设备中再次删除。我的问题是，如果我不希望移动设备中的所有内容都调整大小100% to 80%怎么办？也许我只希望这发生在主体内容和标题上，调整某些内容的最佳方法是什么？例如，我尝试将移动断点内的主标题字体大小更改为 % ，但这似乎不正确。我只是想更好地理解为每个视图调整字体大小的最佳方法。

Answer 1

只需针对使用的标签。

桌面

h1 { font-size:100%; }

移动的

h1 { font-size:80%; }

您只需要在媒体查询中包装 css 的每一部分。

如果您想要更具体，请尝试在标题的 p 标签中添加类（如果您想要调整某些标签的大小）。

桌面

h1, h1.alt { width:100%; } 

移动的

h1.alt { width: 70%; } 

以上只会改变 H1 的类 alt 应用于它们。