在真實項目中設(shè)計師給我們一般是:640960 6401136 750*1334
響應(yīng)式布局的解決方案:
1>流式布局法
容器或者是盒子一般都不寫固定值,而是使用百分比(相對于視口區(qū)域的百分比)
其余的樣式:字體弟塞、高度温鸽、margin、padding等都按照設(shè)計稿上標(biāo)注尺寸的一半來設(shè)置
對于有些屏幕尺寸下客冈,我們設(shè)置的固定值看起來不是特別的好看告嘲,需要用@media微調(diào)
特殊情況是設(shè)計稿是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是三倍高清屏屏幕的尺寸,一般設(shè)計師給的圖片是1280px