根据屏幕大小调整文本大小

时间:2013-10-07 11:39:37

标签: javascript jquery html css

我的html中有不同的元素,文字大小不同。我想将它们设置为动态,以便为不同的屏幕尺寸显示不同的字体大小。

最好的方法是什么? 现在我这样做,但它使代码看起来很难看:

<script>
$(window).resize(function(){
$('#first').css('font-size',($(window).width()*0.2)+'px');
$('h2').css('font-size',($(window).width()*0.02)+'px');
$('h1').css('font-size',($(window).width()*0.03)+'px');

对于两个元素,它可以,但我还有更多。没有html / css / javascript的丰富经验所以这就是我想出来的。

因为我在学习,所以我想知道什么是最好的方式。

也许您有一些建议如何改进?

9 个答案:

答案 0 :(得分:21)

你可以使用新的css单位vw,vh(视口宽度/高度)。

这是一个有趣的css-tricks article,它向您展示如何将它们用于排版。

示例:(来自上文)

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

因此h1的视口宽度为字体大小的5.9%。等


话虽如此,以上述方式使用font-size的视口单元是有问题的,因为当视口宽度非常窄时 - 渲染的字体大小将变得太小,反之亦然。

为了解决这个问题,我建议使用名为Fluid Type AKA CSS Locks的技术。

  

CSS锁定是一种特定的CSS值计算,其中包括:

     
      
  • 有最小值和最大值,
  •   
  • 和两个断点(通常基于视口宽度),
  •   
  • 在这些断点之间,实际值从最小值到最大值呈线性变化。
  •   

From this article on CSS locks也详细解释了数学。)

因此,假设我们要应用上述技术,使得视口宽度为600px或更小时的最小字体大小为16px,并且在视口宽度为1200px时将线性增加,直到达到最大32px。 / p>

我们可以使用this SASS mixin为我们完成所有数学运算,以便CSS看起来像这样:

div {
  /* linearly increase the font-size from 16->32px 
     between a viewport width of 600px-> 1200px  */
  @include fluid-type(font-size, 600px, 1200px, 16px, 32px);
}
@media screen and (max-width: 600px) {
  div {
     font-size: 16px;
  }
}
@media screen and (min-width: 1200px) {
  div {
     font-size: 36px;
  }
}

// ----
// libsass (v3.3.6)
// ----

// =========================================================================
//
//  PRECISE CONTROL OVER RESPONSIVE TYPOGRAPHY FOR SASS
//  ---------------------------------------------------
//  Indrek Paas @indrekpaas
//
//  Inspired by Mike Riethmuller's Precise control over responsive typography
//  http://madebymike.com.au/writing/precise-control-responsive-typography/
//
//  `strip-unit()` function by Hugo Giraudel
//  
//  11.08.2016 Remove redundant `&` self-reference
//  31.03.2016 Remove redundant parenthesis from output
//  02.10.2015 Add support for multiple properties
//  24.04.2015 Initial release
//
// =========================================================================

@function strip-unit($value) {
  @return $value / ($value * 0 + 1);
}

@mixin fluid-type($properties, $min-vw, $max-vw, $min-value, $max-value) {
  @each $property in $properties {
    #{$property}: $min-value;
  }

  @media screen and (min-width: $min-vw) {
    @each $property in $properties {
      #{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)});
    }
  }

  @media screen and (min-width: $max-vw) {
    @each $property in $properties {
      #{$property}: $max-value;
    }
  }
}

// Usage:
// ======

// /* Single property */
// html {
//   @include fluid-type(font-size, 320px, 1366px, 14px, 18px);
// }

// /* Multiple properties with same values */
// h1 {
//   @include fluid-type(padding-bottom padding-top, 20em, 70em, 2em, 4em);
// }

////////////////////////////////////////////////////////////////////////////

div {
  @include fluid-type(font-size, 600px, 1200px, 16px, 32px);
}
@media screen and (max-width: 600px) {
  div {
     font-size: 16px;
  }
}
@media screen and (min-width: 1200px) {
  div {
     font-size: 36px;
  }
}
<div>Responsive Typography technique known as Fluid Type or CSS Locks. 
  Resize the browser window to see the effect.
</div>

Codepen Demo

<小时/>

进一步阅读

Precise control over responsive typography

Fluid Responsive Typography With CSS Poly Fluid Sizing

Non-linear interpolation in CSS

答案 1 :(得分:5)

在css文件中使用媒体设置字体大小

@media(max-width:767px) {
    body {
        font-size: 10px;
    };
}

@media(min-width:768px) {
    body {
        font-size: 11px;
    };
}

@media(min-width:992px) {
    body {
        font-size: 12px;
    };
}

@media(min-width:1200px) {
    body {
        font-size: 13px;
    };
}

答案 2 :(得分:1)

ditch javascript更改字体大小...在你的css文件中指定em中的字体大小。

div{
   font-size:2em;
}

答案 3 :(得分:0)

使用em代替使用像素,因为它会相应缩放。

来自维基百科:

  

在线,使用em测量变得更加普遍;随着层叠样式表(或CSS)的发展,HTML和在线标记中的W3C最佳实践建议现在要求网页基于可扩展设计,使用相对测量单位(例如em测量),而不是固定的一个,如像素(“px”)或点。

答案 4 :(得分:0)

请勿使用javascript指定字体大小。 CSS内置了方法。

您可以在字体大小上使用'em'或'%'来更改与页面和设备尺寸相关的字体大小。

代码示例:

font-size: 3em;
font-size: 10%;

两者都应该。

答案 5 :(得分:0)

试试这个,如果它有帮助(如果你打算使用javascript) http://fittextjs.com/

答案 6 :(得分:0)

如果您设置为%em,浏览器会相应地设置其字体大小。

答案 7 :(得分:0)

您可以使用css媒体查询执行此操作。

在媒体查询中设置正文大小百分比。

例如:css

@media screen and (max-width: 1024px) {
   body {
      font-size: 90%;
   }
}

@media screen and (max-width: 1440px) {
   body {
      font-size: 100%;
   }
}

然后在调整浏览器大小或根据百分比分辨率时,在要调整字体大小的每个元素上设置字体大小。

例如:如果你想在h1

上调整字体大小
h1 {
   font-size: 150%;
}

它会按照您的意愿运作。

答案 8 :(得分:0)

使用JavaScript调整字体大小不是一个好习惯。传统上使用CSS更好。您可以使用不同的单位(如px,em和%以及rem(root em))调整CSS中的字体大小。

要根据屏幕大小调整字体大小,请在rem中设置字体大小。或者使用媒体查询为不同的屏幕分辨率设置字体大小。以下是一些示例媒体查询:

@media screen and (max-width: 1024px) {
    #first { font-size: 204px; }
    h2 { font-size: 20px; }
    h1 { font-size: 30px; }
}