如何将内容缩放到屏幕宽度

Question

考虑这个例子：我手动将主体缩放调整为 60%，以便让 #content div 水平适合，（内容 div 不能环绕或滚动，内容不限于文本，它包含更多的 div、表格、跨度，等。在示例中，我使用文本只是为了演示溢出）

body{

  zoom:60%
  
}


#content{
  overflow-x: hidden;
  white-space: nowrap;
}

<div id="content">
THIS CONTENT HAS TO FIT HORIZONTALLY ON SCREEN, THIS CONTENT CAN'T WRAP NOR SCROLL BLA BLA BLA BLA BLA BLA BLA
</div>

如何将其缩小或缩小以自动适应屏幕宽度？你能给我指出一个例子或来源吗？

我已经阅读了关于 css @viewport 和 jquery ui scale funcion 的内容，但我无法让它工作。

（在 3、2、1 中投反对票...）

Answer 1

这里有一个更简单的方法：使用 Javascript 来操作 CSS 缩放类：

$(document).ready(function(){


var width = document.getElementById('hijo').offsetWidth;
            var height = document.getElementById('hijo').offsetHeight;
            var windowWidth = $(document).outerWidth();
            var windowHeight = $(document).outerHeight();
            var r = 1;
            r = Math.min(windowWidth / width, windowHeight / height)

            $('#hijo').css({
                '-webkit-transform': 'scale(' + r + ')',
                '-moz-transform': 'scale(' + r + ')',
                '-ms-transform': 'scale(' + r + ')',
                '-o-transform': 'scale(' + r + ')',
                'transform': 'scale(' + r + ')'
            });

});

#padre{
   overflow-x: visible;
  white-space: nowrap;
      
  }


#hijo{
  left: 0;
    position: fixed;
    overflow: visible;
    -moz-transform-origin: top left;
    -ms-transform-origin: top left;
    -o-transform-origin: top left;
    -webkit-transform-origin: top left;
     transform-origin: top left;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
     transition: all .2s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="padre">
       <div id="hijo">
         THIS CONTENT HAS TO FIT HORIZONTALLY ON SCREEN, THIS CONTENT CAN'T WRAP NOR SCROLL BLA BLA BLA BLA BLA BLA BLA
       </div>
  </div>

Answer 2

你有没有尝试过：#content{font-size:1.2vw;}。该vw单位将调整到屏幕宽度（还有一个vh单位可以调整到屏幕高度）。获得正确的大小，它应该始终将字体缩小到适当的大小。

该vw单元将屏幕宽度分为 100 个单元，并根据所需的单元数分配尺寸。与百分比类似，但不依赖于父级。 请参阅 CSS-Tricks 中的说明

或者，探索 CSS 媒体查询。他们的工作方式是这样的：

/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {
    #content{font-size:8px;}
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
    #content{font-size:9px;}
}

/* Small Devices, Tablets */
    #content{font-size:10px;}
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
    #content{font-size:12px;}
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
    #content{font-size:14px;}
}



/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
    #content{font-size:14px;}
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
    #content{font-size:12px;}
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
    #content{font-size:10px;}
}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
    #content{font-size:9px;}
}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {
    #content{font-size:8px;}
}

资源：

https://css-tricks.com/viewport-sized-typography/

Bootstrap 3 断点和媒体查询

https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries