复古适合移动友好的网站

Question

像我怀疑的许多人一样，我有一个现有的网站，我正在尝试修改它，以便它在更小的移动屏幕上运行良好。为了做到这一点，我很高兴做出很多让步。然而我的主要问题是网站的标志。很高兴将其换成小型静态的东西，但我在原始站点中拥有的是用于徽标的 Flash 文件。是的，大错特错，但事后诸葛亮是一件了不起的事情。我必须处理的是一个标志，它是：

> * Specified in an external style sheet
> * Specified in an external XML file
> * Has additional hard coding in the HTML (size, placement etc)
> * Has an actual external Flash file too of course

因此，我过去使用 Flash 的决定对至少四种不同类型的文件以及网站中的每个 HTML 和 PHP 页面都有影响。

然后我的问题是，我可以修改现有网站以指定比我目前拥有的更小更简单的内容的最小破坏方式是什么？如果有帮助，我很高兴移动网站中没有 Flash 文件功能。谢谢。

Answer 1

我在一种我以前不熟悉的称为“媒体查询”的网络技术中找到了答案，我敦促任何不熟悉这个概念的人谷歌它并找到一个好的入门。简而言之，媒体查询允许您在样式表中插入一个部分，用于查询正在查看您的站点的设备的最大（或最小）屏幕分辨率，并为该事件指定一组替代样式说明。这就像在您的样式表中引入一个 If/Else 结构。

就我而言，我只是创建了一个替代徽标 - 较小的静态 .jpg 图像。然后我计算出我希望出现较小徽标的屏幕尺寸阈值，然后编写我的媒体查询，如下所示：

@media screen 
and (max-device-width: 1023px) { 
         #flashContent { display:none; }
         #altlogo { background-image: url("/images/mobile_logo.jpg"); width: 318px; height: 43px; margin-left: 2%; margin-bottom: 1px;} 
}

第一部分表示不显示 Flash 徽标，而第二部分则指定了替代方案。当然你还需要在 HTML 中创建一个钩子才能操作，因此在原始 flashContent div 之后添加以下 div：

<div id="altlogo" role="img" aria-label="My Smaller logo"></div>

请注意，我不想偏离我最初的问题太远，进入广泛介绍媒体查询的领域，但我会补充一点，我的附加 div 的参数可以解决无法访问的问题为替代徽标图像添加“alt”标签。屏幕阅读器将检测并读出这些参数来代替 alt 标签。这里还有一些其他问题未解决，例如当您只显示一个徽标时加载两个徽标，但这些是完全可以解决的问题，超出了我在此处要解决的原始问题的范围，我留给相关方研究。