从零写移动着陆页二：让移动着陆页适应多种手机
欢迎继续这个移动着陆页制作系列文章。第一篇看这里：我们最终得到的是一个可以在大多数手机上运行良好的着陆页，但它不是完美的。而且，特别是当你确定了哪些手机可以为你转换时，你想要——你需要——完美。这就是本教程将向你展示的内容——如何构建一个强大的自适应着陆页 ，将适应任何手机查看它，并准确的按照你的需要显示。本教程所需要的：你不需要太多的技能来完成这个教程，但是有一些重要的要求：—你需要注册BrowserStack，移动测试工具。BrowserStack的付费订阅对于移动开发来说确实不是可选的——它是唯一能完成这项工作的工具，除非你想购买40或50部手机进行测试。对于本教程，如果你非常小心，并且在不使用它的时候退出，那么你可能可以获得30分钟的免费试用。—一款能够浏览网页的手机——在这部分不那么重要，但仍然很方便。—图像编辑工具。—一个可以存放着陆页以供访问的网络空间。我在我的服务器上创建了一个新的文件夹“MobTest”。—一份你想使用的手机清单。试着让你的登陆页在每台手机上都正常工作。如果你看过 Stackman 的移动广告指南，你将已经确定哪些手机能够转化你的任务——针对它们优化。否则，如果你是为了学习而跟随本文，只需要选择一些流行的手机——iPhone 4、华为手机、三星手机或类似的手机。目录本教程要讲的内容很多，所以这是目录，方便浏览：这一切如何起作用：媒体请求的神奇特性让页面对横屏友好调整字体大小只加载你需要的图片更多可以做的一、这一切如何起作用：媒体请求的神奇特性我们如何让一个单一的设计能够适应所有的手机呢？我们并不打算这么做。实际上，我们会采用一些 CSS 的神奇特性使得我们的着陆页自适应任何浏览它们的手机。相比于传统互联网，在移动端工作的一个乐趣在于，浏览器技术相对更加现代。这意味着很多最新版本的CSS功能都得到手机的完美支持，而电脑端则不是如此。一个CSS特别神奇的特性就是媒体请求（media query），这就是我们今天要使用的。它让我们可以根据浏览页面的浏览器不同而改变我们的样式表。有点难懂？不要担心，下面是一个快速说明。把下列HTML代码粘贴到一个新的文件，然后上传到服务器的一个位置：然后设置你的手机自动转向。然后浏览这个页面，当你转动成为横屏的时候，你会发现字体颜色变化了。我们用同样的检测方法使得着陆页适应任何手机。而且我怀疑大多数经验丰富的联盟客在阅读这篇文章时，也会想到这一技术的其他各种邪恶用途……(“你现在就可以解锁这个一次性优惠——只要转动你的手机!”)二、让页面对横屏友好所以，让我们在我们之前使用的同一部手机上开始让我们的页面工作——但这次是在横向方向。这其实非常简单。我们要做的就是添加第一个媒体请求。就在关闭#/style#标签之前，添加：差不多就是这样。上传然后测试，并调整图片大小到你认为合适。你可以看到和竖屏模式下完全一样的着陆页，只不过横屏下的样式变成了这样：提示：如果你的图片破坏了着陆页底部的显示，可以在页面最后的#/div#之前添加#br clear="all"/#。三、调整字体大小正如我之前提到的，有些手机对字体大小的选择非常奇怪。因此，我们将字体大小设置为始终不变——但这意味着在小型手机上，我们的文本将变得太大。为了解决这个问题，我们需要检查我们的目标手机，并根据媒体查询调整文本大小。首先，在页面的底部添加以下代码，就在最后一个关闭#/div#之前:这将在你的登陆器底部以文本的形式输出实际的浏览器屏幕大小。显然，你不会把它放在那里的！——但在你开发的时候，知道你正在看的屏幕的确切大小真的很方便。现在，进入BrowserStack，在你非会员试读19%,加入社区后可阅读全文 OMG！介是啥东东！！！ 回个帖子，下班咯~ 在撸一遍。。。 回个帖子，下班咯~ 占坑编辑ing 看起来好像不错的样子 支持，赞一个 :lol 广告位，，坐下看看