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，...中的Downvotes）

Answer 1

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

＆＃13;

$(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 + ')'
            });

});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 2

您是否尝试过：#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 3

现在我将使用我自己的黑客：

获取元素的渲染宽度
追加＆lt;风格＆gt;标题中的元素
获取刚刚添加的元素
使用width = renderedwith

$(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>

此处的代码段不起作用，此网站会阻止该脚本，但如果您在自己的计算机上运行该脚本

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

3 个答案: