移动端字体设置rem。和兼容。_网页兼容移动端字体大小-优快云博客

本文探讨了在移动端开发中，字体单位px与rem的选择依据。针对不同屏幕尺寸的设备，介绍了如何通过rem实现响应式布局，并提供了具体的实现方案及示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

移动端字体单位font-size选择px还是rem？

一：做少部分手机适配可以用px。

二：当要适配各种手机端设备时用rem。

*二：

1.使用rem来设置Web页面的字体大小；

2.rem是相对于根元素<html>；

3.rem能等比例适配所有屏幕

4.在根元素<html>中定义了一个基本字体大小为62.5%（也就是10px。设置这个值主要方便计算，如果没有

设置，将是以“16px”为基准）；

引入css代码如下：

html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}

@media screen and (min-width:800px){html{font-size:25px}}

***1rem=100px；

二：兼容移动设备；

插入js文件 autoFontsize.min.js

(function(d,c){var e=d.documentElement,b="orientationchange" in window?"orientationchange":"resize",a=function(){var f=e.clientWidth;if(!f){return}if(f>640){f=640}e.style.fontSize=100*(f/640)+"px"};if(!d.addEventListener){return}c.addEventListener(b,a,false);d.addEventListener("DOMContentLoaded",a,false)})(document,window);