设计稿为1080*1920,适配多种移动设备,不用rem,怎么写?

发布于 2022-09-04 10:27:36 字数 75 浏览 21 评论 0

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

海拔太高太耀眼 2022-09-11 10:27:36

为啥有这奇怪需求。。。rem实际效果就是px啊。。。不用rem还非要用px写。。。。
解决方案:@media 一个尺寸一个尺寸的写

木槿暧夏七纪年 2022-09-11 10:27:36

啊,又是一个被无知设计师坑的前端朋友啊,心疼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,那就要在响应式上有一定功底才行,多用百分比,多用弹性盒模型,多考虑如何自适应

倾城花音 2022-09-11 10:27:36

使用ps等比缩小设计稿
https://segmentfault.com/a/11...
往下翻有地方说明了。

熊抱啵儿 2022-09-11 10:27:36

淘宝的自适应方案 lib-flexable.js
还有一个加hotcss.js这个玩意,和淘宝的那个差不多

沧笙踏歌 2022-09-11 10:27:36

麻烦给设计一巴掌。PC跟移动端稿子可以说是不能互用,最好是有移动端设计稿

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文