页面拉伸缩小时盒子掉落乱序问题

两个盒子同时浮动，缩小页面时第二个盒子被挤到下面



解决方案：两个盒子放在一个大盒子里



盒子中放入放图片，给图片设置宽高会拉伸图片

        img{
            width: 100px;
            height: 200px;    
        }

会成这样：

修改为max-width: 40px;max-height: 40px;即可
如果图片小于设定的值，就按照图片原图大小显示，如果图片大小超过设定的值就按照图片原来的比例缩小图片，而不会拉伸变形。

        img{
            max-width: 100px;
            max-height: 200px;
        }

就会按设置的宽高显示：

也可以用百分比来调图片的大小等比例缩放亦或通过size的百分比设置

        img{ 
            width: 100px;
            height: 200px;    
            width: 100%;
            height: auto;
        }

页面缩小后div换行
解决办法：用百分比布局。就是不固定宽度大小为px，而是利用根据父级元素的宽高百分比缩放。


不同分辨率显示的不同，有时内容（文字和图片等）大小不会随着放大缩小而缩放
解决办法：不要使用绝对宽度，而要用百分比来设置
不使用绝对大小px，使用相对大小rem，注意rem=px/100