移动端设计方案--如何设计移动端屏适配方案

一、前言

在众多的移动设备中，前端开发人员如何在不同屏幕大小，不同程度的高清屏下去百分百的还原设计稿，从来都不是一件简单的事情，需要考虑众多因素，权衡利弊，做出取舍，结合需求去选择最合适的方案。

之前有一篇：如何设计移动端高清方案

 

二、面对的问题

在不同大小和高清的屏幕下：

（1）如何保证 页面布局的一致性：不错乱，不变形；

（2）如何保证 字体大小的一致性：大屏显示更大，小屏显示更小或者更多；

（3）如何保证 1px的边框一致性：不同的高清屏也能正常显示1px的高度；

（4）如何正确 图片清晰度一致性：不停大小和高清屏下都能看到清晰的图片。

如果把这几个问题按重要程度排序的话，我想应该是这样的：
布局 > 字体大小 > 1px边框 > 高清图

 

三、布局

方案一：百分比布局

使用子元素在父元素下的百分比为单位，使用子元素在不同屏幕下宽度表现一致。利用img标签的特性，只设宽度等图片加载完，这种方法会导致大量的重排，并且非固定高度会导致懒加载等功能难以实现。

缺点：

（1）宽度是可以随屏幕适应，但是高度不能，宽屏会被拉伸，具体表现为，iphone4中看到的是正方形，而在iphone6s中会看到长方形。

（2）需要手动计算子元素在父元素下的百分比，计算麻烦。

（3）百分比的大小往往需要精确到小数位6到8位。

 

方案二：媒体查询调整

1、一种是结合百分比或者flex布局，对特定的模块在特定的屏幕宽度范围内做调整。

2、另外一种是结合rem，对不同的屏幕宽度范围内的设备设置不同的rem参照字体大小。