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 查看本文章