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

Question

考虑这个例子：我手动调整了页面缩放比例到60%，以使#content div水平适应，（#content div不能换行或滚动，内容不仅限于文本，还包含更多的div、表格、span等。在这个例子中，我只是用文本来演示溢出情况）。

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函数的内容，但我无法使其正常工作。

（3、2、1……开始负分）

- The One

---

如何根据屏幕宽度计算CSS缩放因子？ - milahu

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>

- The One

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

- cssyphus

---

抱歉我没有表达清楚，这个内容不仅限于文本，还包含更多的div、table、span等。在示例中，我只是用文本来演示溢出。 - The One

谢谢，我使用了比例尺类，不过你的帖子也很有用，谢谢+1。 - The One

Answer 3

目前我打算使用自己的技巧：

1. 获取元素的渲染宽度
2. 在头部添加一个<style>元素
3. 获取刚刚添加的那个元素
4. 插入@viewport类，并设置宽度为渲染宽度

$(document).ready(function() {
      var width = document.getElementById('content').offsetWidth;
      $("head").append('<style type="text/css"></style>');
      var viewPortElement = $("head").children(':last');
      viewPortElement.html('@viewport{width:' + width + 'px}');
    });

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

这里的代码片段无法工作，脚本被这个网站阻止了，但如果在你的电脑上运行，则可以正常工作。

- The One