设计稿为1080*1920,适配多种移动设备,不用rem,怎么写?
问题是这样的,设计师给我的是1080宽的设计稿,某个元素宽度为944,那么我该写多少px才能适配多种设备(安卓,ios)呢?不用rem。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
问题是这样的,设计师给我的是1080宽的设计稿,某个元素宽度为944,那么我该写多少px才能适配多种设备(安卓,ios)呢?不用rem。
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
接受
或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
发布评论
评论(5)
为啥有这奇怪需求。。。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跟移动端稿子可以说是不能互用,最好是有移动端设计稿