H5响应式开发之首页内容（四）

网页字体自适应调整

在之前我们的主页已经编写完成，但是作为自适应的页面，当我们的页面缩小时，在不同的设备上字体的大小因为样式的原因，并没有发生改变，还是PC端字体的大小，为了适应不同设备的尺寸，我们需要对页面字体的大小进行判断。

@media：

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

/*小屏幕 大于等于768px*/ @media (min-width: 768px) { .tab-h2{ font-size: 26px; } .tab-p{ font-size: 16px; } .text h3{ font-size: 22px; } .text p{ font-size: 16px; } } /*中等屏幕 大于等于992px*/ @media (min-width: 992px) { .tab-h2{ font-size: 28px; } .tab-p{ font-size: 17px; } .text h3{ font-size: 24px; } .text p{ font-size: 18px; } } /*大屏幕 大于等于1200px*/ @media (min-width: 1200px) { .tab-h2{ font-size: 30px; } .tab-p{ font-size: 18px; } .text h3{ font-size: 26px; } .text p{ font-size: 19px; } }

我们上面对屏幕分辨率在大于768px.大于992px和大于1200px时候字体段落的大小进行调整。这也是为什么在现在这个时代同一个网页排版在不同的设备上都能够去恰当的显示的原因，当我们的屏幕分辨率不同时，我的网页的字体大小也会跟着不同。

---

本章难点

1. 针对不同的屏幕分辨率，设置不同的字体大小

2. @media的使用