媒体查询
媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color (等)。使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果。
语法:
@media all and (min-width:320px) and (max-width:1080px){
body { background-color:blue;}
}
媒体类型:常用的有 all screen;
检测媒体特性的表达式:(min-width:320px) and (max-width:1080px)
and 被称为关键字,其他关键字还包括 not(排除某种设备),only(限定某种设备)
检测的媒体特性:width 、height、color、font-size、float 、display...
常见适配范围:
设备范围
默认样式 注意:默认样式要写在最前面
/* 打印样式 */
@media print {}
/* 手机等小屏幕手持设备 */
@media screen and (min-width: 320px) and (max-width: 480px) {}
/* 平板之类的宽度 1024 以下设备 */
@media only screen and (min-width: 321px) and (max-width: 1024px) {}
/* PC客户端或大屏幕设备: 1028px 至更大 */
@media only screen and (min-width: 1029px) {}
/* 竖屏 */
@media screen and (orientation:portrait) {对应样式}
/* 横屏 */
@media screen and (orientation:landscape){对应样式}
原理:检测媒体查询的条件:来决定显示什么样式的;
当当前的设备或者浏览器宽度满足你的表达式的条件时,他也会以你当前的css来显示样式
响应式:响应式布局
两个方案:
先设计pc端,再设计移动端
先设计移动端,再设计pc端
媒体查询 :是一个技术 、是一个方法;可以实现响应式布局的方法;