bootstrap 中有几个媒体查询.container，因此在某些屏幕分辨率.container下，它会过度压缩其中的内容，人为地切断有用空间。width: 1140px如果没有额外的媒体查询，难道不能只做 max-吗？这不是我排版的第一天，对我来说，无论如何，当内容尽可能靠近浏览器边缘时，这看起来很合乎逻辑。但是，我理解这有一定的意义，它带来了一定的便利。问题是，为什么我们需要媒体查询.container？（我知道有.container-fluid，理解内容限制的逻辑对我来说很重要。在宽显示器上，很明显阅读宽文本很不方便，但为什么在较低的分辨率下呢？）。
大家好！
我有一个 div，我正在为页面上的特定位置设置动画。
我用于动画css transform: scale, top, left при выставленном transition: all 2s;
问题是，如果您同时设置所有三个属性，那么第一个动画会出现明显的抖动。问题是如何让动画流畅而不卡顿？动画方法无关紧要。重要的是元素在保持比例动画的同时动画适合侧边栏。
有一个特点，也许有人能理解：如果在codepen中拖动结果视图窗口的边框，进行小幅调整，那么第一个动画会很流畅。
set_random_propites_for_div();
function set_random_propites_for_div(){
var random_width = Math.floor((Math.random() * 150) + 350);
var random_height = Math.floor((Math.random() * 100) + 250);
var random_top = Math.floor((Math.random() * 1) + 100);
var random_left = Math.floor((Math.random() * 100) + 300);
$('#random_div_1').css('width', random_width+'px').css('height', random_height+'px').css('top', random_top+'px').css('left', random_left+'px');
}
var start_width = $('#random_div_1').outerWidth();
var finish_width = $('#sidebar').outerWidth() - 10;
var offset = $('#random_div_1').offset();
var start_offset_left = offset.left;
var start_offset_top = offset.top;
var finish_offset_left = 5;
var finish_offset_top = 5;
var delta_offset_left = start_offset_left-finish_offset_left;
var delta_offset_top = start_offset_top-finish_offset_top;
var scale = finish_width/start_width;
function animate_div(){
$('#random_div_1').css({
transform: 'scale('+scale+')',
left: finish_offset_left+'px',
top: finish_offset_top+'px'
});
}
function re_animate_div(){
$('#random_div_1').css({
transform: 'scale(1)',
left: start_offset_left+'px',
top: start_offset_top+'px'
});
}
$('#start_animate').click(function(){
animate_div();
});
$('#back_animate').click(function(){
re_animate_div();
});#wrapper{
position: absolute;
width: 100%;
height: 100%;
background-color: red;
}
#start_animate, #back_animate{
padding: 10px;
border-radius: 10px;
background-color: white;
text-align: center;
width: 100px;
position: absolute;
top: 10px;
cursor: pointer;
}
#start_animate{
left: 200px;
}
#back_animate{
left: 350px;
}
#sidebar{
position: relative;
width: 100px;
height: 100%;
background-color: black;
opacity: 0.2;
}
#random_div_1{
position: absolute;
will-change: transform, top, left;
transition: all 1s;
transform-origin: top left;
background-color: green;
font-size: 140px;
color: white;
font-family: Verdana;
text-align: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="start_animate">start animate</div>
<div id="back_animate">back animate</div>
<div id="sidebar"></div>
<div id="random_div_1">
<div id="text">ABC</div>
</div>
</div>