干货！web页面完美解决自适应的问题

最新推荐文章于 2024-08-08 13:55:38 发布

很有想法的小伙子

最新推荐文章于 2024-08-08 13:55:38 发布

阅读量1.2w

点赞数 6

分类专栏：前端文章标签： web页面自适应字体自适应

本文链接：https://blog.csdn.net/qq_40388552/article/details/84838474

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

版权声明：本文为章鱼哥原创文章，若要转载，请注明出处 https://blog.csdn.net/qq_40388552/article/details/84838474
前段时间做了一个大数据前端页面显示的项目，使用了如下的简单的方式来解决页面自适应的问题，码友们如果有更好的方法欢迎留言。

采用的方案核心的3个步骤

采用bootstrap的的网格系统来进行页面布局划分。要实现自己想要的页面效果就需要结合百分比和div嵌套来实现，这都是基础哈。
整个页面的宽度width和高度height都采用百分比的形式来设计，从一开始的html标签开始到body里面的内容层层递进都设置上百分比。
注意：当你发现对某个元素设置的百分比没有起作用时，这是因为百分比的大小是相对其父级元素宽高的大小，如最外层元素设置的百分比是对应屏幕而言的。
字体如何去做自适应我采用的是使用Css3的@media 查询，通过@media可以针对不同的屏幕尺寸设置不同的样式，我们这里对字体的样式进行修改，于是我在style标签中写了类似如下的一串代码，来改变body的字体大小,你也可以把它写成css文件然后引入到网页中。

  @media screen and (max-width: 1920px) {
   body { font-size: 16px;}
   }
    @media screen and (max-width: 1200px) {
   body { font-size: 14px;}
   }
    @media screen and (max-width: 1000px) {
   body { font-size: 12px;}
   }
    @media screen and (max-width: 800px) {
   body { font-size: 8px;}
   }
    @media screen and (max-width: 700px) {
   body { font-size: 7px;}
   }
    @media screen and (max-width: 600px) {
   body { font-size: 6px;}
   }

这个时候你会发现我们只是在不同尺寸大小的屏幕下修改标签的字体大小，其他地方的字体我们没有去设置，这里我找到一种比较好的方法，使得我们只需修改里面的字体大小,就可以实现整个网页字体大小的自适应，方法就是使用css 的em单位来对页面中所有的字体大小进行统一设置，em相对长度单位。相对于当前对象内文本的字体尺寸，如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 在标签中设置font-size后em就会以他作为标准，如font-size:16px;那么1em=16px，这时我们整个网页中其他的font-size就可以换算成多少em值如font-size:1em;、font-size:0.75em、font-size:2em等等。通过@media和em我们实现了字体的自适应。
注意：字体的大小px,尽量使用偶数，当然奇数也可以，最好不要使用小数，因为可能会导致字体渲染不均匀

通过这三步我们就实现了整个页面的自适应问题，当然不同尺寸大小的屏幕合适多少大小的字体，这需要自己结合实际情况来调试。