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

时间:2013-02-25 12:51:25

标签: css mobile responsive-design font-size

我目前正在构建一个自适应网站,并使用EM单位进行字体大小,行高,填充等,以便在从桌面移动到平板电脑到移动设备时使调整大小任务更加顺畅。所以目前我的正文字体设置为100%桌面,然后我认为我会在平板电脑中放弃此%,然后再在移动设备中放弃。我的问题是,如果我不希望移动设备中的所有内容从100% to 80%调整大小,该怎么办?也许我只希望这发生在主体内容和标题上,最简单的方法是重新调整一些东西?我试过将移动断点内的主标题字体大小更改为%,但这似乎不正确。我只想更好地理解为每个视图调整字体大小的最佳方法。

1 个答案:

答案 0 :(得分:1)

只需定位使用的标签即可。

桌面

h1 { font-size:100%; }

移动

h1 { font-size:80%; }

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

如果您需要更具体的尝试添加类到标题的p标记,如果有某些您想要调整大小。

桌面

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

移动

h1.alt { width: 70%; } 

以上只会在应用了类alt的情况下改变H1。