响应式页面
根据浏览器窗口不同的大小,显示不一样的样式
媒体查询 @media 设备类型 and 媒体特性{}
@media 关键字
设备类型:all(所有设备)/screen(显示器、笔记本、移动端设备)
and 连接符 and两侧有空格
媒体特性 max-width/min-width (1)px后面不要加(2)多个媒体特性用and连接
常见适配范围
设备范围
默认样式 注意:默认样式要写在最前面
/* 打印样式 */
@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){对应样式}