html - 用于 PC 和智能手机的时事通讯中的 CSS

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。电子邮件客户端和 Web 服务无法满足这一要求。

在我看来，如果你想让这两种设备都对用户友好，那么你应该创建类似于 Windows 8 界面的内容字段，这样它在计算机上仍然看起来不错，在移动设备上看起来也不错.

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

支持：
Android Mail（非常错误）、Iphone 邮件和 Ipad 邮件（>=320px <= 480px）。

这确实带来了许多元素仍然无法正确显示的风险，因为它仍然相对较新。

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

对于 EDM 来说，唯一真正的选择是让它们保持静态，这意味着你永远不应该尝试让它变得流畅。EDM 基本上在其中包含一定数量的信息，然后图像会被发送，因此不需要宽度/高度是流动的。这样做只会在另一个浏览器或电子邮件客户端中运行一些东西。