调整字体大小以适合网站上的当前屏幕大小
[英]Resizing font to fit the current screen size on a website
问题描述
If I have a font set to a particular size for a desktop screen, can I reduce it using CSS3 @media Rule to also fit well in Mobile devices? 
如果我将台式机屏幕的字体设置为特定大小，是否可以使用CSS3 @media Rule缩小字体以使其同样适合于移动设备？
I have this line of code below: 我下面有这行代码：
<style>
@media only screen and (min-device-width: 150px) {
.log {font-size: 10px}
}
</style>
<body>
<div class="log" style="font-size: 35px;">
HEADER TEXT<br />
</div>
</body>
But it is not responsive when I open the site on my mobile device!!! 但是当我在移动设备上打开网站时，它没有响应！！！ What am I doing wrong??? 我究竟做错了什么？？？
3 个解决方案
解决方案1
0 已采纳 2017-11-17 12:38:06
You have set the media query wrong. 您将媒体查询设置为错误。 It specifies font-size to devices with width higher than 150px. 它为宽度大于150px的设备指定字体大小。 You should use max-width in your media query. 您应该在媒体查询中使用max-width 。 What that does is applies the desired css to device up to that width. 所要做的就是将所需的CSS应用于该宽度的设备。 For example : 例如 ：
@media only screen and (max-device-width: 920px) {
.log {font-size: 10px}
}
This will apply font-size: 10px to devices with width below 920px. 这会将font-size: 10px应用于宽度小于920px的设备。 And using inline styles will override css from your css file or style tag. 并且使用内联样式将覆盖css文件或style标签中的css。 So, avoid doing that and write all your css in css file or style tag. 因此，请避免这样做，并在css文件或样式标签中写入所有CSS。 I hope this answers your question. 我希望这回答了你的问题。
解决方案2
0 2017-11-17 12:39:22
The inline styling of the element is overriding the media query. 元素的内联样式将覆盖媒体查询。 Try this instead: 尝试以下方法：
.log { font-size: 35px; } @media only screen and (min-device-width: 150px) { .log {font-size: 10px} }
<body> <div class="log"> HEADER TEXT<br /> </div> </body>
解决方案3
0 2017-11-17 12:55:30
In CSS instead of px you can use vw (viewport width) or vh (viewport height) for font size 在CSS中，可以用vw （视口宽度）或vh （视口高度）代替px来设置字体大小
Open the code snippet in full page mode, and resize your browser, you will see that text size is the same according to screen size 在全页模式下打开代码段，并调整浏览器的大小，您将看到文本大小与屏幕大小相同
- First text will never fall in two lines, it will be smaller on smaller screen sizes 第一个文本永远不会落在两行中，在较小的屏幕上会变小
- Second text will change font size when you change your browser height 当您更改浏览器高度时，第二个文本将更改字体大小
Usually, the vw will do all you need 通常， vw会满足您的所有需求
<style> .view-width { font-size: 5vw } .view-height { font-size: 10vh } </style> <div class="view-width">Some text according to screen Width</div> <div class="view-height">Some text according to screen Height</div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.