基本代码很简单：
CSS
.pop {
position: fixed ;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
background-color: yellow ; }
HTML
<body>
<div class="pop">some variable text.</div>
</body>
行为
div.pop展开以将其内容放入一个矩形中视口915px宽，最大宽度457.5px宽最大高度为100%
如果视口缩小；"边际"；出现在div.pop，每个占视口宽度的大约四分之一
继续减小视口宽度，div.pop的宽度收缩。当它缩小到最大单词的宽度后"；"边际"；开始收缩，直到它们消失，并且CCD_ 4内容"；溢出"；视口
目标和问题
我想要一个固定的位置，居中的DIV，不超过例如视口的95%或30em，以最小者为准，并且理想情况下，收缩以适应小于此值的内容，并具有最小宽度10 em。我需要控制行为(如上(才能做到这一点，但无法找到对它们的解释
方法
我找不到min-width、max-width和width的组合实现了目标。min-width达到最小宽度要求，但似乎没有什么能凌驾于"；裕度"；，和最大CCD_ 9
使用display:table-row;和display:table-cell;似乎没有效果，表明最大宽度和"；"边际"；div.pop的而不是匿名单元格的结果
从剥离除此处给出的代码之外的所有代码来看"问题"；来自一系列内在的行为。我一直无法找到这些的定义或它们的方式受控
包含/省略Meyers reset css没有任何效果，因此浏览器预设似乎并不涉及
FF Inspector在弹出窗口的屏幕上显示div.pop的宽度与之相关；此宽度也显示在"框模型"窗格中，但是没有给出它的计算宽度，也没有任何与那
问题
div.pop的尺寸是如何计算的正在产生的行为，以及如何控制这种行为以实现像这样的进球
尝试使用max-width并设置媒体查询：
.pop {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: yellow ;
width: 30em;
min-width: 10em;
}
@media (max-width: 30em) {
.pop {
max-width: 95%;
}
}
如果您需要更高级的东西，请尝试使用calc(参考(。