媒体查询
媒体查询：根据一个或多个基于设备类型、具体特点和环境来应用样式
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: 10px solid #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大的时候以及横屏的时候满足 */
@media all and (min-width: 700px) and (orientation: landscape) {
div {
background: green;
}
}
/* 屏幕尺寸比800小，或者屏幕为横屏的时候满足 */
@media (max-width: 800px), (orientation: landscape) {
div {
background: pink;
}
}
/* 屏幕的尺寸要大于800的时候，整个才满足 */
@media not all and (max-width: 800px) {
div {
background: blue;
}
}
@media only screen and (min-width: 1000px) {
div {
background: grey;
}
}
媒体查询应用
div {
padding: 50px 0;
border: 1px solid #000800;
}
div:after {
content: '这是一所房子';
}
/* 小于1000的尺寸就满足 */
@media all and (max-width: 1000px) {
div {
background: green;
}
div:after {
content: '哇，房子好大哦，可以放下坑了';
}
}
/* 小于800的时候就满足 */
@media all and (max-width: 800px) {
div {
background: khaki;
}
div:after {
content: '喔，房子变小了，只能放一张双人床';
}
}
/* 尺寸小于500就满足 */
@media all and (max-width: 500px) {
div {
background: hotpink;
}
div:after {
content: '哎，房子更小了，只能放下一张单人床';
}
}
/* 小于300的时候满足 */
@media all and (max-width: 300px) {
div {
background: turquoise;
}
div:after {
content: '咦，房子也忒小了，床都放不下';
}
}
media 媒体查询从移动端到 PC 端的适配
/* 小于768 ipad*/
@media screen and (max-width: 768px) {
html {
font-size: 18px;
}
}
/*小于 480px 手机*/
@media screen and (max-width: 480px) {
html {
font-size: 16px;
}
}
/*768-1023*/
@media screen and (min-width: 769px) and (max-width: 1023px) {
html {
font-size: 20px;
}
}
/*1024-1279*/
@media screen and (min-width: 1024px) and (max-width: 1279px) {
html {
font-size: 24px;
}
}
/*1280-1440*/
@media screen and (min-width: 1280px) and (max-width: 1439px) {
html {
font-size: 26px;
}
}
/*>=1440的设备屏幕*/
@media screen and (min-width: 1440px) {
html {
font-size: 28px;
}
}
/*>=1920的设备屏幕*/
@media screen and (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;
}
}
@media screen and (min-width: 1441px) {
}
@media screen and (min-width: 1510px) {
}
@media screen and (min-width: 1600px) {
}
@media screen and (min-width: 1680px) {
}
@media screen and (min-width: 1920px) {
}
@media screen and (max-width: 1280px) {
}
//手机端
@media screen and (max-width: 900px) {
}
@media screen and (max-width: 320px) {
}
今天的文章媒体查询适配分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/33456.html
