移动端适配怎么做

原文链接：https://www.cnblogs.com/MaggieGao/p/6994868.html

1、自适应屏幕宽度之viewport，在html中添加meta标签，让网页宽度默认等于屏幕宽度。

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

扩展viewport属性：

　　　　（1）width 设置viewport的宽度，可以是数字，或者使用字符串“device-width”；

             （2）initial-scale 页面初始的缩放，首次 load 的时候缩放比例；

             （3）minimum-scale/maximum-scale 允许用户缩放的最小/最大比例 ；

             （4）height 设置viewport的高度，很少设置这个属性；

              （5）user-scalable 用户是否可以手动缩放 ，一般两个值 yes/no；

2、 使用框架搭建页面

（1） bootstrap（基于jQuery的响应式工具，适用于移动,pad,pc）；

（2）ElementUI（PC）,MintUI（移动端）饿了么基于vue组件库开发的；

3、宽度的严格布局书写 

因为页面根据屏幕的宽度调整布局，所以不能使用绝对宽度的布局或者是绝对宽度的元素一般使用width:50%  /  width:auto (块级元素默认是auto)。

4、图片自适应

           img {max-width:100%} 由于老的IE不支持max-width{width:100%}

5、 border 1px 问题 

由于最小的物理像素差异，一条直线的显示，iphone5它能显示的最小宽度其实是理论上说的0.5px。不是所有手机浏览器都能识别border: 0.5px;，ios7以下，android等其他系统里，0.5px会被当成为0px处理。通常是给元素border-bottom: 1px solid #ddd;，然后通过transform: scaleY(.5)缩小0.5倍来达到0.5px的效果。

6、图片高清问题

通过css媒体查询库或者javascript条件判断，在不同的dpr下加载不同尺寸的图片。

无论从管理上，还是从性能上看，只要有可能，尽量部署独立的图片服务器。

7、屏幕适配布局问题 
响应式布局

（1）流式布局+媒体查询：用来解决不同宽度的布局问题，父级宽度不够的时候，子级节点会“挤下去”    ---  使用css3，根据屏幕分辨率进行不同的样式应用。

优劣： （1）这种布局通吃pc和移动端，做到精细处，两者的效果都很好，（2）缺点是媒体查询是有限的，也就是可以枚举出来的（3）对设计要求简单、清晰，复杂的设计稿会直接弄死前端，同时需要多个设计稿（4）  css3低版本浏览器不支持。

（2）伸缩布局：使用的是Flexbox ，有兼容性问题。整体思路：考虑把一个元素变成一个伸缩容器  -->伸缩容器中子元素的排列方式  -->子元素所占空间。
伸缩布局的属性：
                （1 ）主轴方向 flex-direction:row /row-reverse（右到左）/column/column-reverse(下到上)
　　　　　  （2）伸缩项目在主轴的对齐方式 justify-content：flex-start /flex-end/center/space-between/space-around
　　　　　  （3） 伸缩项目是否换行 flex-wrap：nowrap/wrap
　　　　　  （4）换行后对齐方式 align-content:stretch:拉伸/flex-start...sapce-around
　　　　　  （5）不换行对齐方式 align-items 默认拉伸 值同上
 伸缩项目的属性：
     　　　　  （1） 伸缩项目在伸缩容器中所占的空间 flex 值 数字 比例
　　　　　　 （2）自己的对齐方式 align -self：start /end/center 
　　　　　　 （3）排列顺序 order 数字 值越小越靠前

8、rem

手机屏幕分辨率越来越多了，假设我们的网页需要适配的iPhone4（320px），iPhone6(375px)，iPhone6 Plus(414px)。我们的需求是，当用户浏览网页时，根据屏幕的尺寸，来向用户展示更适合用户的文字、图片、按钮大小。（1）iPhone4的时候，希望网页的内容文字大小12px=12*（320/320）px，按钮的大小是240px。（2）Iphone6的时候，希望网页的内容文字大小14px=12*（375/320）px，按钮的大小是280px，等比缩放。（3）Iphone6 Plus的时候，希望网页的内容文字大小15.5px=12*（414/320）px，按钮的大小是310px，等比缩放。以前的做法在rem概念没引入前我们的做法是，以最小的屏幕（iPhone）做一版数据出来，然后通过js去控制viewport 的 initial-scale （网页缩放比例）。如：iPhone4下：

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

那么对应的到了iPhone6需要调整缩放比例 initial-scale=375/320 =1.18

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

早期【天猫】移动端也是用用这样的方法实现的。能满足我们的需求。
缺点是：这样做会使得，因为initial-scale越来越大，相当于拉伸网页，而使得在大屏幕的移动端设备下，文字、图片会变模糊。

rem（font size of the root element）是指相对于根元素的字体大小的单位（可以联想一下em）。也就是比如定义：

html{ font-size:14px}

那么设置某个元素的字体大小为2rem就相当于设置为2*14px=28px。