css - 移动端如何适配Android的不同手机的不同分辨率？

Question

通过

@media(min-width:320px){} iPhone4,5,5s,
@media(min-width:360px){} android,
@media(min-width:375px){} iphone6,6s,
@media(min-width:414px){} iphone6plus,6splus

适配移动端分辨率。
问题：@media(min-width:360px){} 不同的手机会有不同的显示，min-width都是360px,但是在手机上显示效果不同。如何适配安卓机？

Answer 1

你在iPhone里也看到了，不同的型号的iPhone有不同的device-width，Android里也是一样的，如果是要适配某款机型，查到他的device-width即可，虽然Android机型繁多，但是device0-width基本上都是几个固定的值。

Answer 2

http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html
推荐用这个w3cplus的方案，不需要写那么多media,简单方便

Answer 3

建议去搜索一下 viewport 相关的文章看看原理，只靠几句简单的回单是很难弄清楚的。
比如这篇：http://weizhifeng.net/viewports.html

阿里巴巴2016前端实习生招聘 & 社招
https://cnodejs.org/topic/56d6591ae3889756776c7e79

Answer 4

最简单的实现是百分比宽度布局:
比如最小宽度320px,最大宽度420px,在320px和420px之间自动适应宽度.
<img>标签使用百分比宽度属性width="40%"也能够自动保持宽高比例.

min-width:320px;
max-width:420px;
width:100%;
overflow-x: hidden;
margin: 0 auto;

Answer 5

怎么写太古老了。现在都用rem了。回头给你发篇文章。