Question

我正在编写HTML简报，我必须编写一个文件，一旦发送它就检测设备，如果它是智能手机或PC。如果PC显示600px宽度，则智能手机显示300px宽度。

那么我应该如何设置width属性，使其看起来与上面提到的宽度相同。

Answer 1

您正在寻找CSS Media Queries，这是一个可以满足您需求的基本解决方案：

/* ALL (Fallback), this will be used by browsers that don't support CSS Media Queries  */ 
#container{width:300px;}

/* Screen more than 600px in width */
@media only screen and (min-width: 600px){
    #container{width:600px;}
}

/* Screen less than 600px in width */
@media only screen and (max-width: 599px) {
    #container{width:300px;}
}

此处有更多示例：https://github.com/dhgamache/Skeleton/blob/master/stylesheets/skeleton.css#L79

Answer 2

使用width％是非常糟糕的做法，因为如果页面中有图像，这些在大多数浏览器中都不会受到影响。目前尚无法为移动设备和计算机编写EDM的正确方法。电子邮件客户端和网络服务并不符合标准。

在我看来，如果你想让它对两个设备都用户友好，那么你应该创建类似于windows 8接口的内容字段，这样它在计算机上看起来仍然会很好看并且会有一个像样的移动设备。

让我们来看看哪些移动设备支持媒体查询。在这个领域，这是一个巨大的打击和错过。

<强>支持的：
Android Mail（非常错误），Iphone邮件和Ipad邮件（＆gt; = 320px＆lt; = 480px）。

这确实存在没有正确显示许多元素的风险，因为它仍然相对较新。

不支持 Android Gmail，Iphone Gmail，Ipad Gmail和Blackberry 8000

EDM的唯一真正选择是让它们保持静止，这意味着你永远不应该尝试让它变得流畅。 EDM基本上有一定数量的信息，然后图像被发送，所以不需要宽度/高度是流动的。这样做只能在另一个浏览器或电子邮件客户端中运行某些内容。

适用于PC和智能手机的新产品中的CSS

2 个答案: