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

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

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

都說rem寫移動(dòng)端好，感覺都成規(guī)范、成必備的了?？墒堑降缀迷谀哪兀?br>我拿到720px、750px的設(shè)計(jì)圖，該怎么寫呢？

又聽人說，要給meta標(biāo)簽加?xùn)|西什么的，可是我meta標(biāo)簽加了它照樣是單倍像素?。?br>下面是我的meta標(biāo)簽：

<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瀏覽器確實(shí)是有最小12px的問題，移動(dòng)端的貌似木有（我接觸的主要是app內(nèi)嵌的h5頁面，所以你可以自己驗(yàn)證下）。
viewport那個(gè)meta值是隨著視網(wǎng)膜屏（蘋果4s）出現(xiàn)的，為了解決物理像素和邏輯像素的問題而出來，移動(dòng)端一般都會加上這個(gè)，這個(gè)和12px的約束也沒有關(guān)系。
rem的好處是可以讓頁面，字體之類的有“等比例縮放”的效果，但瀏覽器上還是會轉(zhuǎn)成px再渲染，所以還是受12px的約束
一般UI給我一張750寬的圖的時(shí)候，是根據(jù)蘋果6s手機(jī)設(shè)計(jì)的，6s手機(jī)邏輯像素是375（CSS像素），物理像素寬是750，像素密度是2，代表原來一個(gè)邏輯像素點(diǎn)是用（2*2=4）物理像素點(diǎn)去渲染。所以，如果你用375的圖，那圖片會糊。
我們這邊UI出圖之前，一般會選擇一個(gè)有限匹配的手機(jī)型號，根據(jù)手機(jī)的物理分辨率作圖，出圖后，前端這邊除以對應(yīng)的像素密度，就是對應(yīng)的CSS像素了。然后為了在不同尺寸的手機(jī)上有等比例縮放的效果，會使用rem，只要根據(jù)頁面寬度修改html的font-size即可實(shí)現(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... 這篇文章相當(dāng)好。再說下開發(fā)的事情，就是谷歌瀏覽器可以設(shè)置最小字號的，你可以設(shè)置最小字號8px,方便調(diào)試。還有rem 不是萬能的，小屏手機(jī)上一般都會適配px 調(diào)低一點(diǎn)，但是很多小字體就更小了。要考慮到這個(gè)問題。 dpr 為3的屏幕上字體好像也會小一點(diǎn)。

2017年8月31日 14:48