Question

制作浏览器时，我网站上的文字无法正确调整大小小窗户。它压扁了中间的文字并制作了更多的线条。这是我的代码

我的整个文件

html：http://pastebin.com/kj1jvTjv CSS：http://pastebin.com/A1CP7Viq

HTML：

</div>
<div id="NewsPosts">
<p>Toontown Classic is coming soon</p>
</div>

CSS：

#NewsPosts{
position: relative;
bottom: 0px;
top: -925px;
width: 45%;
position: center; 
margin: 0 auto;
font-size: 20px; 
margin-left: 10; 
margin-right: 10; 
text-indent: 5; 
}

Answer 1

我无法准确地说出你希望它如何在你的问题中发挥作用。如果您希望font-size根据浏览器的视图大小动态更改，则可以使用vw单位（请参阅下面的jsfiddle预览和代码示例）。

试试这个：http://jsfiddle.net/km1hbpzv/1/尝试调整浏览器大小以确定这是否是您想要的效果。

我使用了你在Pastebin上发布的HTML和CSS，但是我在原始帖子中添加了CSS并进行了编辑。

我的更改：

#NewsPosts {
   position: relative;
   bottom: 0px;
   top: -925px;
   width: 45%;
   //position: center; changed this to text-align: center (below)
   text-align: center;
   margin: 0 auto;
   //font-size: 20px; changed this to 2vw which is percentage of the viewport width
   font-size: 2vw;
   margin-left: 10; 
   margin-right: 10; 
   text-indent: 5; 
}

#DateAndBy {
    position: relative;
    bottom: 0px;
    top: -930px;
    //font-size: 30px; changed this to 3vw which is a percentage of viewport width
    font-size: 3vw;
    margin-left: 10; 
    margin-right: 10; 
    text-indent: 5; 
}

您的HTML可能存在结构性问题，导致以后的样式更改难以实现，但这似乎基于我可以从您的帖子中收集的信息起作用。

有关vw单位和其他font-size做法的进一步讨论，请点击此处：Pure CSS to make font-size responsive based on dynamic amount of characters

Answer 2

center不是position的有效值，因此您无法position: center;。如果您想在窗口中居中div，可以将margin-left和margin-right属性设置为auto。我看到您使用行margin: 0 auto;执行此操作，但之后您使用margin-left: 10; margin-right: 10;覆盖了这两行。 10也不是margin的有效值，它必须是10px或10em或其后带说明符的某个值。同样对于这样的事情，position: relative是不必要的，虽然取决于你的其他HTML元素，这可能会破坏某些东西。所以，使用这个CSS：

#NewsPosts {
    margin-left: auto;
    margin-right: auto;
    padding: 10px 15px;
    font-size: 20px;
    width: 45%;
}

这样的事情应该做你想做的事。

在重新调整Web浏览器HTML |时，文本会被压扁CSS

2 个答案: