CSS3 媒体（@media）查询简介

Home > List of blog posts > CSS3 媒体（@media）查询简介

Blogger Information

Blog 33

fans 0

comment 0

visits 49944

Special Recommendation

More>

Related recommendations

一、定义和使用

使用 @media 查询，可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果需要设置设计响应式的页面，@media 是非常有用的。

当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

二、CSS 语法

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

媒体类型
all：适用于所有设备。
print：适用于在打印预览模式下在屏幕上查看的分页材料和文档。
screen：主要适用于屏幕。
speech：主要适用于语音合成器

真正广泛使用且所有浏览器都兼容的媒介类型是’screen’和’all’

三、媒体属性

媒体属性是CSS3新增的内容，多数媒体属性带有“min-”和“max-”前缀，用于表达“小于等于”和“大于等于”。

常用的媒体属性

width | min-width | max-width    /*定义输出设备中的页面可见区域宽度。 | 最小可见区域宽度 | 最大可见区域宽度*/
height | min-height | max-height /*定义输出设备中的页面可见区域高度。| 最小可见区域高度 | 最大可见区域高度*/

四、实例（不同可见区域下变化背景颜色）

<style>
       @media screen and (min-width:320px){
           body{
               background-color:pink;
           }
       }
       @media screen and (min-width:480px){
           body{
               background-color: aqua;
           }
       }
       @media screen and (min-width:750px){
           body{
               background-color: violet;
           }
       }
       @media screen and (min-width:967px){
           body{
               background-color: green;
           }
       }
       @media screen and (min-width:1200px){
           body{
               background-color: red;
           }
       }
    </style>

CSS 单位

CSS 有几个不同的单位用于表示长度。

一些设置 CSS 长度的属性有 width, margin, padding, font-size, border-width, 等。

长度有一个数字和单位组成如 10px, 2em, 等。

数字与单位之间不能出现空格。如果长度值为 0，则可以省略单位。

对于一些 CSS 属性，长度可以是负数。

有两种类型的长度单位：相对和绝对。

一、相对长度单位

相对长度单位指定了一个长度相对于另一个长度的属性，比如父元素的字体大小，或者视图端口的大小。对于不同的设备相对长度更适用。

单位	相对于
`em`	在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width
`ex`	字符“x”的高度
`ch`	数字“0”的宽度
`rem`	rem 是根 em（root em）的缩写，rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小。
`lh`	元素的line-height
`vw`	视窗宽度的1%
`vh`	视窗高度的1%
`vmin`	视窗较小尺寸的1%
`vmax`	视图大尺寸的1%

二、绝对长度单位

绝对长度单位是一个固定的值，它反应一个真实的物理尺寸。绝对长度单位视输出介质而定，不依赖于环境（显示器、分辨率、操作系统等）。

单位	名称	等价换算
`cm`	厘米	1cm = 96px/2.54
`mm`	毫米	1mm = 1/10th of 1cm
`Q`	四分之一毫米	1Q = 1/40th of 1cm
`in`	英寸	1in = 2.54cm = 96px
`pc`	十二点活字	1pc = 1/16th of 1in
`pt`	点	1pt = 1/72th of 1in
`px`	像素	1px = 1/96th of 1in

三、常用单位实例

em单位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            /* 改变body字体大小，div大小跟着变化 */
            font-size: 10px;
        }
        .box{
            /* 它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。
            一般浏览器字体大小默认为16px，则10em == 160px；*/
            width: 10em;
            height: 10em;
            background-color: aqua;
            /* em永远和当前或父级的font-size大小绑定的 */
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

rem单位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        :root{
            /* 改变根元素的字体大小，div大小跟着变化 */
            font-size: 10px;
        }
        .box{
            /* rem 是根 em（root em）的缩写，rem作用于非根元素时，相对于根元素字体大小；
            rem作用于根元素字体大小时，相对于其出初始字体大小。     */
            width: 10rem;
            height: 10rem;
            background-color: violet;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

vw/vh单位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            /* 盒子宽度永远是视口的五分之一: 20%  */
            width: 20vw;
            /* 高度永远是视口高度的10% */
            height: 10vh;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html {
            font-size: 10px;
        }
        /* 基本样式 */
        .btn {
            background-color: seagreen;
            color: white;
            border: none;
            outline: none;
        }
        .btn:hover {
            cursor: pointer;
            opacity: 0.8;
            transition: 0.3s;
        }
        /* 小按钮 */
        .btn.small {
            font-size: 1.2rem;
            padding: 0.4rem 0.8rem;
            border-radius: 5px;
        }
        /* 中按钮 */
        .btn.middle {
            font-size: 1.6rem;
            padding: 0.4rem 0.8rem;
            border-radius: 5px;
        }
        /* 大按钮 */
        .btn.large {
            font-size: 1.8rem;
            padding: 0.4rem 0.8rem;
            border-radius: 5px;
        }
        /* 移动优先,从最小的屏幕开始进行媒体查询 */
        @media screen and (min-width:320px) {
            html{
                font-size: 10px;
            }
            body {
                background-color: pink;
            }
        }
        @media screen and (min-width:750px) {
            html{
                font-size: 14px;
            }
            body {
                background-color: violet;
            }
        }
        @media screen and (min-width:1200px) {
            html{
                font-size: 18px;
            }
            body {
                background-color: red;
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <button class="btn small">按钮1</button>
        <button class="btn middle">按钮2</button>
        <button class="btn large">按钮3</button>
    </div>
</body>
</html>

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

HTML 表单内容的详细介绍

2021-09-23 15:41:35