flexible

1.遇到了什么问题

其实就一句话，怎么保证设计稿在不同型号不同分辨率的手机上面进行高保真的还原？

2.业界怎么解决

其实也是一句话，设计师提供要支持的主流机型分辨率大小的设计稿，然后前端在符合该分辨率的机型下1：1进行还原，其他分辨率机型下进行等比例的缩放；

2.1. 设计师提供的设计稿的宽高是多少？

每个公司的标准不一样，我司是750px * 1334px，即按照iPhone6的设备像素大小来提供；（设备像素就是你的屏幕上面横宽有多少物理像素点）

2.2. 前端怎么写代码？

比如量到设计稿上面有一个100px * 100px 的元素，那么在代码里面我们就先写
.wrapper {
    width: 100px;
    height: 100px;
}
效果如下图：

![clipboard.png](/img/bVbaejl)

很明显不是我们期待的效果，为什么呢？
因为我们潜意识里面认为，代码里面的1px === 设备像素里面的1px；

其实，并不是这样；
那么，代码里面的1px =? 设备像素里面的1px呢？
答案是，看你设备的 layout viewport大小，而它也决定着默认情况下根元素的宽；在iPhone6里面layout viewport的宽是980px，所以就看到了上面那样100px的方块那么小；

那么，怎么改layout viewport大小呢？
答案是，通过meta标签，<meta name="viewport" content="width=你想要的宽">，我们这里把它改成750px，效果如下图：

![clipboard.png](/img/bVbafKa)

那么此时，代码里面的1px === 设备像素里面的1px === 设计稿里面的1px；

2.3. 不同设备怎么等比例缩放？

2.4. 上面的缩放方案会有什么问题？

图片模糊、字体、1px