移动端前端适配方案（总结） -- 面试重点

在网上搜了一下，很多面试都会被问到移动端适配方法的问题，最近看了一些文章，这里总结一下。

首先，谈一下目前为止出现的一些关于移动端适配的技术方案：

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

1.Media Queries

meida 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）

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

实现原理
根据rem将页面放大dpr倍, 然后viewport设置为1/dpr.

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

mobile-fe4.png

mobile-fe3.png

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

4、rem实现
比如说“魅族”移动端的实现方式， viewport也是固定的：
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">。

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

!function (d) {var c = d.document;var a = c.documentElement;var b = d.devicePixelRatio;var f;function e() {var h = a.getBoundingClientRect().width, g;if (b === 1) {h = 720}if(h>720) h = 720;//设置基准值的极限值g = h / 7.2;a.style.fontSize = g + "px"}if (b > 2) {b = 3} else {if (b > 1) {b = 2} else {b = 1}}a.setAttribute("data-dpr", b);d.addEventListener("resize", function () {clearTimeout(f);f = setTimeout(e, 200)}, false);e()}(window);

css通过sass预编译，设置量取的px值转化rem的变量$px: (1/100)+rem;

1像素边框高清

1.淘宝实现方式
上面说到的淘宝的实现方式即rem+viewport 缩放来实现。

transform: scale(0.5)

CSS代码：

div{width: 1px;height: 100%;display: block;border-left: 1px solid #e5e5e5;-webkit-transform: scale(.5);transform: scaleX(.5);
}

缺点：

圆角无法实现，实现4条边框比较麻烦，并且只能单独实现，如果嵌套，会对包含的效果产生不想要的效果，所以此方案配合:after和before独立使用较多。

box-shadow

实现方法：
利用CSS对阴影处理的方式实现0.5px的效果。

-webkit-box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);

优点：

基本所有场景都能满足，包含圆角的button，单条，多条线。

缺点：

颜色不好处理，黑色 rgba(0,0,0,1) 最深的情况了。有阴影出现，不好用。
大量使用box-shadow可能会导致性能瓶颈。
四条边框实现效果不理想。

2.图片实现

使用 background-image 实现1px有两种方式: 渐变 linear-gradient 或直接使用图片(base64)。

渐变 linear-gradient (50%有颜色，50%透明)

单条线：

div{height: 1px;background-image:-webkit-linear-gradient(top,transparent 50%,#000 50%);background-position: top left;background-repeat: no-repeat;background-size: 100% 1px;
}

多线条：

div{background-image: -webkit-linear-gradient(top,transparent 50%,#000 50%),-webkit-linear-gradient(bottom, transparent 50%, #000 50%),-webkit-linear-gradient(left, transparent 50%, #000 50%),-webkit-linear-gradient(right, transparent 50%, #000 50%);background-size: 100% 1px,100% 1px,1px 100%,1px 100%;background-repeat: no-repeat;background-position: top left, bottom left, left top, right top;

优点:
可以设置单条,多条边框
可以设置颜色

缺点:
大量使用渐变可能导致性能瓶颈
代码量大
多背景图片有兼容性问题

移动端前端适配方案（总结） -- 面试重点相关推荐

移动端适配方案以及面试总结（初学者看出来）
移动端适配的方案概念: 所谓移动端适配,就是WebApp在不同尺寸的屏幕上等比显示方法一:JS动态修改配合CSS预处理器(less) // 计算屏幕宽度 var screen = document ...
谈谈我的移动端rem适配方案
最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...
浅谈移动端——前端适配详解
1. 什么是前端适配从UI展现层面上: 我们期望不同尺寸的设备,页面可以自适应的展示或者进行等比缩放,从而在不同的尺寸的设备下看起来协调或者差不多. 从代码实现层面上: 我们希望前端适配可以用用尽可 ...
超详细的rem+vw移动端屏幕适配方案
在说具体内容之前,我们必须了解几个概念,就是:Retina屏.物理像素.设备独立像素.设备像素比在CSS中我们一般使用px作为单位,需要注意的是,CSS样式里面的px和物理像素并不是相等的.CSS中 ...
“postcss-px-to-viewport”——移动端前端适配的又一种方案
0.前言博主以前在做移动端的时候主要使用 @media screen and (min-width: 1200px){ } 或者灵活点,会用之前一种流行已久的移动端适配方案,那就是rem,也就是会用 ...
Vue.js——PC端和移动端样式适配方案
此方案整合了断点响应式样式,和移动端样式重分配. 前言最近在学习Vue的项目架构,查询了很多移动端样式适配,整合了一下我自己的适配方案做一个记录,可能不是最好的,但我自己用着还蛮顺手的~欢迎大家补充 ...
移动端html适配方案,原生js实现兼容常规pc、大屏、移动端适配方案
1.设计稿 1)pc设计稿为19201080的可视化大屏,16:9比例设计 2)大屏设计稿35841152的可视化大屏,28:9比例设计 3)移动端设计稿宽750的可视化大屏 2.适配不同屏幕 1) ...
移动端css适配方案
文章目录前言一.使用meta标签二.rem控制 1.设计图以PC为模板 2.设计图以移动端为模板总结前言大多数时候开发页面需要做一定适配,这里记录两种 1.设计图以PC为模板 2.设计图以 ...
vue中使用第三方UI库的移动端rem适配方案
需求:使用vue-cli脚手架搭建项目,并且使用第三方的UI库(比如vant,mint ui)的时候,因为第三方库用的都是用px单位,无法使用rem适配不同设备的屏幕. 解决办法:使用px2rem-l ...

移动端前端适配方案（总结） -- 面试重点

1像素边框高清

移动端前端适配方案（总结） -- 面试重点相关推荐

最新文章

热门文章