VsCode Css3 媒体查询 day3（新手向10）

最新推荐文章于 2024-04-22 15:22:18 发布

当你看到我时请提醒我学习

最新推荐文章于 2024-04-22 15:22:18 发布

阅读量445

点赞数

分类专栏： Css 文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_42515365/article/details/108018969

版权

Css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

I.什么是媒体查询

1. 媒体查询是向不同设备提供不同样式的一种方式，它为每种类型的用户提供了最佳的体验。
2. css2: media type media type(媒体类型)是css 2中的一个非常有用的属性，通过media type我们可以对不同的设备指定特定的样式，从而实现更丰富的界面。
3. css3: media query media query是CSS3对media type的增强，事实上我们可以将media query看成是media type+css属性(媒体特性Media features)判断。

II.为什么有媒体查询

1. 移动设备的快速普及完全颠覆了Web设计领域。用户不再仅在传统桌面系统上查看Web内容，他们越来越多地使用具有各种尺寸的智能电话、平板电脑和其他设备。
2. Web设计人员的挑战是确保他们的网站不仅在大屏幕上看起来不错，在小型的电话以及介于它们之间的各种设备上看起来也不错。（说白了就是不同大小显示器web适配问题。CSS2中也有媒体查询，CSS3在此基础更加丰满）

III.如何使用媒体查询

1.link标签引入：media属性（eg：引入（screen）彩色屏幕显示，并且最大宽度不超过800px时候的CSS样式）**

<link rel="stylesheet" media="screen and (max-width:800px)" href="./demo.css">

媒体类型（Media Type): all(全部)、screen(屏幕)、print(页面打印或打印预览模式)
媒体特性（Media features): width(渲染区宽度)、device-width(设备宽度)… Media Query是CSS3 对Media Type的增强版，其实可以将Media Query看成Media Type(判断条件)+CSS(符合条件的样式规则)

2.style中直接引入：当显示宽度不大于400px时，div该有的样式。

@media screen and (max-width: 400px) {
.wrapper div{	
width: 100%;	
}
}

IV.媒体查询类型及使用

媒体类型(media type) ：常用all，screen，print。

在这里插入图片描述
媒体特性(media features) ：

逻辑操作符 and：
合并多个媒体属性

eg：@media screen and (min-width: 600px) and (max-width:100px)

合并多个媒体属性或合并媒体属性与媒体类型, 一个基本的媒体查询，即一个媒体属性与默认指定的screen媒体类型
指定备用功能：

eg：@media screen and (min-width: 769px), print and (min-width: 6in)"

没有or关键词可用于指定备用的媒体功能。相反，可以将备用功能以逗号分割列表的形式列出，这会将样式应用到宽度超过769像素的屏幕或使用至少6英寸宽的纸张的打印设备。（逗号代表或）
指定否定条件：

eg：@media not screen and (monochrome)

要指定否定条件，可以在媒体声明中添加关键字not，不能在单个条件前使用not。该关键字必须位于声明的开头，而且它会否定整个声明。所以，上面的示例会应用于除单色屏幕外的所有设备。
向早期浏览器隐藏媒体查询（不常用）

eg：media="only screen and (min-width: 401px) and (max-width: 600px)"

媒体查询规范还提供了关键字only，它用于向早期浏览器隐藏媒体查询。类似于not，该关键字必须位于声明的开头。早期浏览器应该将以下语句

media="screen and (min-width: 401px) and (max-width: 600px)" 解释为media="screen"：

换句话说，它应该将样式规则应用于所有屏幕设备，即使它不知道媒体查询的含义。无法识别媒体查询的浏览器要求获得逗号分割的媒体类型列表，规范要求，它们应该在第一个不是连字符的非数字字母字符之前截断每个值。所以，早期浏览器应该将上面的示例解释为：media=“only” 因为没有only这样的媒体类型，所以样式表被忽略。
注意点：
device-width/height width/height来做为的判定值
device-width/height 是设备的宽度（如电脑手机的宽度，不是浏览器的宽度）
width/height使用documentElement.clientWidth/Height即viewport的值。

v.代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>媒体查询</title>
    <!-- 外联样式表 -->
    <!-- <link rel="stylesheet" media="screen and (max-width:800px)" href="./css/style.css"> -->
    <!-- 
        在link标签中使用有media属性并且设置媒体查询条件，那么就是说只有符合条件的时候link中的外联样式表才生效样式
     -->


    <!-- 内联样式表 -->
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .box{
            width: 100%;
            height: 500px;
            background: pink;
        }
        .box1{
            width: 1000px;
            height: 500px;
            background: orange;
            margin: 0 auto;
        }

    /* 
        @media screen and (max-width: 400px)
        @media 是媒体查询的标志符
        screen 作用媒体设备现在基本只使用两个all(全部) screen(彩色屏幕)
        and 是连接符
        max-width:400px  查询条件 
     */
    @media screen and (min-width: 1000px) and (max-width: 1400px) {
        .box1{
            /* width: 300px;
            height: 100px;
            background: skyblue; */
            display: none;
        }
    }



    .header {
        width: 30%;
        height: 100vh;
        background: pink;
        position: fixed;
        left:0px;
        bottom: 0px;
    }
    .content {
        width: 70%;
        height: 1400px;
        background: skyblue;
        float:right;
    }

    /* 
        符合的条件是：屏幕宽度最大不超过1025px并且最少宽度不小于625px
     */
    @media screen and (max-width:1025px) and (min-width:625px) {
        .header {
            width: 100vw;
            height: 20vh;
            background: pink;
            position: relative; /*把这个元素从固定定位改为相对定位*/
        }
        .content {
            width: 100%;
            height: 1400px;
            background: skyblue;
            float: none;
        }
    }

    /* 
        符合的条件是：屏幕宽度最大不超过625px
     */
    @media screen and (max-width:625px) {
        .header {
            width: 100vw;
            height: 5vh;
            background: pink;
            position: relative; /*把这个元素从固定定位改为相对定位*/
        }
        .content {
            width: 100%;
            height: 1400px;
            background: skyblue;
            float: none;
        }
    }
    </style>
</head>
<body>
    <section class="header"></section>
    <section class="content"></section>
</body>
</html>

效果：
大于1025px时

在这里插入图片描述
大于625px小于1025px时
小于625px时

当你看到我时请提醒我学习

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VsCode Css3 媒体查询 day3（新手向10）

I.什么是媒体查询1. 媒体查询是向不同设备提供不同样式的一种方式，它为每种类型的用户提供了最佳的体验。2. css2: media type media type(媒体类型)是css 2中的一个非常有用的属性，通过media type我们可以对不同的设备指定特定的样式，从而实现更丰富的界面。3. css3: media query media query是CSS3对media type的增强，事实上我们可以将media query看成是media type+css属性(媒体特性Media featu
复制链接

扫一扫