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

Question

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

我能在小屏幕上用更大的字体吗？

Answer 1

在这种情况下，你必须瞄准视网膜显示器。有不同的方法来处理这个问题。最有可能的是，你正在做一个完全响应的网站，所以我建议只做一个媒体查询，目标视网膜“高分辨率”，并设置你的字体大小，边缘等。

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

来源：css-tricks.com

Answer 2

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

@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的宽度是垂直的320 on，水平的480 on。让我们试试这段代码

假设你有一个类

 .header{
    font-size:30px;        
 }

适用于移动

我想你的移动宽度是360 it *640 it，所以试试

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

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