教你@media媒体查询来适配ipad iphone5678plus 各种屏幕

<style lang="less" rel="stylesheet/less" type="text/less" scoped> /*iPhone6/7/8*/ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-device-pixel-ratio: 2) { /* .属性名{ ...样式 } */ } /*iPhone6/7/8 Plus*/ @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-device-pixel-ratio: 3) { /* .属性名{ ...样式 } */ } /*iPhone X*/ @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-device-pixel-ratio: 3) { /* .属性名{ ...样式 } */ } /*移动端竖屏 css*/ @media only screen and (orientation: portrait) { /* .属性名{ ...样式 } */ } /*移动端横屏 css*/ @media only screen and (orientation: landscape) { /* .属性名{ ...样式 } */ } /* 判断ipad */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { /* .属性名{ ...样式 } */ } /* ipad横屏 */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { /* .属性名{ ...样式 } */ } /* ipad竖屏 */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { /* .属性名{ ...样式 } */ } /* 判断iphone5 */ /* 横屏竖屏判断方法与ipad一样 */ @media only screen and (min-device-width: 320px) and (max-device-width: 568px) { /* .属性名{ ...样式 } */ } /* 判断iphone4-iphone4s */ /* 横屏竖屏判断方法与ipad一样 */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) { /* .属性名{ ...样式 } */ }</style>

@media媒体查询 这功能是非常强大的，他可以让你定制不同的分辨率和设备，并在不改变内容的情况下，让你制作的web页面在不同的分辨率和设备下都能显示正常，并且不会因此而丢失样式。

/* 判断ipad */@media only screenand (min-device-width : 768px)and (max-device-width : 1024px){/* style */}/* ipad横屏 */@media only screenand (min-device-width : 768px)and (max-device-width : 1024px)and (orientation : landscape){/* style */}/* ipad竖屏 */@media only screenand (min-device-width : 768px)and (max-device-width : 1024px)and (orientation : portrait){/* style */}/* 判断iphone5 *//* 横屏竖屏判断方法与ipad一样 */@media only screenand (min-device-width : 320px)and (max-device-width : 568px){/* style */}/* 判断iphone4-iphone4s *//* 横屏竖屏判断方法与ipad一样 */@media only screenand (min-device-width : 320px)and (max-device-width : 480px){/* style */}/* iphone5分辨率 */screen Width = 320px (css像素)screen Height = 568px (css像素)screen Width = 640px (实际像素)screen Height = 1136px (实际像素)Device-pixel-ratio:2/* iphone4-iphone4s分辨率 */screen Width = 320px (css像素)screen Height = 480px (css像素)screen Width = 640px (实际像素)screen Height = 960px (实际像素)Device-pixel-ratio:2

一、最大宽度Max Width

<link rel="stylesheet" media="screen and (min-width:900px)" rel="external nofollow" href="big.css" type="text/css" />
表示：当屏幕大于或等于900px时，将采用big.css样式来渲染Web页面。
二、多个Media Queries使用

<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" rel="external nofollow" rel="external nofollow" href="style.css" type="text/css" />
表示：当屏幕在600px-900px之间时采用style.css样式来渲染web页面。

三、设备屏幕的输出宽度Device Width

<link rel="stylesheet" media="screen and (max-device-width: 480px)" rel="external nofollow" href="iphone.css" type="text/css" />
表示：iphone.css样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的max-device-width所指的是设备的实际分辨率，也就是指可视面积分辨率
四、not关键字

<link rel="stylesheet" media="not print and (max-width: 1200px)" rel="external nofollow" href="print.css" type="text/css" />
表示：not关键字是用来排除某种制定的媒体类型，换句话来说就是用于排除符合表达式的设备。
五、only关键字

<link rel="stylesheet" media="only screen and (max-device-width:240px)" rel="external nofollow" href="android240.css" type="text/css" />
六、其他

<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" rel="external nofollow" href="medium.css" type="text/css" />
表示：在Media Query中如果没有明确指定Media Type，那么其默认为all

<link rel="stylesheet" type="text/css" rel="external nofollow" rel="external nofollow" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />
表示：另外还有使用逗号（，）被用来表示并列或者表示或， style.css样式被用在宽度小于或等于480px的手持设备上，或者被用于屏幕宽度大于或等于960px的设备上。