h5 页面自适应，完美，弹

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2753 天前的主题，其中的信息可能已经有所发展或是发生改变。

目前知道的 h5 页的自适应方法有两种，但都不是很完美。

一种是快被被淘汰的：

这个的好处是所有元素都可以用 px 来规定宽高，因为页面会随着设备的尺寸自动缩放。但是这种方法很坑，因为写出来的页面是固定比例的，在不同设备下页面比例之外的部分都是一片白色，非常难看。

第二种方法是现在最常用的：

页面宽度等于设备宽度，高度 100%就好了。

这种方法的缺点在于，因为页面宽高不确定，页面里元素只能用百分比来规定尺寸。有些情况百分比不是那么方便：比如要让 div 中的字体垂直居中，但是 div 高度是用百分比写的没办法用 line-height。又比如 iphone5 这种奇葩机型，按比例写出来的页面肯定会崩溃的。

是不是我孤陋寡闻，其实还有一种完美解决自适应问题的方法呢。

页面

百分比

viewport

div

12 条回复 • 2017-06-15 15:41:00 +08:00

horizon

2017-06-14 17:04:28 +08:00

垂直居中用 flex 啊。。为啥还要用百分比。。

blackMountain

2017-06-14 17:05:46 +08:00

@horizon 不是阿，写了一个 div，然后让 div 中的文字垂直居中，这个怎么用 flex 阿

est

2017-06-14 17:08:35 +08:00

@blackMountain table 大法好

xss

2017-06-14 17:33:18 +08:00

不是非常懂前端
但是垂直居中这种需求我一般是
display: table
还是 table-cell 来着?

horizon

2017-06-14 17:35:06 +08:00

@blackMountain 为啥不行。。
http://output.jsbin.com/lamewofuqa

rabbbit

2017-06-14 17:49:34 +08:00

.div {display: flex;align-items: center;}
试试这个?

Biwood

2017-06-14 18:27:07 +08:00

div {
display: table-cell;
vertical-align: middle;
}

或者

div {
display: flex;
align-items: center;
}

都可以

lupkcd

2017-06-14 19:09:30 +08:00

来大兄弟试试这句代码 `<meta name="viewport" content="width=640,target-densitydpi=device-dpi,maximum-scale=1.0, user-scalable=no">`
还有各种 rem 方案等

chairuosen

2017-06-14 19:09:47 +08:00

rem 方案啊

dtw5t

2017-06-14 20:06:39 +08:00

flex+rem

blackMountain

2017-06-15 14:13:14 +08:00

@rabbbit @Biwood 恩，谢谢，学到了一种新的垂直居中方法，以前都用 line-height 等于元素的高

meepo3927

2017-06-15 15:41:00 +08:00

有成熟方案的，请搜 flexible.js