@media only screen 移动端设备查询判断

/*媒体查询*/

/*iphone 4  screen-width:320px*/
@media only screen and (min-width: 320px) and (max-width: 360px) {

.aui-yuwq-share .aui-yuwq-share-list{
   
   width: 280px;
   height: 360px;
   margin-left: -140px;
        margin-top: -180px;

}

.aui-yuwq-ThinkChange-img{

width: 300px;
height: 300px;
margin-left: -150px;
margin-top: -150px;

}

}


/*三星Galaxy S5  screen-width:360px*/
@media only screen and (min-width: 360px) and (max-width: 375px) {

.aui-yuwq-share .aui-yuwq-share-list{
   
   width: 300px;
   height: 396px;
   margin-left: -150px;
        margin-top: -198px;

}

.aui-yuwq-ThinkChange-img{

width: 336px;
height: 336px;
margin-left: -168px;
margin-top: -168px;

}

}


/*iphone 6  screen-width:375px*/
@media only screen and (min-width: 375px) and (max-width: 414px) {

.aui-yuwq-share .aui-yuwq-share-list{
   
   width: 324px;
   height: 432px;
   margin-left: -162px;
        margin-top: -216px;

}

.aui-yuwq-ThinkChange-img{

width: 346px;
height: 346px;
margin-left: -173px;
margin-top: -173px;

}

}


/*iphone 6plus  screen-width:414px*/
@media only screen and (min-width: 414px) and (max-width: 768px) {

.aui-yuwq-share .aui-yuwq-share-list{
   
   width: 342px;
   height: 486px;
   margin-left: -171px;
        margin-top: -243px;

}

.aui-yuwq-ThinkChange-img{

width: 384px;
height: 384px;
margin-left: -192px;
margin-top: -192px;

}

}


/*iPad Mini  screen-width:768px*/
@media only screen and (min-width: 768px){

.aui-yuwq-share .aui-yuwq-share-list{
   
   width: 484px;
   height: 570px;
   margin-left: -242px;
        margin-top: -285px;

}

.aui-yuwq-ThinkChange-img{

width: 568px;
height: 568px;
margin-left: -284px;
margin-top: -284px;

}

}


注意@media only screen写在需要操控的样式后面,对已声明样式才可以重新赋予新样式,媒体查询@media写在style靠前是不规范的写法,切记。

如果懒得不愿动手可直接将@media的代码放置style尾部。


/*iphone 4  screen-width:320px*/

@media only screen and (min-width: 320px) and (max-width: 360px) {}


/*三星Galaxy S5  screen-width:360px*/
@media only screen and (min-width: 360px) and (max-width: 375px) {}


/*iphone 6  screen-width:375px*/
@media only screen and (min-width: 375px) and (max-width: 414px) {}


/*iphone 6plus  screen-width:414px*/
@media only screen and (min-width: 414px) and (max-width: 768px) {}


/*iPad Mini  screen-width:768px*/
@media only screen and (min-width: 768px){}


不羁的狂鱼@小鱼编辑


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值