3

我放了一张图片来通知我的网站正在建设中。这是一个 800x600 的图像，当您在桌面访问时保持其原始大小。这是页面中唯一的内容。

当人们从手机访问它时，我想让它适合整个屏幕。如何？

<style type="text/css">
    body { background-color: #6BC5C5; }
</style>
<title>Size is being moved to another server</title>
<div style="margin: 0; padding: 0; left: 0; top: 0; border: 0; position: absolute;">
<img src="movedatacenter.jpg" alt="Under Maintenance" width="595" height="1021" align="left"></div>
4

3 回答 3

9

您要使用的是媒体查询。使用媒体查询，您可以根据屏幕大小强制执行不同的 CSS 规则。

例如：

@media only screen and (max-width: 600px) {

    img#underconstruction {width: 100%; height: 100%; margin: 0; padding; 0;}
}

如果设备屏幕为 600px 或更小，这将强制具有 underconstruction 的 id 的 img 变为全宽和全高。600 是一个不错的尺寸，因为较新的 iphone 的高度大于 480。

此外，您需要在具有以下元标记的移动设备上将视口强制为 1:1：

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
于 2013-02-15T14:21:45.710 回答
2

使用以下内容设置图像的样式：

width: 100%;
height: 100%;
max-width: 800px;
max-height: 600px;

这会将图像的大小扩展到父级，最大为 800x600。确保父元素也是窗口的宽度。

于 2013-02-15T14:22:52.847 回答
2

您可以为此使用 CSS 媒体查询

@media all and (max-width: 768px) {
/* 768px is usually the width of tablets in portrait orientation */
/* You can use any other size you see fit */

    img {width: 100%;}
}

这将仅在宽度低于给定时应用样式信息max-width。

于 2013-02-15T14:23:10.313 回答