CSS3 媒体（@media）查询简介

首页 > 博客列表 > CSS3 媒体（@media）查询简介

博主信息

博文 33

粉丝 0

访问量 64064

专题推荐

更多>

一、定义和使用

使用 @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>

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

HTML 表单内容的详细介绍

2021-09-23 15:41:35