从零写移动着陆页二：让移动着陆页适应多种手机

ttyml

欢迎继续这个移动着陆页制作系列文章。第一篇看这里：

我们最终得到的是一个可以在大多数手机上运行良好的着陆页，但它不是完美的。而且，特别是当你确定了哪些手机可以为你转换时，你想要——你需要——完美。

这就是本教程将向你展示的内容——如何构建一个强大的自适应着陆页 ，将适应任何手机查看它，并准确的按照你的需要显示。

本教程所需要的：

你不需要太多的技能来完成这个教程，但是有一些重要的要求：

—你需要注册BrowserStack，移动测试工具。BrowserStack的付费订阅对于移动开发来说确实不是可选的——它是唯一能完成这项工作的工具，除非你想购买40或50部手机进行测试。对于本教程，如果你非常小心，并且在不使用它的时候退出，那么你可能可以获得30分钟的免费试用。

—一款能够浏览网页的手机——在这部分不那么重要，但仍然很方便。

—图像编辑工具。

—一个可以存放着陆页以供访问的网络空间。我在我的服务器上创建了一个新的文件夹“MobTest”。

—一份你想使用的手机清单。试着让你的登陆页在每台手机上都正常工作。如果你看过 Stackman 的移动广告指南，你将已经确定哪些手机能够转化你的任务——针对它们优化。否则，如果你是为了学习而跟随本文，只需要选择一些流行的手机——iPhone 4、华为手机、三星手机或类似的手机。

目录

本教程要讲的内容很多，所以这是目录，方便浏览：

• 这一切如何起作用：媒体请求的神奇特性

• 让页面对横屏友好

• 调整字体大小

• 只加载你需要的图片

• 更多可以做的

一、这一切如何起作用：媒体请求的神奇特性

我们如何让一个单一的设计能够适应所有的手机呢？

我们并不打算这么做。

实际上，我们会采用一些 CSS 的神奇特性使得我们的着陆页自适应任何浏览它们的手机。

相比于传统互联网，在移动端工作的一个乐趣在于，浏览器技术相对更加现代。这意味着很多最新版本的CSS功能都得到手机的完美支持，而电脑端则不是如此。

一个CSS特别神奇的特性就是媒体请求（media query），这就是我们今天要使用的。它让我们可以根据浏览页面的浏览器不同而改变我们的样式表。

有点难懂？不要担心，下面是一个快速说明。

把下列HTML代码粘贴到一个新的文件，然后上传到服务器的一个位置：

然后设置你的手机自动转向。

然后浏览这个页面，当你转动成为横屏的时候，你会发现字体颜色变化了。

我们用同样的检测方法使得着陆页适应任何手机。而且我怀疑大多数经验丰富的联盟客在阅读这篇文章时，也会想到这一技术的其他各种邪恶用途……

(“你现在就可以解锁这个一次性优惠——只要转动你的手机!”)

二、让页面对横屏友好

所以，让我们在我们之前使用的同一部手机上开始让我们的页面工作——但这次是在横向方向。

这其实非常简单。我们要做的就是添加第一个媒体请求。就在关闭#/style#标签之前，添加：

差不多就是这样。上传然后测试，并调整图片大小到你认为合适。你可以看到和竖屏模式下完全一样的着陆页，只不过横屏下的样式变成了这样：

提示：如果你的图片破坏了着陆页底部的显示，可以在页面最后的#/div#之前添加#br clear="all"

加入社区,可阅读全站10w+资源

您尚未登录，请登录后操作

 非会员试读19%,加入社区后可阅读全文