网页移动端适配动态修改页面font-size
在做移动端的项目时，适配是第一步，最开始写移动端网页的时候学习Bootstrap响应式设计的做法，使用media标签写适配来改变font-size，于是便会有下面这种代码：
@media (max-width:992px){body,html{font-size:15px;}
}
@media (max-width:767px){body,html{font-size:20px;}
}
@media (max-width:414px){body,html{font-size:18px;}
}
@media (max-width:360px){body,html{font-size:16px;}
}
市场上各种屏幕的分辨率远不止这几个，所以这样写一方面是工作量很大很机械，另一方面是不够准确，但是media查询这种处理方式在处理PC端兼容移动端的时候还是很乐观的，有的小型网站为了节省成本便于维护就是采用的bootstrap这种做法，一个网页在pc端可能横排显示六个，但到了移动端就显示三个，这样更加美观，而如果直接修改body的font-size便是整体扩大或缩小，就达不到一套布局两种显示的效果。
如果是单纯只在移动端显示的页面，那么我们 动态修改页面body的font-size值 是最好的处理方法,目前淘宝移动端也是这么处理的。
在样式表里，我们设置width,font-size,border-width等一切以px为单位的属性，只需要按照设计稿标注的大小然后除以我们自定义的基数便好，为了换算方便，我习惯定义基数为100（下面js里设置的100），那么假设一个元素在设计稿标注上宽是200px，那么我们写width:2rem就OK（200/100=2）。下面是处理的步骤：
1.在页面引入"viewport"属性,这些属性可根据自己的需要修改
2.在
标签里引入动态修改font-size的代码，此段需要优先加载，以免页面布局错乱
最后效果图长这样：
附上效果图的源代码：
移动端适配动态修改页面font-size
新闻列表
德国iPhone禁售令的最新相关信息
今日热点2018-12-21RNG战胜EDG的最新相关信息RNG战胜EDG是怎么回事
今日热点2018-12-21德国iPhone禁售令的最新相关信息
今日热点2018-12-21RNG战胜EDG的最新相关信息RNG战胜EDG是怎么回事
今日热点2018-12-21德国iPhone禁售令的最新相关信息
今日热点2018-12-21
移动端适配的方案有很多，下面是几篇讲解得很详细的博客，欢迎大家参考：
https://blog.csdn.net/ws379374000/article/details/78686101
https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html
原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！