如何确保网站适合所有的屏幕分辨率？ [英] how to make sure a website is suitable for all screen resolutions?

问题描述

刚刚花了几个小时写一个新的网站...看起来不错的我的分辨率，1366x768 ...但是，即使下降到1024x768意味着不是一切都适合屏幕宽度！

Just spent several hours writing up for a new site... looks great in my resolution, 1366x768... However, even going down to 1024x768 means that not everything fits inside the screen width!!

尝试：

<style type='text/css'>
    body {width:100%;}
</style>

这对我的分辨率有一些影响，但是对较小的分辨率没有影响...

This does have some effect on my resolution but no effect on smaller resolutions... How can I make sure my webpage will fit 100% in all screen resolutions?

推荐答案

我使用CSS @media指令，不幸的是，不支持IE8-。符合CSS3允许您根据视口的宽度设置不同的样式：

I use CSS @media directive, unfortunately, not supported by IE8-. Compliant CSS3 allow you to style differently according to the width of the viewport:

<style type="text/css">
@media screen and (min-width:1px) and (max-width:1365px) {
    ...
}
@media screen and (min-width:1366px) {
    ...
}
</style>

顺便说一下，你的CSS有一个错误，你忘了指定单位：

By the way, you have an error in your CSS, you forgot to specify the unit:

body {width:100%;}

这篇关于如何确保网站适合所有的屏幕分辨率？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！