泉州浮桥网站建设开发培训@media only screen 手机端适配判断-泉州新华电脑培训-网页编程
作者：福建百科教育 时间：2019-09-10
点击数：
收藏 分享到：
泉州浮桥网站建设开发培训@media only screen 手机端适配判断-泉州新华电脑培训
做好屏幕自适应，一般只需要注意iPhone5，x，plus,等问题，注意使用absolute，relative
/*iphone 6,7,8plus screen-width:414px */
@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3) {}
/*iphone X screen-width:375px, screen-hight: 812px */
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {}
/*iphone 5,5E screen-height:568px*/
@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2) {}
/*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){}
注意@media only screen写在需要操控的样式后面，对已声明样式才可以重新赋予新样式，媒体查询@media写在style靠前是不规范的写法，切记。
如果懒得不愿动手可直接将@media的代码放置style尾部。
————————————————
