什么是CSS媒体查询？
一、CSS媒体查询概念
CSS媒体查询即media quaries，可以针对不同的媒体类型定义不同的样式，从而实现响应式布局。也可以针对不同的分辨率定义不同的样式。
1024分辨率以上适用于：PC端
1024~768分辨率以上适用于：Pad pro
768~450分辨率以上适用于：Pad mini，mobile横屏
450分辨率以下适用于：mobile竖屏
二、CSS媒体查询语法
当分辨率>=500px的时候，会识别大括号里面的代码
@media all and (min-width:500px){
#box{ background:skyblue;}
}
代码解析：
效果图：
常见的媒体类型：
all：用于所有的设备
print：用于打印机和打印预览
screen：用于电脑屏幕，平板电脑，智能手机等
speech：用于屏幕阅读器等发声设备
注：这个横竖屏操作，只是针对移动端的。在PC端屏幕永远是竖屏的。
注：空格是需要添加的，要符合规范。
link的使用：
"stylesheet" href=
"./hello.css" media=
"all and (min-width:600px)">
代码解析：
效果图：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/211739.html原文链接：https://javaforall.net
