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

Question

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

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 缩放功能的信息，但我无法使其工作。

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

Answer 1

你试过了吗：#content{font-size:1.2vw;}。 vw 单位会根据屏幕宽度进行调整（还有一个 vh 单位会根据屏幕高度进行调整）。获得正确的大小，它应该总是将字体缩小到合适的大小。

vw单元将屏幕宽度分成100个单位，根据需要的单位数分配大小。类似于百分比，但不依赖于父项。 See this explanation at 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 breakpoints and media queries

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

Answer 2

现在我要使用我自己的技巧：

获取元素的渲染宽度
在 header

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

How to zoom content to screen width

html

css

viewport

scale

zooming