問題描述

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

問題解答

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

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

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

那就自己折磨自己，用折中的方式來解決吧。[適配效果會很差]

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

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

最后

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

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

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

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

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