当需要在CSS中适合div时，文本会缩小

Question

所以我有点问题。我的标题看起来像这样： 它在移动设备上看起来很糟糕，如下所示：

是否有一种很好的方法可以根据需要缩小文本以适应标题？最好是仅限CSS的解决方案。

我在这里有一个预制的JSFiddle，只有用于试验的标题：https://jsfiddle.net/wgy1ohc3/1/

<div class="parallax-container header-parallax">
  <div class="container container-wide readable-text">
    <h1 class="white-text">Account Security</h1>
    <h4 class="white-text">Control active sessions and 2-Factor Authentication.</h4>
  </div>
  <div class="parallax"><img src="https://i.imgur.com/k45V80z.jpg?2"></div>
</div>

任何帮助都将不胜感激！

Answer 1

vw或vh CSS测量

对于流体响应文本大小调整，我们可以使用vw（查看器宽度）和vh（查看器高度）CSS测量值。

他们是widely supported和very useful。

添加：

h1 {
    font-size: 10vw;
}
h4 {
    font-size: 4vw;
}

对你的小提琴会给你一个接近我相信你正在寻求的结果。

Answer 2

你可以使用视口，与calc(1.5vw + 25px)结合使用，当屏幕变大时（4vw =当前屏幕宽度的4％），给出一个基本的字体大小+比例

如果您希望字体缩放更多/更少，您可以更改1.5vw，更改25px基本大小以设置最小字体大小

（如果你非常关心移动响应，那么你应该使用媒体查询，这样就可以为每种屏幕大小定义字体大小）

  

使用视口元标记控制移动浏览器上的布局

     

参考：https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

$(document).ready(function() {
  $('.parallax').parallax();
});

.header-parallax {
  height: 17em;
}

.container-wide {
  width: 95%;
  max-width: none;
}

.readable-text {
  color: white;
  color: white;
  text-shadow: black 0.1em 0.1em 0.2em;
}

.myh1 {
  font-size: calc(1.5vw + 25px);
}

.myh4 {
  font-size: calc(1vw + 15px);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>

<div class="parallax-container header-parallax">
  <div class="container container-wide readable-text">
    <h1 class="white-text myh1">Account Security</h1>
    <h4 class="white-text myh4">Control active sessions and 2-Factor Authentication.</h4>
  </div>
  <div class="parallax"><img src="https://i.imgur.com/k45V80z.jpg?2"></div>
</div>

Answer 3

您可以使用这两个JavaScript函数来检查用户屏幕的宽度和高度：

function takeHeight(){
  var myHeight = 0;
  if( typeof( window.innerHeight ) == 'number' ) {
    //Non-IE
    myHeight = window.innerHeight;
  } else if( document.documentElement && 
(document.documentElement.clientHeight) ) {
    //IE 6+ in 'standards compliant mode'
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && (document.body.clientHeight ) ) {
    //IE 4 compatible
    myHeight = document.body.clientHeight;
  }
  return myHeight;
}
function takeWidth(){
  var myWidth = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
  } else if( document.documentElement && 
(document.documentElement.clientWidth) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
  } else if( document.body && (document.body.clientWidth ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidtht;
  }
  //console.log(myWidth);
  return myWidth;

}

并使用以下内容重新调整字体：

if(takeHeight() <= SomeValue || takeWidth() <= SomeOtherValue){
 document.getElementById("Your_Object's_Id_Here").style.size = (new size 
here) + 'px';
}else{   
  document.getElementById("Your_Object's_Id_Here").style.size = (another 
new size here) + 'px'; }