手机页面媒体查询手机高度宽度

先用jq获得手机的宽高

alert(window.screen.width+","+window.screen.height+";"+$(window).width()+','+$(window).height());

其中 $(window).height()就是手机的屏幕高度 单位px

我的是华为畅想5  这个值是923

因为设计图纸的高度是1070px 而苹果手机远大于这个高度 大约是1130-1100之间

所以就用 1070位临界点

@media screen and (max-height:1070px){

 //这里是是渣渣安卓手机 高度小于1070的样式

.p3-flower{
width:230px;height:221px;z-index:10;
position:absolute;top:0%;left:19%;
}

}
@media screen and (min-height:1070px){

//这里是苹果 高度高与1070的写法 
.p3-flower{
width:230px;height:221px;z-index:10;
position:absolute;top:6%;left:19%;
}
}

这里我是检测了手机的屏幕高度，也可以检测屏幕的宽度的

@media screen and (min-width:640px){}

媒体查询博大精深 除了可以查询屏幕 还可以查询其他的 具体的我也不会了 大家可以多找找资料

备注： 媒体查询的样式 也就是一个元素会有多套样式 一定要全部写在媒体查询里面，不能在最后在写一套 因为这个前面被媒体查询渲染，但是到后面就又会渲染的，这个是大坑，我在测试的时候就是犯了这个错误浪费不少时间