问题是这样的,设计师给我的是1080宽的设计稿,某个元素宽度为944,那么我该写多少px才能适配多种设备(安卓,ios)呢?不用rem。
ringa_lee
為啥有這奇怪需求。 。 。 rem實際效果就是px啊。 。 。不用rem還非要用px寫。 。 。 。 解:@media 一個尺寸一個尺寸的寫
啊,又是一個被無知設計師坑的前端朋友啊,心疼1秒鐘。 設計稿這個尺寸,你以為用了rem就能拯救你嗎。
首先,1080*1920的尺寸,是給Android或是iOS開發的設計稿尺寸,而不會給我們前端開發的尺寸。 如果你夠有底氣,你可以要求設計重新按照我們前端的尺寸來設計。 那就是嚴格依照iphone6的2倍尺寸,也就是寬度為750,高度隨意。 但是看起來你也不是夠強勢 ~ ~
那就自己折磨自己,用折衷的方式來解決吧。 [適配效果會很差]
方式1:保留375/1080 ,這個比值,就是實際尺寸與設計稿尺寸的比假如你的這個元素的實際尺寸為x,你量出來的尺寸為944,那麼就有x/944 = 375/1080 = 呵呵所以,你慢慢算吧~ ~
方式2:自己動手把設計稿在PS中修改成寬度750,或者保存一張設計稿的圖片,然後丟在一個750寬度的設計稿裡,再量尺寸這樣,假如你量出來的元素尺寸為y,實際尺寸為x,那麼計算就簡單很多了x/y = 375/750 = 0.5
最後
行動端的頁面,在尺寸上,只有寬度從320px到580px的區別,不用太在意是Android還是iOS** 如果該頁面沒有展示在pc端的必要,那麼就用rem吧,只是移動端的話並不需要使用媒體查詢。 而且媒體查詢會導致工作量劇增。慎重使用。 ** 如果你不用rem,那就要在響應式上有一定功底才行,多用百分比,多用彈性盒模型,多考慮如何自適應
用ps等比縮小設計稿https://segmentfault.com/a/11...往下翻有地方說明了。
淘寶的自適應方案 lib-flexable.js還有一個加hotcss.js這個玩意,和淘寶的那個差不多
麻煩給設計一巴掌。 PC跟行動端稿子可以說是不能互用,最好是有行動端設計稿
我家的前端都是用media來自適應的,一張頁面適應於不同設備,通常也就那些個常用寬高.至於em,rem,px這些其實無差,只不過是有些矯情的設計師非得推一堆道理罷了.
為啥有這奇怪需求。 。 。 rem實際效果就是px啊。 。 。不用rem還非要用px寫。 。 。 。
解:@media 一個尺寸一個尺寸的寫
啊,又是一個被無知設計師坑的前端朋友啊,心疼1秒鐘。
設計稿這個尺寸,你以為用了rem就能拯救你嗎。
首先,1080*1920的尺寸,是給Android或是iOS開發的設計稿尺寸,而不會給我們前端開發的尺寸。
如果你夠有底氣,你可以要求設計重新按照我們前端的尺寸來設計。
那就是嚴格依照iphone6的2倍尺寸,也就是寬度為750,高度隨意。
但是看起來你也不是夠強勢 ~ ~
那就自己折磨自己,用折衷的方式來解決吧。 [適配效果會很差]
方式1:
保留375/1080 ,這個比值,就是實際尺寸與設計稿尺寸的比
假如你的這個元素的實際尺寸為x,你量出來的尺寸為944,那麼就有x/944 = 375/1080 = 呵呵
所以,你慢慢算吧~ ~
方式2:
自己動手把設計稿在PS中修改成寬度750,或者保存一張設計稿的圖片,然後丟在一個750寬度的設計稿裡,再量尺寸
這樣,假如你量出來的元素尺寸為y,實際尺寸為x,那麼計算就簡單很多了x/y = 375/750 = 0.5
最後
行動端的頁面,在尺寸上,只有寬度從320px到580px的區別,不用太在意是Android還是iOS
** 如果該頁面沒有展示在pc端的必要,那麼就用rem吧,只是移動端的話並不需要使用媒體查詢。
而且媒體查詢會導致工作量劇增。慎重使用。 **
如果你不用rem,那就要在響應式上有一定功底才行,多用百分比,多用彈性盒模型,多考慮如何自適應
用ps等比縮小設計稿
https://segmentfault.com/a/11...
往下翻有地方說明了。
淘寶的自適應方案 lib-flexable.js
還有一個加hotcss.js這個玩意,和淘寶的那個差不多
麻煩給設計一巴掌。 PC跟行動端稿子可以說是不能互用,最好是有行動端設計稿
我家的前端都是用media來自適應的,一張頁面適應於不同設備,通常也就那些個常用寬高.至於em,rem,px這些其實無差,只不過是有些矯情的設計師非得推一堆道理罷了.