使用rem来计算html元素的字体大小的最佳方法是什么？
[英]What is the best way to calculate the font-size of html element while using the rem?
问题描述
I wanna use the responsive font size by using rem on my website. 
我想通过在我的网站上使用rem来使用自适应字体大小。
As we know, the rem is relative to font-size of the root element. 众所周知，rem与根元素的字体大小有关。 So I should set different font-size of the HTML element in different device. 因此，我应该在不同的设备中设置HTML元素的不同字体大小。
In my opinion, I think I should use something like a formula by using js/jquery to calculate the font-size and set it to the HTML element. 我认为，我应该使用类似公式的方法，即使用js / jquery计算字体大小并将其设置为HTML元素。 What's more, I am a beginner of front-end and I think the formula should relate to the width of the window but I am not sure about it. 而且，我是前端的初学者，我认为公式应该与窗口的宽度有关，但我不确定。
I googled and found almost nothing about this. 我在Google上搜索后发现几乎没有任何内容。 I wanna know what is the best way to do it? 我想知道最好的方法是什么？ Or if the rem is not the best way for it? 还是rem不是最好的方法？ Thank you. 谢谢。
2 个解决方案
解决方案1
1 2019-03-31 13:41:33
I prefer using responsive meta tags: 我更喜欢使用响应式元标记：
<meta name="viewport" content="width=device-width, initial-scale=1">
you can read about it on: meta tag 您可以在以下位置阅读有关它的信息： meta标签
font-size and meta viewport in a responsive design 响应式设计中的字体大小和元视口
解决方案2
1 已采纳 2019-03-31 13:58:45
@media only screen and (min-width: 900px) { body { font-size:48px } } @media only screen and (min-width: 600px) and (max-width: 900px) { body { font-size:36px } } @media only screen and (max-width: 600px) and (min-width: 300px) { body { font-size:18px } }
<body> Test </body>
I think it is a better approach to adjust your sizes depending on both height on weight of the screen. 我认为这是一种更好的方法，可根据屏幕高度和屏幕重量来调整尺寸。 Here is a sample which changes the font-size of the body dynamically. 这是一个示例，可以动态更改正文的字体大小。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.