这篇文章主要为大家展示了HTML中移动端最佳字体大小设置的方法，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带大家一起来研究并学习一下“HTML中移动端最佳字体大小设置的方法”这篇文章吧。
html的全称为超文本标记语言，它是一种标记语言，包含了一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体，html文本是由html命令组成的描述性文本，html命令可以说明文字，图形、动画、声音、表格、链接等，主要和css+js配合使用并构建优雅的前端网页。
移动端css单位该怎么用。px肯定是不行的，手机有那么多的尺寸，要写多少@media。最常用的有两个单位：
1、rem
rem是相对于根元素的大小设置的，网页中的根元素指的是html我们通过设置html的字体大小就可以控制rem的大小。举个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
html{
font-size:20px; }
p{
width: 600px;
overflow: hidden;
line-height: 1;
font-size: 1rem; }
</style></head> <body>
<p> 是啊啊啊
</p></body></html>当你在html根元素设置 font-size:20px;的时候，1rem = 20px；同理，如果设置10px，那么1 rem = 10px；rem不只是可以用于字体大小，也就可用于width等长度单位。这时你会问，这样怎么做到响应式呢？所以就要结合@media来设置html根元素的大小，这样页面里所有对应的rem单位就会跟着根元素走，例如：
html {
font-size : 20px;
}
@media only screen and (min-width: 401px){
html {
font-size: 25px !important;
}
}
@media only screen and (min-width: 428px){
html {
font-size: 26.75px !important;
}
}
@media only screen and (min-width: 481px){
html {
font-size: 30px !important;
}
}
@media only screen and (min-width: 569px){
html {
font-size: 35px !important;
}
}
@media only screen and (min-width: 641px){
html {
font-size: 40px !important;
}
}
如果你不设置html的字体大小，就会使用16px作为基数来。这个比px的好处显而易见，你不需要对每个元素就进行一次@media，只需要对html根元素做不同尺寸的设置就可以了，兼容性也很好。
2、vw、vh
rem单位虽然依旧很简单了，但是依旧不够简单粗暴，还有一种更简单的，就是vw、vh单位。
相对于视口的宽度。视口被均分为100单位的vw。比如，1vw就相当于屏幕宽度的1%。直接上例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
p{
width: 20vh;
height: 30vw;
line-height: 1;
font-size: 1vw;
background: #FC8B53;
color: #fff;
}
</style>
</head>
<body>
<p>
是啊啊啊
</p>
</body>
</html>这么设置之后，p的宽度就随着屏幕高度的变化而变化，它的高度就随着屏幕宽度的变化而变化，字体的大小也随着屏幕变化。我这么搞是为了更直观的表示vw这个单位的灵活。再也不用写一堆连七八糟的@media了。
怎么个灵活法呢？比如你设置一个p的宽度是屏幕的50%，那么width就是50vw。这时候，你要设置它的高度是它的宽度的50%，如果不用vw咋办？你只能用js去算。但是用了vw就直接设置成25vw就搞定了。
但是这个有些兼容性的问题，ios是没有问题的，安卓手机自带浏览器要安卓系统4.4以上才行，别的浏览器都是可以的，只有自带的有问题。 不过现在谁还用安卓自带的浏览器去耍呢，在哪儿都找不到。所以，直接用vw、vh吧。
以上就是关于“HTML中移动端最佳字体大小设置的方法”的内容，如果改文章对你有所帮助并觉得写得不错，劳请分享给你的好友一起学习新知识，若想了解更多相关知识内容，请多多关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
