移动端的适配，你们是怎么完成呢？适应各个终端

Question

在移动端 很多手机的型号，用

@media only screen and () and () {}

来实现 但是怎么知道各种手机的屏幕宽度呢? 我每次调完之后 发现总是有手机上样式不对，有的手机还不充满屏幕很难看。
我现在用的rem是之前在网上找了一个 感觉不是很好，听说淘宝一套rem自适应做的还不错。
你们的手机端适配怎么完成的呢？

@media only screen and (min-width: 100px) and (max-width: 370px) {}
@media only screen and (min-width: 370px) and (max-width: 390px) {}
@media only screen and (min-height: 610px) and (max-height: 650px) {}

我就写了这三个，应该不对，因为我一个里面可以控制两个不同型号的手机 。 请大神赐教 我的这个
@media 该怎么写，对应着什么型号手机 感谢

Answer 1

postcss-pxtorem 搭配 amfe-flexible。
项目里直接写px打包自动转rem 很方便。

Answer 2

显示设备的宽度都有一定的规格，进入浏览器的开发者模式，调成移动端设备，可以模拟各种规格的设备尺寸。

Answer 3

vw布局
amfe-flexible
或者原来的rem布局
lib-flexible
搭配postcss食用最佳

Answer 4

开发中用的比较多的就是media 和viewport视口 设备像素比 和 rem 和vw vh 这文章很详细

Answer 5

vw了解下。rem的升级版。

Answer 6

有一种偷懒的写法，html { font-size:13.333333vw}然后用rem作为单位。

不过这种不是很细致的适配，会有稍微的误差。

@橘南枳北 的做法可能更合理。

Answer 7

vw了解下。rem的升级版。

Answer 8

我们用的是postcss将px转成vw，感觉挺好用的。viewportWidth设为设计图宽度，其他就不用管了，元素在设计图中是多少px，程序中就写多少，postcss插件根据手机宽度自动转换。
转换的原理其实就是相似三角形。某切图宽度(px)：设计图宽度(px) = 需要转换的vw: 100vw

Answer 9

如果按你的写法的话，首先移动端小的是320px的iphone5/SE，没有你的100px。当然也有小的，最小一般适配到300px;然后就是最大的一般的移动端大小都会在750px以下。如果有ipad，的平板的话，得考虑768px和1024px两个大小。你可以去百度或者csdn搜一下移动适配方法，会有适合的方法