Question

这里我创建了一个简单的页面，它应该响应所有大小的屏幕。我已经注意了，但它仍然在diff尺寸屏幕上出现差异。

这是布局的任何改进吗？

我已经附上快照，我希望它看起来像是什么，它只在我的屏幕上显示。

<div class="container">

            <div class= "top">
                 <span class = "first-letter3">V</span>UVU<span class="yellow">VA  </span>
            </div>
            <div class= "middle">
                <div class= "second">
                    <span class = "first-letter2"> Y</span>OU'VE FINALLY OPENED UP YOUR DREAM BUSINESS <br/> OR DEVELOPED THAT MOBILE APP YOU'VE BEEN TALKING ABOUT </br></br>
                    BUT THE WORK ISN'T OVER YET. </br></br>
                    VUVU<span class="yellow">VA</span> UTILIZES ADVANCED ADVERTISING <br/> TO DRIVE CUSTOMER TO YOUR SHOP OR DOWNLOAD TO YOUR MOBILE APP. <br><br> WITH US, YOU ONLY NEED TO WORRY ABOUT YOUR BUSINESS </br> INSTEAD IF GETTING BUSINESS. </br></br>

                DO YOU HAVE A BUSINES? | CONTACT US: <span class="yellow">BUSINES@VUVUVA.COM</span> <br/><br/>
                DO YOU HAVE A MOBILE APP? | CONTACT US: <span class="yellow">APP@VUVUVA.COM</span>
                </div>


            </div>

</div>
                <div class = "second bottom">
                    <a href="index.php" class = "yellow"><span class="yellow" style ="float:left"><span class = "first-letter1 yellow">H</span>OME </span></a>
                <span style ="float:right"> <span class = "first-letter1">E</span>ST. MMXIV   </span>
                </div>

enter image description here

Answer 1

以下是如何在媒体查询中更改字体大小的示例：

@media screen and (max-width: 800px) {
    .second {        
        font-size: 10px;
    }
} 
@media screen and (max-width: 640px) {
    .second {        
        font-size: 8px;
    }
}

的 Example

Answer 2

我认为您的设计没有问题。如果要根据不同的屏幕分辨率更改此设置。您可以考虑使用媒体查询：

示例您可以缩小iphone等屏幕的字体大小，并将其保持在桌面设备的高位：

@media (max-width: 400px) {
.container{
font-size:10px;
}
}

研究以下链接以供参考： -

http://css-tricks.com/css-media-queries/

制作简单的响应页面

2 个答案: