前辈好,我一直以来都对PC端,手机端的页面,还有设计稿如何处理等等等等问题都没彻底弄才明白。。今天想把一直以来的疑问提出来,希望前辈多多指教 = =
首先是PC端的问题
1.请问现在PC端的设计稿是不是一般都是1920宽的??
2.请问如果要适配苹果那个retina显示器的话,是不是把当前的PSD文件直接放大2倍或者3倍??我只知道移动端的IOS是2倍或者3倍,PC端的我不清楚。。,然后一样切。
3.问题来了,比如我按照设计稿100 X 100的宽高写了,但是到RET屏幕的话是会缩小2倍或者3倍的(请问我这样说对吗???),
那是不是说我要写两套CSS,通过JS判断当前设备是不是ret显示器( 这样说对吗?)来加载不同的css文件???
移动端的
1.请问现在的移动端的设计稿是不是一般是640,或者750的
2.比如说现在是640的设计稿,请问是不是所有的宽高切下来全部要除于2,而且还要是偶数的,请问字体要怎么处理呢??
3.苹果那个2倍3倍的,是不是也跟PC一样?就是说直接放大2,3倍,切,然后又判断是不是RT??
4.我觉得我问的越来越乱,实在是搞不懂啊,针对移动端,我现在只会用阿里的flexible.js来写,因为使用很简单,设计稿直接切,多少就多少,全部用rem,字体另外处理,但是我对它的原理完全搞不懂。。。
5.关于PC,移动都适配的
最后是我现在才想到的,以前用bootstrap写过一些练习页面,页面好像全部都写PX的,请问用bootstrap的话就不用处理这么多吗???
问题有点多,可能还很脑残,希望前辈见谅,望指导!
https://segmentfault.com/a/11...
之前写过的关于图片的选取的。
既然你写过ios的,那么你首先要知道为什么你需要不同的切图?
不同的切图是为了在不同分辨率的设备上,表现出最好的效果,最简单的例子就是,100300的图片,放到300900的容器中,就会出现马赛克。当100300的图片,放到50150的容器中,也会模糊,因为显然多了很多的像素点。
然后你需要明白什么是逻辑像素
逻辑像素就是设备告诉浏览器,我的宽是多少,高是多少
什么是物理像素
物理像素就是你的手机分辨率是1920*1080,那么这个就是物理像素
物理像素和逻辑像素的联系?
我对Android比较熟悉,就拿Android来讲一下。
android中是有计算公式的: 分辨率为1920 *1080的手机,屏幕为5英寸。。。
那么计算公式就是 sqrt(19201920+10801080) /5 /160 约等于3 ,这个称作scale,其实也就是物理像素缩小scale倍变为逻辑像素。
这里算出来物理像素就是 1080 / 3 = 360 。所以你会发现你写的H5,其实360px就可以撑满屏幕的宽度。
有了这些概念就可以考虑你的问题了。
1.请问现在PC端的设计稿是不是一般都是1920宽的??
如果你的设计只想适配1920宽的电脑,那么久只有1920的设计稿,如果设计想要适配多种的,那么我至少认为设计应该懂Grid,也就是响应式布局,针对不同宽度,而又不同表现。
2.请问如果要适配苹果那个retina显示器的话,是不是把当前的PSD文件直接放大2倍或者3倍??我只知道移动端的IOS是2倍或者3倍,PC端的我不清楚。。,然后一样切。
对于图片来说,retina的图片分辨率应该是设计提供给你的,如果你需要去为了retina屏显示的图片更加好看,那么你需要多套图片。否则一种足矣。和Ios的两倍三倍原理一致。
3.问题来了,比如我按照设计稿100 X 100的宽高写了,但是到RET屏幕的话是会缩小2倍或者3倍的(请问我这样说对吗???),
那是不是说我要写两套CSS,通过JS判断当前设备是不是ret显示器( 这样说对吗?)来加载不同的css文件???
这个就需要上面的概念了。我们写代码的时候哦,只需要关注逻辑像素。retina屏,举个例子,mac pro,28801440,普通屏幕,1440720,那么这两个屏幕要写两套css?肯定不是。
对于retina屏幕,逻辑像素是2880 / 4 = 720 ,普通屏幕,1440 / 2 = 720,其实是一样的。那么为什么retina屏幕要除以4,而普通屏幕只要除以2,这个其实就是个规范,屏幕设计的规范,retina屏的4和普通屏的2其实都是屏幕这个设备本身提供的。所以只需要写一种就足够了,当然如果逻辑像素不同,你需要适配的话,这个就涉及到响应式布局了。