移动端前端适配方案总汇

更新日期: 2019-05-05阅读: 2.4k标签: 适配

关于移动端适配的技术方案主要有以下四种

(1)通过媒体查询的方式即css3的meida queries
(2)以天猫首页为代表的 flex 弹性布局
(3)以淘宝首页为代表的 rem+viewport缩放
(4)rem 方式

 

1.Media Queries

早期采用的布局方式,它主要是通过查询设备的宽度来执行不同的 css 代码,最终达到界面的配置。

核心代码

@media screen and (max-width: 600px) {/*当屏幕尺寸小于600px时,应用下面的CSS样式*/
 /*你的css代码*/
 }

优点

media query可以做到设备像素比的判断,方法简单,成本低,特别是对移动和PC维护同一套代码的时候。目前像Bootstrap等框架使用这种方式布局
图片便于修改,只需修改css文件
调整屏幕宽度的时候不用刷新页面即可响应式展示

缺点

代码量比较大,维护不方便
为了兼顾大屏幕或高清设备,会造成其他设备资源浪费,特别是加载图片资源
为了兼顾移动端和PC端各自响应式的展示效果,难免会损失各自特有的交互方式


2.Flex弹性布局 

以天猫的实现方式进行说明:它的viewport是固定的:
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

高度定死,宽度自适应,元素都采用px做单位。随着屏幕宽度变化,页面也会跟着变化,效果就和PC页面的流体布局差不多,在哪个宽度需要调整的时候使用响应式布局调调就行(比如网易新闻),这样就实现了『适配』。


3.rem + viewport 缩放 

这也是淘宝使用的方案,根据屏幕宽度设定 rem 值,需要适配的元素都使用 rem 为单位,不需要适配的元素还是使用 px 为单位。(1em = 16px)

rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?
区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是html根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。比如:p{font-size:14px;font-size:0.875rem;}(推荐一个单位转换的工具:http://pxtoem.com/)

实现原理 
动态设置viewport,根据rem将页面放大dpr倍, 然后viewport设置为1/dpr,如iphone6 plus的dpr为3, 则页面整体放大3倍, 1px(css单位)在plus下默认为3px(物理像素) ,然后viewport设置为1/3, 这样页面整体缩回原始大小. 从而实现适配。 

这样整个网页在设备内显示时的页面宽度就会等于设备逻辑像素大小,也就是device-width。 这个device-width的计算公式为:设备的物理分辨率/(devicePixelRatio * scale), 在scale为1的情况下,device-width = 设备的物理分辨率/devicePixelRatio 。
优点:

解决1px问题,移动端屏幕适配

 

4、rem实现 

比如说“魅族”移动端的实现方式,viewport也是固定的: 

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

通过以下代码来控制rem基准值(设计稿以720px宽度量取实际尺寸),才html面添加以下script

<script>
    (function (doc, win) {
      var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
          var clientWidth = docEl.clientWidth;
          docEl.style.fontSize = 100 * (clientWidth / 720) + 'px';
      };
      if (!doc.addEventListener) {
        return;
      }
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('domContentLoaded', recalc, false);
      recalc();
    }(document, window));
  </script>

css使用px来设置宽度,然后通过插件postcss-px2rem把px转化成rem

优点:

保证设计图尺寸高度还原,适配代码设置好就ok,维护适配代码的工作量极低

缺点:

兼容性需要ie9+,移动端几乎全适配


链接: https://fly63.com/article/detial/3197

如何针对 iPhone X 设计网站?

在全面屏的 iPhone X 上,不需要而外的代码,Safari 可以非常完美的展示现有的网站。整个网站的内容都会自动地展示在一个“安全区域”内,并不会被四周的圆角或者“小刘海”遮挡住。

Web 端屏幕适配方案

像素 :像素是屏幕显示最小的单位。设备像素 :设备像素又称物理像素(physical pixel),设备能控制显示的最小单位,我们可以把这些像素看作成显示器上一个个的点。 iPhone5 的物理像素是 640 X 1136

IphoneX底部适配

判断是否是IPhoneX手机;增加fix-iphonex-bottom样式,如果想更改IPhoneX底部34像素的背景颜色怎么办呢?增加iphone-footer-bg样式

移动端兼容适配的分析

网站适配的终端可以用js或媒体查询的方式获取,分配对应的样式。布局上采用相对单位,百分比和flex的弹性方式。对移动端的特殊性进行适配,如1px问题,默认样式等。

em与rem之间的区别以及移动设备中的rem适配方案

em与rem之间的区别:共同点:它们都是像素单位,它们都是相对单位。不同点:em大小是基于父元素的字体大小,rem大小是基于根元素(html)的字体的大小

React Native之图片/宽高/字体平台适配

为了提高代码的兼容性,我们有时需要判断当前系统的平台,然后做一些适配。比如,我们在使用 StatusBar 做导航栏的时候,在 iOS 平台下根视图的位置默认情况下是占据状态栏的位置的,我们通常希望状态栏下面能显示一个导航栏

基于Vue/React项目的移动端适配方案

本文的目标是通过下文介绍的适配方案,使用vue或react开发移动端及H5的时候,不需要再关心移动设备的大小,只需要按照固定设计稿的px值布局,提升开发效率。

移动端适配

首先是名词介绍:像素:Pixel,就是物理像素:也就是设备像素,逻辑像素:(css像素)单位为 px设备像素比:devicePixelRatio,(在高倍屏会出现1px变大的问题)。css单位em:相对于当前对象内文本的字体尺寸

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!