可以使用CSS中的媒体查询来响应字体颜色和字号大小。以下是一个示例：
/* 默认字体样式 */
p {
font-size: 16px;
color: #333;
}
/* 在小屏幕上改变字体样式 */
@media (max-width: 768px) {
p {
font-size: 14px;
color: #666;
}
}
/* 在大屏幕上改变字体样式 */
@media (min-width: 1200px) {
p {
font-size: 18px;
color: #111;
}
}在上面的示例中，我们使用媒体查询来改变<p>元素的字体大小和颜色。在默认情况下，字体大小为16px，颜色为#333。在小屏幕（最大宽度为768px）上，字体大小减小到14px，颜色变为#666。在大屏幕（最小宽度为1200px）上，字体大小增加到18px，颜色变为#111。
这里是一个更完整的示例，包括使用<h3>和<pre>标签，并对关键词进行高亮：
/* 默认字体样式 */
p {
font-size: 16px;
color: #333;
}
h3 {
font-size: 20px;
color: #666;
}
pre {
background-color: #f5f5f5;
color: #333;
padding: 10px;
}
/* 在小屏幕上改变字体样式 */
@media (max-width: 768px) {
p {
font-size: 14px;
color: #666;
}
h3 {
font-size: 18px;
color: #333;
}
pre {
font-size: 14px;
}
}
/* 在大屏幕上改变字体样式 */
@media (min-width: 1200px) {
p {
font-size: 18px;
color: #111;
}
h3 {
font-size: 24px;
color: #111;
}
pre {
font-size: 18px;
}
}
/* 高亮关键词 */
.highlight {
background-color: yellow;
}在上面的示例中，我们还添加了一个.highlight类来高亮关键词。您可以在HTML中使用这个类来标记需要高亮的文本：
<p>这是一个普通的段落，包含一些 <span class="highlight">关键词</span>。</p>
<h3>这是一个标题，包含一些 <span class="highlight">关键词</span>。</h3>
<pre>
这是一个代码块，包含一些 <span class="highlight">关键词</span>。
</pre>