Question

我注意到，有些网页适合移动设备。我知道如何为手机等进行元素定位。我的问题是字体。那些移动设备，具有相当高的屏幕分辨率。因为屏幕很小，字体太小了。

我可以在较小的屏幕上以某种方式显示更大的字体吗？

Answer 1

在这种情况下，您必须以视网膜显示为目标。有不同的方法可以解决这个问题。很可能你正在做一个完全响应的网站，所以我建议你做一个媒体查询来定位视网膜＆＃34; hi-res＆＃34;并设置你的字体大小，边距等。

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}

来源：css-tricks.com

Answer 2

您可以使用媒体查询根据当前屏幕的不同宽度更改字体大小。

@media only screen and (max-width: 768px) {
   style-element {
      font-size: 20px;
   }
}

@media only screen and (max-width: 320px) {
   style-element {
     font-size: 10px;
   }
}

看看这些链接：

http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

http://css-tricks.com/css-media-queries/

Answer 3

此媒体查询不取决于移动分辨率。这取决于设备宽度假设iphone宽度垂直320px，水平480px。让我们试试这段代码

假设你有一个班级

 .header{
    font-size:30px;        
 }

适用于手机
我认为你的移动宽度是360px * 640px 所以试试吧

 @media screen and (max-width: 360px) {
   .header{
       font-size:25px;
   }        
 }

 @media screen and (max-width: 640px) {
   .header{
       font-size:25px;
   }

CSS适合移动设备/较小屏幕的字体大小

3 个答案: