移动端html字体大小自适应,【css】移动端响应式布局与响应式字体大小

前言：移动设备(手机、平板电脑等)，已经逐渐成为人们生活中必不可缺的物件了，这也意味着人们更多的用移动设备浏览网页。然而移动设备有着各式各样的分辨率与大小，这使用前端开发人员不得不去设配它们。

相关链接：【css】移动端自适应布局与字体大小自适应

前言二： 说到移动设备，一个不得不提就是viewport的设置了

其中：①、width=device-width：是设置可视区宽度等于设备宽度

②、initial-scale=1.0：初始化缩放比例

③、maximum-scale=1.0：最大可以放大的比例

④、minimum-scale=1.0：最小可以缩小的比例

⑤、user-scalable = 0： 是否允许用户缩放(1为true,0为false)

前言三： 说到移动设备，还有个不得不说的就是响应式了

html { font-size:100px; }

@media(max-width:540px){ html { font-size:84.375px; } } /*Android常用宽度*/

@media(max-width:480px){ html { font-size:75px; } }/*Android常用宽度*/

@media(max-width:414px){ html { font-size:64.69px; } } /*i6Plus,i7Plus宽度*/

@media(max-width:375px){ html { font-size:58.59px; } }/*i6,i7宽度*/

@media(max-width:360px){ html { font-size:56.25px; } }/*Android常用宽度*/

@media(max-width:320px){ html { font-size:50px; } }/*i5宽度*/

代码中的效果：

当设备、浏览器宽度大小(小于等于)540px的时候，html的font-size就不再是100px，而是84.375px。

同样的当设备、浏览器宽度大小(小于等于)480px的时候，html的font-size就不再是84.375px，而是75px。

以此类推，我们可以根据不同的设备、浏览器宽度大