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

时间：2016-04-27 18:44:29 阅读：245 评论：0 收藏：0 [点我收藏+]

先用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){}

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

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

原文：http://www.cnblogs.com/fstgshow/p/5439821.html

踩

(0)

评论一句话评论（0）

分享档案

更多>