媒体查询

Posted 2020-10-22 yiku

参数

width浏览器可视宽度

height浏览器可视高度

device-width设备屏幕宽度

device-height设备屏幕高度

注：以上可添加前缀max-和min-

orientation检测设备处于横向或纵向，可能值：portrait| landscape

aspect-ratio检测浏览器可视宽高比

device-aspect-ratio检测设备宽高比

grid检测输出设备是网格或位图设备，可能值：1 | 0

关键字

and  与

not  非

,  或

only  用来排除不支持媒体查询的浏览器，不会读取样式

设备名称

all  所有设备，默认

screen  显示器

speech  阅读器

print  打印机

准备工作

1、meta标签：<meta name="viewport" content="width=device-width,initial-scale=1.0" />

2、渲染引擎：<meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1" />

3、加载脚本：<!--[if lt IE 9]>html5shiv.js  respond.js<![endif]-->

css2媒体查询

<link rel="stylesheet" type="text/css" href="layout.css" media="screen and (max-width: 960px)" />

<style type="text/css" media="screen and (max-width: 960px)"></style>

css3媒体查询

@media screen and (min-width:960px) and (max-width:1200px) {
    body{
        background: yellow;
    }
}

方案

老智能机：320px-280px

智能手机：>=480px

平板电脑：>=768px

中等屏幕（桌面显示器）：>=992px

大屏幕（大桌面显示屏）：>=1200px

/*设备屏幕大于1200px，PC */
@media screen and (min-width: 1200px) {}

/*设备屏幕大于992px，小于1199px，低分辨率PC，lg- */
@mediascreen and (min-width: 992px) and (max-width: 1199px) {}

/*设备屏幕大于768px，小于991px，ipad，md- */
@media screen and (min-width: 768px) and (max-width: 991px) {}

/*设备屏幕大于480px，小于767px，mobile，sm- */
@media screen and (min-width: 480px) and (max-width: 767px) {}

/*设备屏幕小于479px，低分辨率mobile，xs- */
@media screen and (max-width: 479px) {}