黑马程序员技术交流社区
标题:
【上海校区】关于移动端简单适配字体大小 rem + flex布局
[打印本页]
作者:
不二晨
时间:
2018-7-4 09:44
标题:
【上海校区】关于移动端简单适配字体大小 rem + flex布局
本帖最后由 不二晨 于 2018-7-4 09:46 编辑
采用flex+
rem
的方式进行布局和完成移动端的适配
rem
（font
size
of the root element）是相对长度单位。相对于根元素（即html元素）font-
size
计算值的倍数。
适配原理：将px替换成
rem
，动态修改html的font-
size
适配。
它可以很好的根据根元素的字体大小来进行变化，从而达到各种屏幕基本一直的效果体验三行js代码简单适配
//得到手机屏幕的宽度
let
htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
// 但页面很大的时候，我们作的移动适配方案会呈现很大的字体，
//这不是我们想要的。所以加一个判断，解决页面字体过大的问题。
if
(htmlWidth >
750
){htmlWidth=
750
}
//得到html的Dom元素
let
htmlDom = document.getElementsByTagName(
'html'
)[
0
];
//设置根元素字体大小
htmlDom.style.fontSize= htmlWidth/
20
+
'px'
;
【转载地址】：
https://blog.csdn.net/qq_36407748/article/details/80863889
作者:
吴琼老师
时间:
2018-7-12 16:38
作者:
不二晨
时间:
2018-7-12 17:10
赞一个
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2
