@media only screen 移動端裝置查詢判斷
阿新 • • 發佈:2019-02-01
/*媒體查詢*/
/*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 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) {}
/*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){}
不羈的狂魚@小魚編輯