视图适配

@media only screen and (max-width:320px){.lincoapp-home-slideImage a{min-height:165px}
}
@media only screen and (min-width:321px) and (max-width:360px){.lincoapp-home-slideImage a{min-height:185px}
}
@media only screen and (min-width:361px) and (max-width:375px){.lincoapp-home-slideImage a{min-height:193px}
}
@media only screen and (min-width:376px) and (max-width:384px){.lincoapp-home-slideImage a{min-height:198px}
}
@media only screen and (min-width:385px) and (max-width:393px){.lincoapp-home-slideImage a{min-height:203px}
}
@media only screen and (min-width:394px) and (max-width:400px){.lincoapp-home-slideImage a{min-height:206px}
}
@media only screen and (min-width:401px){.lincoapp-home-slideImage a{min-height:213px}
}

@media screen and (min-width: 1025px){
body {
font-family: "Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
}
}
@media screen and (min-width: 1024px){
body {
background-color: #fff;
}
}

@media (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 667px) and (min-device-width: 375px) {
.mm_appmsg .rich_media_meta, .mm_appmsg .rich_media_inner {
font-size: 17px;
}
}

@media (-webkit-min-device-pixel-ratio: 3) and (max-device-width: 736px) and (min-device-width: 414px) {
.mm_appmsg .rich_media_title {
font-size: 25px;
}
}

 

 max-widht指展示的最大宽度，一般是浏览器窗口宽度。
max-device-width是指所展示使用的设备支持宽度，如一般电脑分辨率1280px，手机设备支持展示宽度（安卓有种宽度如360 ，480）等.

 -webkit-min-device-pixel-ratio: 设备像素比

.icon {
  background-image: url(example.png); /* 普通尺寸图片 */
  background-size: 200px 300px;
  height: 300px;
  width: 200px;
}

@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
  .icon {
    background-image: url(example@2x.png); /* 2倍尺寸图片 */
  }
}

转载于:https://www.cnblogs.com/y896926473/p/5324131.html