前端 - 设计稿为1080*1920，适配多种移动设备，不用rem，怎么写？

问题描述

问题是这样的，设计师给我的是1080宽的设计稿，某个元素宽度为944，那么我该写多少px才能适配多种设备(安卓,ios)呢？不用rem。

问题解答

为啥有这奇怪需求。。。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这些其实无差,只不过是有些矫情的设计师非得推一堆道理罢了.