Home page content of H5 responsive development (4)

Adaptive adjustment of web font

Our homepage has been written before, but as an adaptive page, when our page is reduced, in The font size on different devices does not change due to style reasons. It is still the size of the PC font. In order to adapt to the sizes of different devices, we need to judge the size of the page font.

@media:

Using the @media query, you can define different styles for different media types.

@media can set different styles for different screen sizes, especially if you need to set up a responsive page, @media is very useful.

When you reset the browser size, the page will also be re-rendered based on the width and height of the browser.

/*小屏幕 大于等于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; } }

We have adjusted the size of font paragraphs when the screen resolution is greater than 768px, greater than 992px and greater than 1200px. This is also the reason why in this era, the same web page layout can be displayed appropriately on different devices. When our screen resolutions are different, the font size of my web page will also be different.


Difficulties of this chapter

  1. Set different font sizes for different screen resolutions

  2. @media use

Continuing Learning
||
PHP中文网

为什么选择在PHP中文网学习编程?

PHP中文网有着海量的编程资源,在线答疑,专人解惑。

学习质量

其他教育视频网站的资源杂乱,内容缺失,课程不完整,自学难度大。

PHP中文网的课程及时的更新,让我们自学的学员有更好的路线。

师资力量

其他教育视频网站的资源杂乱,内容缺失,课程不完整,自学难度大。

PHP中文网的课程及时的更新,让我们自学的学员有更好的路线。

学习安排

其他教育视频网站的资源杂乱,内容缺失,课程不完整,自学难度大。

PHP中文网的课程及时的更新,让我们自学的学员有更好的路线。

服务团队

其他教育视频网站的资源杂乱,内容缺失,课程不完整,自学难度大。

PHP中文网的课程及时的更新,让我们自学的学员有更好的路线。

师资力量

PHP中文网的课程及时的更新,让我们自学的学员有更好的路线。

学习体系

PHP中文网的课程及时的更新,让我们自学的学员有更好的路线。

师资力量

PHP中文网的课程及时的更新,让我们自学的学员有更好的路线。

学习体系

PHP中文网的课程及时的更新,让我们自学的学员有更好的路线。

自学路线 | 合作相关 | 投诉建议

2016 PHP中文网企业网站.powered by Bootstrap.

submit Reset Code
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!