适用于PC和智能手机的newsetter中的CSS

Question

我是编码HTML时事通讯，我必须编码一个文件，一旦发送它检测设备，如果它是智能手机或PC。如果是PC，则显示600px宽度；如果是智能手机，则显示300px width。

那么，我应该如何设置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服务在这方面还达不到标准。

在我看来，如果你想让它对两种设备都是用户友好的，那么你应该创建类似于windows8界面的内容域，这样它在电脑上看起来仍然很好，在移动设备上也会有不错的外观。

因此，让我们来看看哪些移动设备支持媒体查询。它在这个领域是一个巨大的成功和失败。

支持的：

安卓邮件(buggy非常多)，Iphone Mail和Ipad mail (>=320px <= 480px)。

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

不支持 Android Gmail、Iphone Gmail、Ipad Gmail和Blackbery8000

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