将字体大小调整为包含div

时间:2017-09-17 18:42:59

标签: html css

我正在创建一个动态网站,我正在开发1920 * 1080分辨率。我创建了一个看起来像这样的div:my div

我尝试使用vw属性控制它来处理字体大小,但是当我调整窗口大小时,它看起来像:my div2

字体正在调整大小,但它看起来与全屏显示的方式不同。 我怎么处理呢?

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; }

由于

0 个答案:

没有答案