2倍設(shè)計圖怎么使用

老聽人說，移動端設(shè)計圖要給750px，720px之類的云云。
我們ui給了720px的圖，我這邊寫的時候，怎么利用這個呢？
因為我發(fā)現(xiàn)他的字有一些是很小很小的，
而我在電腦上開發(fā)的話，chrome最小也得是12px的字啊，可是12px依然比設(shè)計圖上的字大。

還有就是，我用rem布局，根據(jù)文檔寬度動態(tài)設(shè)置html的font-size，
設(shè)置來設(shè)置去，字體還是沒辦法縮小放到那啊，
font-size的值怎么可能會小于12px呢？

都說rem寫移動端好，感覺都成規(guī)范、成必備的了。可是到底好在哪呢？
我拿到720px、750px的設(shè)計圖，該怎么寫呢？

又聽人說，要給meta標簽加?xùn)|西什么的，可是我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">

望各位大佬不吝賜教！萬分感謝！

回答

編輯回答

初心

電腦上的chrome瀏覽器確實是有最小12px的問題，移動端的貌似木有（我接觸的主要是app內(nèi)嵌的h5頁面，所以你可以自己驗證下）。
viewport那個meta值是隨著視網(wǎng)膜屏（蘋果4s）出現(xiàn)的，為了解決物理像素和邏輯像素的問題而出來，移動端一般都會加上這個，這個和12px的約束也沒有關(guān)系。
rem的好處是可以讓頁面，字體之類的有“等比例縮放”的效果，但瀏覽器上還是會轉(zhuǎn)成px再渲染，所以還是受12px的約束
一般UI給我一張750寬的圖的時候，是根據(jù)蘋果6s手機設(shè)計的，6s手機邏輯像素是375（CSS像素），物理像素寬是750，像素密度是2，代表原來一個邏輯像素點是用（2*2=4）物理像素點去渲染。所以，如果你用375的圖，那圖片會糊。
我們這邊UI出圖之前，一般會選擇一個有限匹配的手機型號，根據(jù)手機的物理分辨率作圖，出圖后，前端這邊除以對應(yīng)的像素密度，就是對應(yīng)的CSS像素了。然后為了在不同尺寸的手機上有等比例縮放的效果，會使用rem，只要根據(jù)頁面寬度修改html的font-size即可實現(xiàn)

2018年8月6日 22:23

編輯回答

話寡

-_-||我經(jīng)常遇到這種字體的問題，一般我就用-webkit-transform: scale(0.8);這樣縮放。

2018年7月14日 04:08

編輯回答

巫婆

字號的問題

2017年1月20日 17:49

編輯回答

終相守

關(guān)聯(lián)文章

2017年6月19日 18:06

編輯回答

萌小萌

先了解下dpr 是什么意思吧，http://www.html-js.com/articl... 這篇文章相當好。再說下開發(fā)的事情，就是谷歌瀏覽器可以設(shè)置最小字號的，你可以設(shè)置最小字號8px,方便調(diào)試。還有rem 不是萬能的，小屏手機上一般都會適配px 調(diào)低一點，但是很多小字體就更小了。要考慮到這個問題。 dpr 為3的屏幕上字體好像也會小一點。

2017年8月31日 14:48