android 布局覆盖超出一部分_谈谈移动端屏幕适配的几种方法

文/腾讯莫振中

移动端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也是可以的，就看个人的计算习惯吧。

想了解更多干货，欢迎关注腾讯优测微信号：优测网(wxutest)

腾讯优测：

腾讯优测是备受客户信赖的移动云测试平台，为应用、游戏，H5混合应用的研发团队提供产品质量检测与问题解决服务。不仅在线上平台提供「云手机远程操控与调试」、「自动化全面兼容性测试」、「APK源码级缺陷性分析」等多种质量检测工具，更为VIP客户配备专家团队提供定制化综合测试解决方案。真机实验室配备上千款手机，覆盖市面98%主流机型，7*24小时在线运行，覆盖亿级用户。

android 布局覆盖超出一部分_谈谈移动端屏幕适配的几种方法相关推荐

android 布局覆盖超出一部分_内容超出
内容审核 Moderation 内容审核(Content Moderation),基于图像.文本.视频检测技术,可自动进行涉黄.广告.涉政涉暴.涉政敏感人物等内容检测,帮助客户降低业务违规风险公测服 ...
布局覆盖超出一部分_Android 布局优化
布局是一个App非常关键的一部分,布局性能的好坏可直接影响到用户的体验.试想下如果一个RecyclerView滑动时异常卡顿,那用户估计也没有心情去住下滑了,可能就直接强制杀掉App了去,然后回过头去 ...
[原创] Android Automotive 车载应用对驾驶模式(Safe Drive Mode)适配的几种方法
目录前言开发环境 1. Android Automotive 和 Android Auto的区别 Android Auto: 2. Android Automotive 的驾驶模式介绍 3. An ...
android开发实现动态获得app的cpu占有率并导出文件的两种方法。
android开发实现动态获得app的cpu占有率并导出文件的两种方法. 最近在做学校实验室的项目的时候,师兄要求我对app的性能进行评估,主要是从电量.cpu占有率.python模型的响应时间三者 ...
element 手机适配_解决手机移动端适配的五种方法
移动端适配的五种方法所谓移动端适配,就是WebApp在不同尺寸的屏幕上等比显示第一种方法:viewport适配原理:通过设置 initial-scale , 将所有设备布局视口的宽度调整为设计图 ...
android屏幕适配的五种方式_讲一讲Android 9.0系统的新特性，对刘海屏设备进行适配...
黑客技术点击右侧关注,了解黑客的世界! Java开发进阶点击右侧关注,掌握进阶之路! Python开发点击右侧关注,探讨技术话题!作者丨郭霖来源丨郭霖(guolin_blog) 其实Android 9 ...
android 屏幕禁止,Android应用禁止屏幕休眠的几种方法
做Android应用开发时,有时需要在应用前台运行时,禁止休眠,以下几种方法供参考. 方法一: 添加休眠锁,休眠锁必须成对出现. private WakeLock mWakeLock; private ...
美团脱颖而出的经验_使数据科学项目脱颖而出的6种方法
美团脱颖而出的经验 The global COVID-19 pandemic has left many with a lot of time on their hands to work on th ...
python 分类变量编码_深度学习编码分类变量的3种方法——AIU人工智能学院
:数据科学.人工智能从业者的在线大学. 数据科学(Python/R/Julia) 作者 | CDA数据分析师像Keras中的机器学习和深度学习模型一样,要求所有输入和输出变量均为数字. 这意味着,如 ...

android 布局覆盖超出一部分_谈谈移动端屏幕适配的几种方法

android 布局覆盖超出一部分_谈谈移动端屏幕适配的几种方法相关推荐

最新文章

热门文章

android 布局覆盖 超出一部分_谈谈移动端屏幕适配的几种方法

android 布局覆盖 超出一部分_谈谈移动端屏幕适配的几种方法相关推荐

最新文章

热门文章

android 布局覆盖超出一部分_谈谈移动端屏幕适配的几种方法

android 布局覆盖超出一部分_谈谈移动端屏幕适配的几种方法相关推荐