前言
最近公司在考虑将原有的pc端项目改造成移动端适配项目 希望能在代价最低的前提下完成改造 于是我开始进行了一些方案的调研 现记录下来
- 自适应网站
响应式网站，h5网站，宽屏网站，这些都可以称为自适应网站，简单的说就是一个网站可以兼容不同的终端，比如：电脑、ipad、手机等。不需要为每个设备制作一个版本的网站，网站自动识别、兼容，完成电脑网站，自动拥有手机网站、微网站。同时电脑网站、手机网站、微网站统一后台、数据同步，便于管理。
常见的处理方案
1.media queries(媒体查询) 这套方案估计大家都比较熟悉了 主要就是运用css来判断设备宽度在不同的区间运用不同的样式 个性化定制会比较高 这里看一下例子 pc端
2.rem
rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位，rem计算的规则是依赖根元素。原理是先按定高宽设计出来页面，然后转换为rem单位，配合js查询屏幕大小来改变html的font-size 这边大家可以看看淘宝和网易的做法
下面的例子这是单纯使用rem布局来达到自适应 字体宽高 边距等全部使用rem代替px
3.flex或者百分比布局
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 一般移动端浏览器对flex支持都比较好 所以很多布局思路会使用弹性盒子布局 可以结合百分比布局来实现想要的效果
这边大家可以参考移动端flex自适应布局
下面的例子是局部使用flex来达到页面某些元素自适应 其实整个页面还包含了rem和媒体查询
4.viewport
viewprot 指的是移动设备浏览器中放置页面的一个虚拟的窗口，该窗口可大于或小于移动设备的可视区域。当我们将一个pc端的网页放到移动端的时候，移动端浏览器会将pc端的网页按照一定的比例完整的显示出来，这是因为移动端的浏览器默认的会将网页渲染在一个比例比较大的viewport中排版（ios默认的是980px，Android4.0以上为980px），然后通过比例缩放看到整个页面的全貌。
为什么要把viewport放在最后写呢 因为如果我们做自适应网站基本都要在页面head里面加上一个meta标签。这段代码意思就是让viewport的宽度等于物理设备屏幕宽度，不允许用户缩放。主流的web app都是这么设置的。
大家可以看看这篇文章的具体介绍
<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设置 让浏览器自行缩放 虽然可能效果不如自己个性化定制那么好 但是也是可以作为一种较为简单通用的方案去使用
