html自动缩放屏幕高度,关于html：如何将内容缩放到屏幕宽度

考虑以下示例：为了使#content div水平对齐，我手动将主体缩放比例调整为60％((内容div不能环绕或滚动，并且内容不限于文本，它包含更多的div，表格，跨度， 等等。在示例中，我仅使用文字来演示溢出)

body{

zoom:60%

}

#content{

overflow-x: hidden;

white-space: nowrap;

}

THIS CONTENT HAS TO FIT HORIZONTALLY ON SCREEN, THIS CONTENT CAN'T WRAP NOR SCROLL BLA BLA BLA BLA BLA BLA BLA

如何缩小或缩小以自动适应屏幕宽度？

你能指出一个例子或资料吗？

我已经读过关于css @viewport和jquery ui缩放功能，但我无法使其正常工作。

(在3、2、1 ...中投票)

这是一个更简单的方法：使用Javascript来操纵CSS scale类：

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

}

THIS CONTENT HAS TO FIT HORIZONTALLY ON SCREEN, THIS CONTENT CAN'T WRAP NOR SCROLL BLA BLA BLA BLA BLA BLA BLA

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

}

资源：

Bootstrap 3断点和媒体查询

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

抱歉，我不够清楚，内容不限于文本，它包含更多的div，表，span等。在示例中，我仅使用文本来演示溢出

谢谢我使用了比例尺类，不过您的帖子还是有用的，谢谢+1

现在，我将使用自己的hack：

获取元素的渲染宽度

在标题中添加