在真实项目中设计师给我们一般是:640960 6401136 750*1334
响应式布局的解决方案:
1>流式布局法
容器或者是盒子一般都不写固定值,而是使用百分比(相对于视口区域的百分比)
其余的样式:字体、高度、margin、padding等都按照设计稿上标注尺寸的一半来设置
对于有些屏幕尺寸下,我们设置的固定值看起来不是特别的好看,需要用@media微调
特殊情况是设计稿是640px,在iphone6 6p会虚化,我们需要的图片是1280
@media all and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px){
.box{
background: url('big.jpg').....;
}
}
/*针对于平板或安卓机*/
@media all and (min-width: 640px){
.box{
background: url('big.jpg').....;
}
}
苹果手机的尺寸:5s是320px 6是375px 6plus是414宽度
常用的安卓尺寸:320、360、480、540、640、720.....
6plus是三倍高清屏屏幕的尺寸,一般设计师给的图片是1280px