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即可实现

Answer 2

字号的问题

Answer 3

-_-||我经常遇到这种字体的问题，一般我就用-webkit-transform: scale(0.8);这样缩放。

Answer 4

关联文章

Answer 5

先了解下dpr 是什么意思吧，http://www.html-js.com/articl... 这篇文章相当好。 再说下开发的事情，就是谷歌浏览器可以设置最小字号的，你可以设置最小字号8px,方便调试。 还有rem 不是万能的，小屏手机上一般都会适配px 调低一点，但是很多小字体就更小了。要考虑到这个问题。 dpr 为3的屏幕上 字体好像也会小一点。