一倍圖:設(shè)計(jì)稿320px 原名.png。
二倍圖:設(shè)計(jì)稿640px 原名@2x.png
三倍圖:設(shè)計(jì)稿750px 原名@3x.png
設(shè)置最大寬度最小寬度:父盒子要設(shè)置max-width min-width
給盒子設(shè)置最大寬度與最小寬度就是為了解決移動(dòng)端自適應(yīng)問題
設(shè)計(jì)稿為二倍圖時(shí):
給父盒子設(shè)置最大寬度最小寬度
/*最外層盒子 要設(shè)置最大寬度與最小寬度*/
.layout {
/*寬度設(shè)置100%*/
width: 100%;
/*最大寬度 設(shè)計(jì)稿是640的設(shè)計(jì)稿是二倍圖 二倍圖640*/
max-width: 640px;
/*最小寬度 最小ip4 尺寸是320*/
min-width: 320px;
margin: 0 auto;
height: 1000px;
background-color: #ccc;
}
當(dāng)子盒子設(shè)為固定定位的時(shí)候 因?yàn)槎ㄎ辉貐⒖嫉氖且暱诘奈恢? 所以我們需要給子盒子設(shè)置一個(gè)最大寬度與最小寬度 防止亂跑