移动端页面尺寸之一倍图二倍图三倍图

一倍图:设计稿320px 原名.png。
二倍图:设计稿640px 原名@2x.png
三倍图:设计稿750px 原名@3x.png

设置最大宽度最小宽度:父盒子要设置max-width min-width

给盒子设置最大宽度与最小宽度就是为了解决移动端自适应问题


设计稿为二倍图时:

给父盒子设置最大宽度最小宽度

/*最外层盒子  要设置最大宽度与最小宽度*/
.layout {
    /*宽度设置100%*/
    width: 100%;
    /*最大宽度 设计稿是640的设计稿是二倍图 二倍图640*/
    max-width: 640px;
    /*最小宽度  最小ip4 尺寸是320*/
    min-width: 320px;
    margin: 0 auto;
    height: 1000px;
    background-color: #ccc;
}

当子盒子设为固定定位的时候 因为定位元素参考的是视口的位置 所以我们需要给子盒子设置一个最大宽度与最小宽度 防止乱跑

你可能感兴趣的:(移动端页面尺寸之一倍图二倍图三倍图)