2倍设计图怎么使用

Question

老听人说，移动端设计图要给750px，720px之类的云云。我们ui给了720px的图，我这边写的时候，怎么利用这个呢？因为我发现他的字有一些是很小很小的，而我在电脑上开发的话，chrome最小也得是12px的字啊，可是12px依然比设计图上的字大。还有就是，我用rem布局，根据文档宽度动态设置html的font-size，设置来设置去，字体还是没办法缩小放到那啊，font-size的值怎么可能会小于12px呢？都说rem写移动端好，感觉都成规范、成必备的了。可是到底好在哪呢？我拿到720px、750px的设计图，该怎么写呢？又听人说，要给meta标签加东西什么的，可是我meta标签加了它照样是单倍像素啊！下面是我的meta标签：<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">望各位大佬不吝赐教！万分感谢！

Answer 1

1. 电脑上的chrome浏览器确实是有最小12px的问题， 移动端的貌似木有（我接触的主要是app内嵌的h5页面，所以你可以自己验证下）。

2. viewport那个meta值是随着视网膜屏（苹果4s）出现的，为了解决物理像素和逻辑像素的问题而出来，移动端一般都会加上这个，这个和12px的约束也没有关系。

3. rem的好处是可以让页面，字体之类的有“等比例缩放”的效果，但浏览器上还是会转成px再渲染，所以还是受12px的约束

4. 一般UI给我一张750宽的图的时候，是根据苹果6s手机设计的，6s手机逻辑像素是375（CSS像素），物理像素宽是750，像素密度是2，代表原来一个逻辑像素点是用（2*2=4）物理像素点去渲染。所以，如果你用375的图，那图片会糊。

5. 我们这边UI出图之前，一般会选择一个有限匹配的手机型号，根据手机的物理分辨率作图，出图后，前端这边除以对应的像素密度，就是对应的CSS像素了。然后为了在不同尺寸的手机上有等比例缩放的效果，会使用rem，只要根据页面宽度修改html的font-size即可实现