老聽人說，移動端設(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ī)范、成必備的了?？墒堑降缀迷谀哪兀课夷玫?20px、750px的設(shè)計圖，該怎么寫呢？又聽人說，要給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">望各位大佬不吝賜教！萬分感謝！
1 回答
慕姐8265434
TA貢獻1813條經(jīng)驗 獲得超2個贊
電腦上的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)
添加回答
舉報
0/150
提交
取消