标签：bsp int 选择 pre str 不同 阅读器 col 表示
指查询媒体的类型和媒体的屏幕宽度
//类型大概有三种screen、print、speech
@media screen and (min-width:300px) { /*选择打印机与屏幕阅读器之外的所有设备，并且最小宽度 >= 300px 才会生效。*/
color:red;
}
一套样式不可能适配所有屏幕，针对不同的屏幕大小写样式，让我们在不同大小的屏幕上都能正常显示
all：所有设备（默认值）
screen：屏幕
print：打印机
speech：屏幕阅读器
@media all and (min-width:200px){} //查询所有宽度>=200px的媒体
@media (min-width:200px){} //默认all可以省略不写
与：and
或：,
非：not
或
@media screen and (min-width:200px) , screen and (min-width:180px){} //查询最小宽度为200px的屏幕，或，查询最小屏幕为180px的屏幕。 @media screen and (min-width:200px) , (min-width:180px){} //查询最小宽度为200px的屏幕，或，查询所有媒体屏幕为180px的屏幕。
非
@media not screen and (min-width:200px) and (max-width:1000px){} //查询最小宽度为200px最大宽度为1000px之外的所有宽度。（not与and用，not作用到最后） @media not screen and (min-width:200px) , (min-width:100px){} //查询屏幕宽度最小200px之外，或最小宽度为100px的所有媒体屏幕。（not与,用，not作用到,之前）
@media (min-width:200px){} //指()里面的内容表达式
width：查询宽度
min-width：查询最小宽度
max-width：查询最大宽度
-webkit-device-pixel-ratio：设备像素比等于xx的时候
-webkit-min-device-pixel-ratio：设备像素比 >= xx的时候
-webkit-max-device-pixel-ratio：设备像素比 <= xx的时候
//像素比单位一般为1/2/3等，当像素比为3，表示设备1px显示css的3px
orientation属性
landscape：横屏
portrait：竖屏
断点设置
xs超小屏：<576px（手机）
sm小屏：576~768px（大屏手机/平板）
md中屏：768~992px（平板）
lg大屏：992~1200px（电脑）
xl超大屏：>1200px（超大屏显示器）
//根据不同的设备指定不同的样式
标签：bsp int 选择 pre str 不同 阅读器 col 表示
原文地址：https://www.cnblogs.com/mingliangge/p/12702122.html
