1.兼容手机浏览器

在head加入

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=yes, width=device-width" />

2.CSS3 - @media 判断iphone / ipad 机型

兼容iphone4/4s：

@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){

} 

兼容iphone5/SE ：

@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){
} 

兼容iphone6/6s，iphone7，iphone8s ：

@media (device-height:667px) and (-webkit-min-device-pixel-ratio:2){
}

兼容iphone6 Plus,iphone7 Plus,iphone8 Plus：

@media (device-height:736px) and (-webkit-min-device-pixel-ratio:2){
} 

兼容iphoneX：

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){
}

3.图片在页面定位，不随页面尺寸变化而位移

利用两个div容器，将需要定位的图片放置在子容器中。单位用百分比%

例如：

html

<div class="father">
   <div class="son">
      <a href="http://www.google.com">
      <img class="img1" src="tmall.jpg"/>
      </a>
   </div>
 <img src="qiyu.jpg"/>
</div>

css

img {
     max-width: 100%;
     max-height: 100%;
}
.img1{
  position: absolute;
  left: 0%;
  top: 60%;
  height: 24%;
  width: 101%;
}
.father{
    position:relative;
}
.son{
    position: absolute;
    top: 70%;
    right: 25%;
    width: 50%;
    height: 33%;
}

扫描二维码关注公众号，回复： 3985477 查看本文章