問(wèn)題描述

問(wèn)題是這樣的，設(shè)計(jì)師給我的是1080寬的設(shè)計(jì)稿，某個(gè)元素寬度為944，那么我該寫(xiě)多少px才能適配多種設(shè)備(安卓,ios)呢？不用rem。

問(wèn)題解答

為啥有這奇怪需求。。。rem實(shí)際效果就是px啊。。。不用rem還非要用px寫(xiě)。。。。解決方案：@media 一個(gè)尺寸一個(gè)尺寸的寫(xiě)

啊，又是一個(gè)被無(wú)知設(shè)計(jì)師坑的前端朋友啊，心疼1秒鐘。設(shè)計(jì)稿這個(gè)尺寸，你以為用了rem就能拯救你嗎。

首先，1080*1920的尺寸，是給Android或者iOS開(kāi)發(fā)的設(shè)計(jì)稿尺寸，而不會(huì)給我們前端開(kāi)發(fā)的尺寸。如果你足夠有底氣，你可以要求設(shè)計(jì)重新按照我們前端的尺寸來(lái)設(shè)計(jì)。那就是嚴(yán)格按照iphone6的2倍尺寸，也就是寬度為750，高度隨意。但是看上去你也不是足夠強(qiáng)勢(shì) ~ ~

那就自己折磨自己，用折中的方式來(lái)解決吧。[適配效果會(huì)很差]

方式1：保留 375/1080 ，這個(gè)比值，就是實(shí)際尺寸與設(shè)計(jì)稿尺寸的比假如你的這個(gè)元素的實(shí)際尺寸為x，你量出來(lái)的尺寸為944，那么就有 x/944 = 375/1080 = 呵呵所以，你慢慢算吧 ~ ~

方式2：自己動(dòng)手把設(shè)計(jì)稿在PS中修改成寬度750，或者保存一張?jiān)O(shè)計(jì)稿的圖片，然后丟在一個(gè)750寬度的設(shè)計(jì)稿里，再量尺寸這樣，假如你量出來(lái)的元素尺寸為y，實(shí)際尺寸為x，那么計(jì)算就簡(jiǎn)單很多了 x/y = 375/750 = 0.5

最后

移動(dòng)端的頁(yè)面，在尺寸上，只有寬度從320px到580px的區(qū)別，不用太在意是Android還是iOS** 如果該頁(yè)面沒(méi)有展示在pc端的必要，那么就用rem吧，只是移動(dòng)端的話(huà)并不需要使用媒體查詢(xún)。而且媒體查詢(xún)會(huì)導(dǎo)致工作量劇增。慎重使用。** 如果你不用rem，那就要在響應(yīng)式上有一定功底才行，多用百分比，多用彈性盒模型，多考慮如何自適應(yīng)

使用ps等比縮小設(shè)計(jì)稿https://segmentfault.com/a/11...往下翻有地方說(shuō)明了。

淘寶的自適應(yīng)方案 lib-flexable.js還有一個(gè)加hotcss.js這個(gè)玩意，和淘寶的那個(gè)差不多

麻煩給設(shè)計(jì)一巴掌。PC跟移動(dòng)端稿子可以說(shuō)是不能互用，最好是有移動(dòng)端設(shè)計(jì)稿

我家的前端都是用media來(lái)自適應(yīng)的,一張頁(yè)面適應(yīng)于不同設(shè)備,通常也就那些個(gè)常用寬高.至于em,rem,px這些其實(shí)無(wú)差,只不過(guò)是有些矯情的設(shè)計(jì)師非得推一堆道理罷了.