视图适配

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



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

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

@media (-webkit-min-device-pixel-ratio: 3) and (max-device- 736px) and (min-device- 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;
   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