媒体查询@media使用方法及常用响应式尺寸

本文介绍了媒体查询@media使用方法及常用响应式尺寸，@media 是CSS中的一种语法，用于在不同的媒体设备（如桌面计算机、平板电脑、手机）上应用不同的样式。@media 规则包含在CSS样式表中，通过添加不同的媒体属性来确定哪个设备上应该应用哪个样式。

媒体查询@media使用方法及常用响应式尺寸

@media的四种写法：

@media：最简单常规的写法

@media screen：应用于显示器、平板电脑、智能手机等屏幕设备

@media print：应用于打印机、打印预览等设备

@media speech：应用于屏幕阅读器

@media与@media screen的区别：

@media screen的css在打印设备里是无效的，@media在打印设备里是有效的

所以，如果css需要用在打印设备里，就用@media ，否则就用@media screen

@media 可以添加多个多个条件，用逗号分隔：

@media screen and (max-width: 600px), screen and (orientation: landscape) {
  /* 当设备的屏幕宽度小于或等于 600 像素，并且设备是横向显示时，背景色为 lightblue */
  body {
    background-color: lightblue;
  }
}

Bootstrap中的响应式尺寸（使用min-width）：

/* 小屏幕(平板，大于等于 768px) */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕(桌面显示器，大于等于 992px) */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕(大桌面显示器，大于等于 1200px) */
@media (min-width: @screen-lg-min) { ... }

……此处写通用样式…

如果使用max-width，顺序是这样的：

……此处写通用样式…

@media (max-width: 1199){ //<=1199的设备 }

@media (max-width: 991px){ //<=991的设备 }

@media (max-width: 767px){ //<=768的设备 }

也就是说，使用min-width时，小的在上面，使用max-width就是大的在上面，通用样式刚好相反

@media 常见适配大小

@media (min-width: 320px){
    html{
        font-size: 8px;
    }
}
@media (min-width: 360px){
    html{
        font-size: 8px;
    }
}
@media (min-width: 480px){
    html{
        font-size: 8px;
    }
}
@media (min-width: 640px){
    html{
        font-size: 12px;
    }
}
@media (min-width: 720px){
    html{
        font-size: 14px;
    }
}
@media (min-width: 750px){
    html{
        font-size: 15px;
    }
}
@media (min-width: 768px){
    html{
        font-size: 15px;
    }
}
@media (min-width: 800px){
    html{
        font-size: 15px;
    }
}
@media (min-width: 1024px){
    html{
        font-size: 18px;
        font-family: arial;
    }
}
@media (min-width: 1176px){
    html{
        font-size: 20px;
        font-family: arial;
    }
}
@media (min-width: 1280px){
    html{
        font-size: 22px;
        font-family: arial;
    }
}
@media (min-width: 1366px){
    html{
        font-size: 24px;
        font-family: arial;
    }
}
@media (min-width: 1440px){
    html{
        font-size: 25px;
        font-family: arial;
    }
}

@media (min-width: 1680px){

    html{
        font-size: 28px;
        font-family: arial;
    }
}
@media (min-width: 1920px){
    html{
        font-size: 33px;
        font-family: arial;
    }
}

……此处写通用样式…

好了，关于媒体查询@media使用方法及常用响应式尺寸就介绍到此，希望对您有所帮助~

【延伸阅读】

px rpx vw vh em rem的区别和使用方法

CSS媒体查询@中screen and和only screen and有什么不同