手机 media

 <meta name=viewport content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">

竖屏 @media screen and (orientation:portrait)

横屏 @media screen and (orientation:landscape)

意思是对所有类型的设备  @media all and (min-width:1024px) and (max-width:1199px) 

div {
            float: left;
            width: 50%;
            border: 1px solid #000;
            box-sizing: border-box;
        }
        
        img {
            width: 100%;
            height: auto;
        }

上面的box-sizing的意思是width将border 和padding都加上了在加里面的里面的内容总共50%，正常的是content-box就是里面的内容