关键词：
腾讯优测是专业的移动云测试平台，自动化测试提供全面兼容性适配测试，云真机提供远程真机租用服务，优分享不定时提供大量移动研发及测试相关干货！
移动端web开发相对于PC端web开发，我们可以庆幸不用兼容那么多浏览器了，但是随之而来的却是各种屏幕尺寸的适配，个人觉得，比PC端还要费精力。在使用了腾讯优测进行软件测试后，问题得到了有效解决。
响应式布局
简而言之，就是页面元素的位置随着屏幕尺寸的变化而变化，通常会用百分比来定位，而在设计上需要预留一些可被“压缩”的空间。
如上图，其实就相当于页面被压矮了。
Cover布局
就跟background-size的cover属性一样，保持页面的宽高比，取宽或高之中的较小者占满屏幕，超出的内容会被隐藏。此布局适用于主要内容集中在中部，边沿无重要内容的设计。
如上图，第一张是原设计稿，第二张把左右隐藏掉了一部分，第三张则是把上下隐藏掉了一部分。
Contain布局
同样，也跟background-size的contain属性那样，保持页面的宽高比，取宽或高之中的较大者占满屏幕，不足的部分会用背景填充。个人比较推荐用这种方式，但在设计上需要背景为单色，或者是可平铺的背景。
如上图，红框部分为原始宽高比，根据不同屏幕尺寸进行缩放，并加背景填充。
好了，接下来再说说常用的实现方法吧。
样式缩放
最省事的适配方法，直接用px为单位按视觉进行开发，然后通过计算屏幕与网页的宽高比，用transform:scale来对网页进行全局缩放。
不过此方法会有一个小问题，就是如果网页内有动画的话，缩放后会稍微降低页面性能，在低配的安卓机器上表现的比较明显，iOS上没发现有性能问题。
Rem缩放
Rem是个好东西呀，谁用谁知道，这里就不多做解释了。原理跟上面的样式缩放相通，只不过是通过Rem为单位来进行视觉开发，然后通过计算后改变html的front-size来对页面进行缩放。
关于以Rem为单位进行开发，目前比较流行Font-size=62.5%，而后1rem=10px的这种方法，有试过直接换成px也是可以的，就看个人的计算习惯吧。
加入腾讯优测官方群 214483489 与大咖们分享技术与时讯！
文/腾讯 莫振中
_______________________________________________________________________________________
腾讯优测是专业的移动云测试平台，为应用、游戏、H5混合应用的研发团队提供产品质量检测与问题解决服务。不仅在线上平台提供自动化兼容性测试、云手机远程租用与调试、漏洞分析、自动化测试工具Xtest等多种质量检测工具，更为VIP客户配备了专家团队提供定制化综合测试解决方案。
立即体验：云真机远程真机操控 复现bug 调试解决
立即体验：app自动化测试 50款机型 10分钟测完
立即体验：XTest自动化测试脚本工具 高效录制脚本 实现多机联测
腾讯优测优分享-android平台的碎片化问题解决
... android平台碎片化问题越来越受到移动开发的关注，腾讯优测提供专业的app自动化测试服务，能解决大部分的机型覆盖问题，为android开发人员扫清道路~关键词：android适配 安卓平台碎片化 移动研发适配 初... 查看详情
腾讯优测优分享-如何反编译android5.0framework
...要：framework层的安卓适配是一个很麻烦的问题，腾讯优测是专业的app自动化测试适配平台，能解决大部分android适配相关的问题，帮助开发者更好的进行测试。关键词：framework android适配 移动研发在Android平台&... 查看详情
腾讯优测优分享|探索reactnative首屏渲染最佳实践
腾讯优测是专业的移动云测试平台，旗下的优分享不定时提供大量移动研发及测试相关的干货~此文主要与以下内容相关，希望对大家有帮助。reactnative给了我们使用javascript开发原生app的能力，在使用reactnative完成兴趣部落安卓端... 查看详情
腾讯优测优分享|探索reactnative首屏渲染最佳实践
腾讯优测是专业的移动云测试平台，旗下的优分享不定时提供大量移动研发及测试相关的干货~此文主要与以下内容相关，希望对大家有帮助。reactnative给了我们使用javascript开发原生app的能力，在使用reactnative完成兴趣部落安卓端... 查看详情
腾讯优测优分享|探索reactnative首屏渲染最佳实践
腾讯优测是专业的移动云测试平台，旗下的优分享不定时提供大量移动研发及测试相关的干货~此文主要与以下内容相关，希望对大家有帮助。reactnative给了我们使用javascript开发原生app的能力，在使用reactnative完成兴趣... 查看详情
腾讯优测优分享|android适配中的一些特殊情况小结
腾讯优测是专业的自动化测试平台，提供全面兼容适配测试，远程真机租用等多维度的测试服务！作为一名“艰苦卓绝”的软件工程师，我在开发路上经常被各种奇葩情况虐的体无完肤。。。今天就想与大家分享... 查看详情
腾讯优测优分享-手机应用自动遍历的实现
摘要：腾讯优测是专业的app自动化测试平台，安卓平台上的自动化遍历如果框架嫌麻烦可以尝试下，我在工作中也在不断地学习探索，目前处在探索的初期阶段。关键词：安卓自动化遍历 android适配 移动研发... 查看详情
腾讯优测优分享|android性能测试工具化实现
腾讯优测专业的移动云测试平台，自动化测试提供性能测试数据，云真机实时输出性能数据，让测试更简单！1、Android性能测试介绍提到Android性能测试，我们总免不了俗地要首先介绍下Android性能参数以及获取... 查看详情
腾讯优测优分享|适配路上，避免掉入“扫码调用相机”的坑
最近做的项目有幸用到了腾讯优测云测试平台，做Android开发最大的问题应该就是适配了。曾经有这么一个段子：某个做Android应用的创业公司破产了，不是因为技术不行，而是因为他们没钱买机器来做适配了。当... 查看详情
腾讯优测优分享|android应用性能优化个人总结–图形优化
腾讯优测是专业的移动云测试平台，涵盖自动化测试-全面兼容性测试，远程真机租用，漏洞分析等，旗下优分享不定时提供大量的移动研发及测试相关的干货~应用UI卡顿常见原因主要在以下几个方面：1.人为... 查看详情
腾讯优测优分享|多媒体，多问题
腾讯优测是专业的移动云测试平台，提供全面兼容性测试，远程真机租用等多维度的测试服务，让测试更简单！有人喜欢听着音乐high起来，有人会随时随地观看热门电视剧。大多数人都会使用QQ、微信，语... 查看详情
腾讯优测优分享|双卡双待-工程师难言的痛
腾讯优测是专业的移动云测试平台，提供全面兼容性测试，远程真机租用，漏洞分析等多维度的测试服务，让测试更简单！【引子】移动互联网的时代，手机通讯录是天然的强社交关系的关系链，如果... 查看详情
腾讯优测优分享|android适配中的一些特殊情况小结
腾讯优测是专业的自动化测试平台，提供全面兼容适配测试，远程真机租用等多维度的测试服务！作为一名“艰苦卓绝”的软件工程师，我在开发路上经常被各种奇葩情况虐的体无完肤。。。今天就想与大家分享... 查看详情
腾讯优测优分享|让你头疼的手机应用自动遍历可以这样实现
腾讯优测是专业的移动自动化测试平台，提供全面兼容性测试，远程真机租用等多维度的测试服务，让测试更简单！安卓平台上应用程序的遍历一直是研发工程师十分关注的问题，因此我在工作中也在不断地... 查看详情
腾讯优测优分享|多媒体，多问题
腾讯优测是专业的移动云测试平台，提供全面兼容性测试，远程真机租用等多维度的测试服务，让测试更简单！有人喜欢听着音乐high起来，有人会随时随地观看热门电视剧。大多数人都会使用QQ、微信，语... 查看详情
腾讯优测优分享|你是否体验过android手机插入耳机后仍外放的尴尬？
腾讯优测是专业的移动自动化测试平台，提供多维度的自动化测试服务，让测试更简单！近期有报道称，澳大利亚悉尼市新某大学的一名男生在课堂上看电影，不料耳机没有插好，变成了现场直播。。。如... 查看详情
腾讯优测优分享|高质量产品高质量照片
腾讯优测总监雷彬【引言】如果你不想随时扛着单反和三脚架去抓拍生活的点滴故事，却仍然希望能拍到质量很高效果很好的照片。如果你不想因为拍照的失误而错过重要的瞬间。如果你手上有一部安卓手机，并且安装... 查看详情
腾讯优测优分享|让你头疼的手机应用自动遍历可以这样实现
腾讯优测是专业的移动自动化测试平台，提供全面兼容性测试，远程真机租用等多维度的测试服务，让测试更简单！安卓平台上应用程序的遍历一直是研发工程师十分关注的问题，因此我在工作中也在不断地... 查看详情