媒体查询适配-觅稀奇MeXiQi.COM

媒体查询

媒体查询：根据一个或多个基于设备类型、具体特点和环境来应用样式

1、媒体类型
2、媒体特性
3、逻辑运算符

媒体类型

all所有设备
print打印机设备
screen彩色的电脑屏幕
speech听觉设备（针对有视力障碍的人士，可以把页面的内容以语音的方式呈现的设备）

注意：tty、tv、projection、handheld、braille、embossed、aural等几种类型在媒体查询4中已经废弃

媒体特性

一、width宽度

min-width最小宽度，宽度只能比这个大
max-width最大的宽度，宽度只能比这个小

二、height高度

min-height最小高度，高度只能比这个大
max-height最大的高度，高度只能比这个小

三、orientation方向
landscape横屏(宽度大于高度)
portrait坚屏(高度大于宽度)
aspect-ratio宽度比
-webkit-device-pixel-ratio像素比(webkit内核的私有属性)

/*400-500之间是默认的*/div{width:100px;height:100px;background:red;}/*屏幕尺寸大于500的时候满足*/@media(min-width:500px){div{background:green;}}/*屏幕尺寸小于400的时候满足*/@media(max-width:400px){div{background:blue;}}/*横屏的时候满足*/@media(orientation:landscape){div{width:400px;height:100px;}}/*竖屏的时候满足*/@media(orientation:portrait){div{width:100px;height:400px;}}/*宽高比为4：3的时候满足，800*600的时候是4：3*/@media(aspect-ratio:4/3){div{border:10pxsolid#000;}}/*当像素比为2的时候，满足*/@media(-webkit-device-pixel-ratio:2){div:after{content:'陈学辉';font-size:50px;}}

逻辑运算符：用来做条件判断

and合并多个媒体查询（并且的意思）,区配某个媒体查询（或者的意思）not对媒体查询结果取反only仅在媒体查询匹配成功后应用样式（防范老旧浏览器）

当屏幕尺寸同时满足好几条件时，会取最大值

div{width:200px;height:200px;background:red;}/*屏幕的尺寸比700大的时候以及横屏的时候满足*/@mediaalland(min-width:700px)and(orientation:landscape){div{background:green;}}/*屏幕尺寸比800小，或者屏幕为横屏的时候满足*/@media(max-width:800px),(orientation:landscape){div{background:pink;}}/*屏幕的尺寸要大于800的时候，整个才满足*/@medianotalland(max-width:800px){div{background:blue;}}@mediaonlyscreenand(min-width:1000px){div{background:grey;}}

媒体查询应用

div{padding:50px0;border:1pxsolid#000800;}div:after{content:'这是一所房子';}/*小于1000的尺寸就满足*/@mediaalland(max-width:1000px){div{background:green;}div:after{content:'哇，房子好大哦，可以放下坑了';}}/*小于800的时候就满足*/@mediaalland(max-width:800px){div{background:khaki;}div:after{content:'喔，房子变小了，只能放一张双人床';}}/*尺寸小于500就满足*/@mediaalland(max-width:500px){div{background:hotpink;}div:after{content:'哎，房子更小了，只能放下一张单人床';}}/*小于300的时候满足*/@mediaalland(max-width:300px){div{background:turquoise;}div:after{content:'咦，房子也忒小了，床都放不下';}}

media媒体查询从移动端到PC端的适配

/*小于768ipad*/@mediascreenand(max-width:768px){html{font-size:18px;}}/*小于480px手机*/@mediascreenand(max-width:480px){html{font-size:16px;}}/*768-1023*/@mediascreenand(min-width:769px)and(max-width:1023px){html{font-size:20px;}}/*1024-1279*/@mediascreenand(min-width:1024px)and(max-width:1279px){html{font-size:24px;}}/*1280-1440*/@mediascreenand(min-width:1280px)and(max-width:1439px){html{font-size:26px;}}/*>=1440的设备屏幕*/@mediascreenand(min-width:1440px){html{font-size:28px;}}/*>=1920的设备屏幕*/@mediascreenand(min-width:1920px){html{font-size:34px;}}

/*PC端*//*>=1920px*/@media(min-width:1921px){html{font-size:30px;}}@media(max-width:1920px){html{font-size:26px;}}@media(max-width:1600px){html{font-size:24px;}}@media(max-width:1440px){html{font-size:22px;}}@media(max-width:1280px){html{font-size:20px;}}@media(max-width:1024px){html{font-size:18px;}}/*移动端*/@media(max-width:999px){html{font-size:20px;}}@media(max-width:759px){html{font-size:20px;}}@media(max-width:376px){html{font-size:20px;}}

@mediascreenand(min-width:1441px){}@mediascreenand(min-width:1510px){}@mediascreenand(min-width:1600px){}@mediascreenand(min-width:1680px){}@mediascreenand(min-width:1920px){}@mediascreenand(max-width:1280px){}//手机端@mediascreenand(max-width:900px){}@mediascreenand(max-width:320px){}