media query

1、link的方式

<!-- iphone5使用的样式 -->    <link rel="stylesheet" media="(max-height: 568px)" href="css/iphone5.css" type="text/css" />    <!-- iphone6+使用的样式 -->    <link rel="stylesheet" media="(min-height: 667px)" href="css/iphone6+.css" type="text/css" />

2、css的方式

@media screen and (max-height: 568px){    .main-icon{      height:30pt;      width: 30pt;      position: relative;      z-index: 0;      margin-top: -10pt;    }}

3、多个属性的情况

@media screen and (max-height:300px) and (max-width: 100px){        .main{            height: 50px;            width: 50px;            background-color: red;        }    }