我正在创建一个动态网站,我正在开发1920 * 1080分辨率。我创建了一个看起来像这样的div:
我尝试使用vw属性控制它来处理字体大小,但是当我调整窗口大小时,它看起来像:
字体正在调整大小,但它看起来与全屏显示的方式不同。 我怎么处理呢?
HTML:
<div id="pb">
<h1>Ideas</h1>
<p>
<img src="graphics/settings-4.png" alt="Image from Flaticons.com" height="20"/> Imagine new business models for in-orbit services around the Earth, right to the moon, or up to Mars.
<br /><br />
<img src="graphics/settings-4.png" alt="Image from Flaticons.com" height="20"/> Small is beautiful! Imagine new business concepts of nanosatellites for space systems or drones.
<br /><br />
<img src="graphics/settings-4.png" alt="Image from Flaticons.com" height="20"/> Why do we have to use rockets to get to space? Can't we just float a baloon up there? Balloons are cheaper than rockets or airplanes. Imagine how we can move into space!
<br /><br />
<img src="graphics/settings-4.png" alt="Image from Flaticons.com" height="20"/> Space tourism can be the future : you could fly to your room tomorrow! Imagine new hostels into space.<br /><br />
<img src="graphics/settings-4.png" alt="Image from Flaticons.com" height="20"/> Imagine how Earth Observation data can improve land-use management and make smarter cities.<br /><br />
<img src="graphics/settings-4.png" alt="Image from Flaticons.com" height="20"/> Make Earth a better place to live! Find a way to increase renewable energies’ power thanks to Earth Observation data.
</p>
</div>
CSS:
#pb {
display: block;
width:80%;
margin-left:10%;
height:70%;
background-color: rgba(255, 255, 255, 0.4);
margin-top:12.5vh;
#pb h1 {
font-size:1.7vw;
text-align:center;
padding-top:2.8vw; }
#pb p {
font-size:1.2vw;
text-align:center;
padding:2.5vw; }
由于