标签：字体大小 适配 js html rem 屏幕 font
什么是移动端适配
在制作webapp时，一个很关键的问题就是适配各种机型不同屏幕的大小，让每种机型上的布局看起来都尽量一样。
也就是说用同一套代码在不同分辨率的手机上跑时，页面元素间的间距、留白，以及图片大小会随着变化，在比例上跟设计稿一致。
没有实现适配时，不同屏幕大小中的高度、宽度、字体大小是一样的,如下图所示:
常见的移动端适配方法
适配方案有很多种，常见的方法有以下几种：
- 固定高度，宽度百分比：这种方法只适合简单、要求不高的webApp，几乎达不到大型项目的要求，属于过时的方法。
- Media Query（媒体查询）：现在比较主流的适配方案，比如常用的样式框架Bootstrap就是用这种方法，它能完成大部分项目需求，但是编写过于复杂。
- flex布局：主流的布局方式，不仅适用于移动Web，网页上也表现良好，这也是现在工作中用的最多的布局方式，因此我们的项目尽量采用flex+rem的方式进行布局和完成移动端的适配。
rem适配原理
rem是相对长度单位，可以做到一样的取值，在不同尺寸的屏幕上的大小按比例缩放。
rem的定义：rem（font size of the root element）是相对于根元素（即html元素）font-size计算值的倍数。
例如html标签设置font-size:16px，同时div设置width:1.2rem。那么这个div的宽度就是1.2rem=16px*1.2=19.2px。
因此这种方法的适配原理是：根据不同屏幕的宽度，以相同的比例动态修改html的font-size适配，并将px替换成rem，它可以很好的根据根元素的字体大小来进行变化，从而达到各种屏幕基本一直的效果体验。
JS控制适配屏幕
明白了REM的原理后，我们就可以使用这个特点来进行适应布局了，这也是现在比较主流的移动端web适配方案。
//获得屏幕大小
let htmlwidth = document.documentElement.clientWidth || document.body.clientWidth; //浏览器兼容
console.log("屏幕宽度："+htmlwidth) //iphone5:320 iphone6:375
//获得html DOM元素
let htmlDom = document.getElementsByTagName('html')[0];
//给DOM元素设置样式
htmlDom.style.fontSize = htmlwidth/20 + 'px';
//以iphone5为基础 iphone5默认字体大小为16px 320/16=20 即1rem字体大小是屏幕宽度的1/20
设置好rem后,实现的样式如下:
大功告成
标签：字体大小,适配,js,html,rem,屏幕,font 来源： https://www.cnblogs.com/guozhiqiang/p/16034042.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。