Question

我正在创建一个我在临时链接上的网站：http://ryanterpilowski.co.uk/urofoam/

正如您在主横幅上看到的那样，我使用了背景图像，文字淡入。我很高兴看到它在普通桌面屏幕上的外观......但是在宽屏（1600x1200）上查看时。。背景图片被裁剪你可以在这里看到例子：http://www.infobyip.com/testwebsiteresolution.php?url=http%3A%2F%2Fryanterpilowski.co.uk%2Furofoam%2F&width=1680&height=1050&in_browser=true。

我无法看到我在css中控制它的位置，有人可以帮忙吗？

Answer 1

这称为Responsive Web Development(RWD)。为了使页面响应所有设备，我们需要使用RWD的一些基本基础。

您可以使用CSS3 Media queries来定位不同的屏幕尺寸。

例如：

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {

/* Styles inside this only work when your device width is between 320px to 480px. Same you can set for other sizes*/


}

有关详细信息，请查看此answer

只需尝试使图像响应：

img{ max-width: 100%;}

OR

.your-class-name { 
  background: url(images/yourimage.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

请检查此Large Background Images and Screen Sizes

Answer 2

您可以使用CSS的@media rule，您可以在其中添加不同的屏幕尺寸（以及更多内容）。看一下这个link。

在您的情况下，您可以使用min-width和min-height在此类设备上定义不同的beheaviour：

@media (min-height: 1200px) and (min-width: 1600px) {
    /* Your CSS here for this special case */
    header {
       /* .. */
    }
}

横幅背景图象屏幕决议

2 个答案: