- 1rem = 100px;字体使用rem也可以的;但是可惜的是无法无法设置font-min-size和font-max-size,在考虑的方法是rem设置宽高比来适应页面,em来对字体进行一个大小的自适应处理;
- 该方案只是依赖与浏览器页面的宽 1920(标准台式机显示器)~1366(14寸笔记本显示器),来进行页面的整体缩放;需要更好的方案来计算页面宽高的对比率来进行PC端的自适应,移动端的REM方案不用考虑太对,REM在移动端是更加成熟的。
- 需要注意window.screen.width是可以获取设备屏幕的宽高,而window.innerWidth和document.documentElement.width并不是屏幕,而是相对页面的宽高,比如PC端页面在375设备屏宽,可能是1200的值,而不是屏幕本身375的值,这个需要注意一下。
https://www.cnblogs.com/haojf/p/10287312.html
var deviceWidth
setHtmlFontSize()
if (window.addEventListener) {
window.addEventListener('resize', function () {
setHtmlFontSize()
}, false)
}
function setHtmlFontSize () {
deviceWidth = document.documentElement.clientWidth > 1920 ? 1920 : (document.documentElement.clientWidth < 1366 ?1366:document.documentElement.clientWidth);
document.getElementsByTagName('html')[0].style.cssText = 'font-size:' + deviceWidth / 19.20 + 'px !important'
}