@media媒体查询实现响应式布局

语法:

@media mediatype and|not|only (media feature) {

    CSS-Code;
}

mediatype 应用 media 的设备类型

• all
• screen 应用于手机、电脑、平板
• print 应用于打印机
• speech 应用于屏幕阅读器等发声设备

media feature 查询条件，符合条件即执行
常用的有: width、min-weidth、max-width、height、min-height、max-height、device-width、device-height
orientation:landscape 横屏
orientation:portrait 竖屏
min大于数值成立、max 小于数值成立

and|not|only 衔接多个判断条件，类似 if() 中使用 && ||
not|only 针对设类型(媒体类型) mediatype

示例

@media only screen and (min-width:960px) and (max-width:1200px) {

  // 仅在 screen 设备上 满足 宽度大于等于960px且小于等于1200px时触发
}

本文章由javascript技术分享原创和收集