CSS3_媒体查询(十一)

CSS3_响应式布局

1、媒体样式

在不同媒体上显示不同的样式。

常用阈值:

  • 小于768px:小屏幕;
  • 768px-992px:中等屏幕;
  • 992px-1200px:大屏幕;
  • 大于1200px:超大屏幕。
html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>查询媒体类型</title>
    <style>
        h1 {
            width: 300px;
            height: 300px;
            line-height: 300px;
            background-image: linear-gradient(30deg, red, yellow, green);
            margin: 0 auto;
            text-align: center;
            font-size: 30px;
            color: white;
            text-shadow: 0 0 10px black;
        }

        /* 只有在打印机上才应用的样式 */
        @media print {
            h1 {
                background: transparent;
            }
        }

        /* 只有在屏幕上才应用的样式 */
        @media screen {
            h1 {
                font-family: "Forte";
            }
        }

        /* 在所有情况下都使用的字体 */
        @media all {
            h1 {
                font-family: "Forte";
            }
        }
    </style>
</head>

<body>
    <h1>测试文本</h1>
</body>

</html>
2、媒体特性

根据媒体视口的大小和媒体宽度进行样式的变化。

  • width:检测视口宽度;
  • max-width:检测视口最大宽度;
  • min-width:检测视口最小宽度;
  • height:检测视口高度;
  • max-height:检测视口最大高度;
  • min-height:检测视口最小宽度;
  • device-width:检测屏幕的宽度;
  • max-device-width:检测屏幕的最大宽度;
  • min-device-width:检测屏幕的最小宽度;
  • orientation:检测视口的旋转方向
    • portrait:视口处于纵向,高度大于宽度;
    • landscape:视口处于横向,宽度大于高度。
html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>媒体类型</title>
    <style>
        div {
            background-color: aqua;
            height: 200px;
            line-height: 200px;
            text-align: center;
            font-size: 50px;
        }

        /* 视口宽度小于700px的时候背景设置为黄色 */
        @media (max-width:700px) {
            div {
                background-color: yellow;
            }
        }

        /* 视口宽度大于900px的时候背景设置为蓝色 */
        @media (min-width:900px) {
            div {
                background-color: blue;
            }
        }

        /* 视口宽度为500px的时候背景设置为红色 */
        @media (width:500px) {
            div {
                background-color: red;
            }
        }

        /* 只有设备宽度为2560px(因为2560缩放了1.25倍)时,才会生效 */
        @media (device-width:2048px) {
            div {
                background-color: black;
            }
        }
    </style>
</head>

<body>
    <div>
        <p>示例文本</p>
    </div>
</body>

</html>
3、运算符

可以通过运算符将媒体特性联系在一起:

  • and:并且;
  • , 或者 or:或;
  • not:否定;
  • only:肯定。
html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>运算符</title>
    <style>
        div {
            height: 300px;
            background-color: antiquewhite;
        }

        @media (min-width:600px) and (max-width:800px) {
            div {
                background-color: aqua;
            }
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>
相关推荐
libraG14 小时前
vue样式问题
css·vue.js·scss
前端老鹰14 小时前
CSS outline-offset:让焦点样式不再 “紧贴” 元素的实用属性
前端·css
轻语呢喃16 小时前
CSS水平垂直居中的9种方法:原理、优缺点与差异对比
前端·css
@大迁世界16 小时前
这次 CSS 更新彻底改变了我的 CSS 开发方式。
前端·css
全宝20 小时前
实现一个有意思的眼球跟随卡片
前端·javascript·css
全宝20 小时前
用css做一枚拟物风格的按钮
前端·css·svg
你挚爱的强哥1 天前
SCSS上传图片占位区域样式
前端·css·scss
奶球不是球1 天前
css新特性
前端·css
荻酷社区2 天前
HTML+CSS+JavaScript实现的AES加密工具网页应用,包含完整的UI界面和加密/解密功能
javascript·css·html
lumi.2 天前
Swiper属性全解析:快速掌握滑块视图核心配置!(2.3补充细节,详细文档在uniapp官网)
前端·javascript·css·小程序·uni-app