移动端适配方案

总共的方法：

1)通过媒体查询的方式

2)以天猫首页为代表的 flex 弹性布局

3)以淘宝首页为代表的 rem+viewport缩放

4)rem 方式

1.基本知识点：

物理像素：硬件上屏幕上横向和纵向有多少个像素点。

逻辑像素dp：程序认为屏幕上横向和纵向有多少个像素点。

设备像素比(device pixel ratio )：设备像素比（dpr） = 物理像素 / 设备独立像素

1px = (dpr)的平方*dp

2.Viewport（视口）

layout viewport布局视口：如果把移动设备上浏览器的可视区域设为viewport的话，某些网站就会因为viewport太窄而显示错乱，所以这些浏览器就决定默认情况下把viewport设为一个较宽的值，比如980px，这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了。把这个浏览器默认的viewport叫做 layout viewport。

document.documentElement.clientWidth/Height返回布局视口的尺寸

visual viewport视觉视口：浏览器可视区域的大小。window.innerWidth/Height返回视觉视口的尺寸

ideal viewport理想视口：完美适配移动设备的viewport，首先不需要用户缩放和横向滚动条就能正常的查看网站的所有内容；第二，显示的文字的大小是合适，比如一段14px大小的文字，不会因为在一个高密度像素的屏幕里显示得太小而无法看清，理想的情况应该是无论是在何种密度屏幕，何种分辨率下，显示出来的大小都是差不多的。不只是文字，

设置告诉浏览器使用它的理想视口：

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

3.适配方案

一.适配方案讲解

1)视口要如下设置：

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

initial-scale ----- 初始的缩放比例

minimum-scale ----- 允许用户缩放到的最小比例

maximum-scale ----- 允许用户缩放到的最大比例

2)先拿设计稿竖着的横向分辨率除以100得到body元素的宽度

如果设计稿基于iphone6，横向分辨率为750，body的width为750 / 100 = 7.5rem

3)通过以下代码设置html的font-size:

document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';

5)布局时，设计图标注的尺寸除以100得到css中的尺寸

二，单位讲解

px：相对于显示器屏幕分辨率而言的。

em:相对于父级字体大小

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

rem:相对于根元素的字体大小（html）

vh：等于viewport高度的1/100。例如，如果浏览器的高是900px,1vh求得的值为9px。

vw：如果显示窗口宽度为750px,1vw求得的值为7.5px。

二．通过媒体查询

它主要是通过查询设备的宽度来执行不同的 css 代码，最终达到界面的配置。

1》媒体查询的引入

1)在屏幕最大是600px的时候加载“smallscreen.css”

<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css" />

2)也就是在特定屏幕下加载style.css

<style type="text/css" media="screen and (max-width: 600px)"> 
    @import url("css/style.css");
  </style>

3)

@media screen and (max-width: 600px) {
    选择器 {
      属性：属性值；
    }
  }

width  ----  viewport的宽度（width=device-width意思是：宽度等于设备宽度）

initial-scale ----- 初始的缩放比例

minimum-scale ----- 允许用户缩放到的最小比例

maximum-scale ----- 允许用户缩放到的最大比例

user-scalable ----- 用户是否可以手动缩放

2》缺点：

1)代码量比较大，维护不方便

2)为了兼顾大屏幕或高清设备，会造成其他设备资源浪费，特别是加载图片资源

3)为了兼顾移动端和PC端各自响应式的展示效果，难免会损失各自特有的交互方式