老聽人說，移動端設計圖要給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,u
1 回答
慕工程0101907
TA貢獻1887條經驗 獲得超5個贊
電腦上的chrome瀏覽器確實是有最小12px的問題， 移動端的貌似木有（我接觸的主要是app內嵌的h5頁面，所以你可以自己驗證下）。
viewport那個meta值是隨著視網膜屏（蘋果4s）出現的，為了解決物理像素和邏輯像素的問題而出來，移動端一般都會加上這個，這個和12px的約束也沒有關系。
rem的好處是可以讓頁面，字體之類的有“等比例縮放”的效果，但瀏覽器上還是會轉成px再渲染，所以還是受12px的約束
一般UI給我一張750寬的圖的時候，是根據蘋果6s手機設計的，6s手機邏輯像素是375（CSS像素），物理像素寬是750，像素密度是2，代表原來一個邏輯像素點是用（2*2=4）物理像素點去渲染。所以，如果你用375的圖，那圖片會糊。
我們這邊UI出圖之前，一般會選擇一個有限匹配的手機型號，根據手機的物理分辨率作圖，出圖后，前端這邊除以對應的像素密度，就是對應的CSS像素了。然后為了在不同尺寸的手機上有等比例縮放的效果，會使用rem，只要根據頁面寬度修改html的font-size即可實現
- 1 回答
- 0 關注
- 780 瀏覽
添加回答
舉報
0/150
提交
取消