移动端单屏适配如何做

Question

需求：将设计稿（根据iphone6设计的）1屏显示完毕。
问题点：纵横比比较大的设备（比如：iphone4,iphone5），按设计比例来显示的话，就会出现显示不完整的问题
如何解决这个痛点呢？

Answer 1

比例相差太大的情况，我是高度显示百分百 宽度按设计稿比例算出的 两边会有留白，虽然不怎么完美，但如果两边背景弄的好的话，显示还是比较不错的

Answer 2

错了， 之前 我写了个一屏渲染的。 貌似 用的 是 把视口高度font，作为html 里的根字体大小, 除背景图外，
里面的页面元素 我用 absoulte定位 + rem 定位。
假如里面 a 元素 的 (width / font) rem (height / font) rem (top / font) rem (left / font) rem
...

Answer 3

这里得具体情况具体分析了，如果你的设计稿纯色（或者设计稿尾部是纯色），那么可以用背景色填充，如果不是纯色，而是复杂颜色，那么这种没法处理，不管是用背景图还是怎么的都会有图片显示不完整问题（把高度缩小肯定体验不好）

Answer 4

使用rem，我自己有个简单的整理
根据设计图标注的尺寸，使用rem单位替换px单位即可

Answer 5

单屏我一般用vw和vh做单位，图全是用背景图

Answer 6

单屏页就会有这样的痛点，除了用rem能解决部分的设备外，还有一些比例差距很奇怪 ，甚至在一些手机自带浏览器打开底部有自带工具条的时候，一般都是用媒体查询去针对一些元素进行宽度减小，间距减小，我常用的做法是用js去判断屏幕的可用高度/可用宽度的比例，一般在1.5以下的都是需要大调的设备，基本做不到和设计稿相同 毕竟屏幕比例都变化了