移动端适配方案总结

前言

最近公司在考虑将原有的pc端项目改形成移动端适配项目 但愿能在代价最低的前提下完成改造 因而我开始进行了一些方案的调研 现记录下来

• 自适应网站

响应式网站，h5网站，宽屏网站，这些均可以称为自适应网站，简单的说就是一个网站能够兼容不一样的终端，好比：电脑、ipad、手机等。不须要为每一个设备制做一个版本的网站，网站自动识别、兼容，完成电脑网站，自动拥有手机网站、微网站。同时电脑网站、手机网站、微网站统一后台、数据同步，便于管理。

常见的处理方案

1.media queries(媒体查询) 这套方案估计你们都比较熟悉了 主要就是运用css来判断设备宽度在不一样的区间运用不一样的样式 个性化定制会比较高 这里看一下例子 pc端

移动端

2.rem

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位，rem计算的规则是依赖根元素。原理是先按定高宽设计出来页面，而后转换为rem单位，配合js查询屏幕大小来改变html的font-size 这边你们能够看看淘宝和网易的作法

segmentfault.com/a/119000001…

下面的例子这是单纯使用rem布局来达到自适应 字体宽高 边距等所有使用rem代替px

3.flex或者百分比布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 通常移动端浏览器对flex支持都比较好 因此不少布局思路会使用弹性盒子布局 能够结合百分比布局来实现想要的效果

这边你们能够参考移动端flex自适应布局

blog.csdn.net/qq_34648000…

下面的例子是局部使用flex来达到页面某些元素自适应 其实整个页面还包含了rem和媒体查询

4.viewport

viewprot 指的是移动设备浏览器中放置页面的一个虚拟的窗口，该窗口可大于或小于移动设备的可视区域。当咱们将一个pc端的网页放到移动端的时候，移动端浏览器会将pc端的网页按照必定的比例完整的显示出来，这是由于移动端的浏览器默认的会将网页渲染在一个比例比较大的viewport中排版（ios默认的是980px，Android4.0以上为980px），而后经过比例缩放看到整个页面的全貌。

为何要把viewport放在最后写呢 由于若是咱们作自适应网站基本都要在页面head里面加上一个meta标签。这段代码意思就是让viewport的宽度等于物理设备屏幕宽度，不容许用户缩放。主流的web app都是这么设置的。

你们能够看看这篇文章的具体介绍

www.jianshu.com/p/5c546401e…

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
复制代码

• width=device-width ：表示宽度是设备屏幕的宽度
• initial-scale=1.0：表示初始的缩放比例
• minimum-scale=1.0：表示最小的缩放比例
• maximum-scale=1.0：表示最大的缩放比例
• user-scalable=no：表示用户是否能够调整缩放比例

但是我的在研究移动端适配的时候 发现了不少网站其实并无刻意地去设置viewport
尤为是当网页一开始并无考虑到移动端自适应方案的时候 宽度都是写死的px具体值

若是不特地设置viewport 那么浏览器会自动缩放，缩放到让其不出现滚动条 其实也算是某种程度上的自适应

咱们能够看一下效果

• 宽度写死 不设置viewport

  

• 宽度写死 设置viewport

  

能够看到样式明显乱了 按照原始px值显示出来 出现滚动条

小结

若是考虑作一个自适应的网站 那么开始的时候就须要把思路规划好 根据设计稿来设置本身的rem 使用媒体查询 flex和百分比布局等能够用一套代码个性化的去定制pc端和移动端样式

若是须要对现有pc端项目进行移动端改造 那么能够根据项目复杂程度自行选用技术方案 固然 若是对自适应要求不是很高 对于老旧项目改造的时候 能够考虑将项目版心宽度做为自适应的基础宽度 而后去掉viewport设置 让浏览器自行缩放 虽然可能效果不如本身个性化定制那么好 可是也是能够做为一种较为简单通用的方案去使用