问题是这样的,设计师给我的是1080宽的设计稿,某个元素宽度为944,那么我该写多少px才能适配多种设备(安卓,ios)呢?不用rem。
问题是这样的,设计师给我的是1080宽的设计稿,某个元素宽度为944,那么我该写多少px才能适配多种设备(安卓,ios)呢?不用rem。
啊,又是一个被无知设计师坑的前端朋友啊,心疼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,那就要在响应式上有一定功底才行,多用百分比,多用弹性盒模型,多考虑如何自适应
8 回答4.5k 阅读✓ 已解决
6 回答3.1k 阅读✓ 已解决
6 回答2.3k 阅读
5 回答6.2k 阅读✓ 已解决
3 回答2.4k 阅读
3 回答2.4k 阅读✓ 已解决
3 回答1.4k 阅读✓ 已解决
为啥有这奇怪需求。。。rem实际效果就是px啊。。。不用rem还非要用px写。。。。
解决方案:@media 一个尺寸一个尺寸的写