84669 personnes étudient
152542 personnes étudient
20005 personnes étudient
5487 personnes étudient
7821 personnes étudient
359900 personnes étudient
3350 personnes étudient
180660 personnes étudient
48569 personnes étudient
18603 personnes étudient
40936 personnes étudient
1549 personnes étudient
1183 personnes étudient
32909 personnes étudient
问题是这样的,设计师给我的是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这些其实无差,只不过是有些矫情的设计师非得推一堆道理罢了.