媒体查询 @media

最新推荐文章于 2023-09-14 22:31:12 发布

粉色水杯

最新推荐文章于 2023-09-14 22:31:12 发布

阅读量609

点赞数 1

文章标签： css3 html5

本文链接：https://blog.csdn.net/linxuanasd/article/details/123715498

版权

在之前的学习中，了解过一些，现在自己学习，系统的总结一下。

设备
屏幕设备	使用的比较多
打印机设备	少一些

下面我介绍一下，屏幕设备这一部分，打开vs

1.指定媒体设备

<style media="screen">
    p{
        color:pink
    }
</style>
</head>
<body>
    <div>
        <p>粉色水杯</p>
    </div>
</body>

2.link标签指定

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/screen.css" media="screen">
</head>
<body>
    <div>
        <p>粉色水杯</p>
    </div>
</body>

p{
    color:pink;
}

呈现的效果

3.@import-页面多文件引入

多个link可能会造成不方便，所以让我们来了解一下@import

再创建一个css文件，变成多个文件，也可以为打印机设备创建css，我这里没有写出。比如cup.css,加入样式，加个背景。

p{
    background-color: blue;
}

现在一共是有两个css文件screen.css和cup.css

再创建一个文件pinkCup.css，用来统一引入样式

@import url(cup.css);
@import url(screen.css) screen;
/* 指定设备 */

在html文件引入pinkCup.css

<link rel="stylesheet" href="css/pinkCup.css" media="screen">

效果：

3.局部定义响应查询

改变一下结构

<body>
    <div class="pinkNav">
        <a href="#">粉色水杯</a>
        <ul>
            <li>水杯售卖</li>
            <li>养生指南</li>
            <li>粉色专栏</li>
        </ul>
    </div>
</body>

这里使用一下less预处理器，方便，会有文章独立总结less。

.pinkNav{
    width: 600px;
    height: 60px;
    display: flex;
    align-items: center;
    background-color: aquamarine;
    margin: 0 auto;
    ul{
        list-style: none;
        display: flex;
        width: 300px;
        justify-content: space-around;
        li{
            color: pink;
        }
    }
}

保存后，会自动生成Css文件，效果图

下面进行局部定义，在less文件中

@media screen and (max-width:700px){
    .pinkNav{
        ul{
            display: none;
        }
    }
}

屏幕设备宽度超过700px,样式不生效。

稍微复杂一点 and

<style media="screen and (min-width: 768px)" >
        h1 {
            color:blue
        }
    </style>
    <style media="screen and (max-width: 768px)" >
        h1 {
            color:rgb(255, 0, 21)
        }
    </style>
</head>
<body>
    <div>
        <h1>粉色水杯</h1>
    </div>
</body>

当最小宽度为768，大于768显示蓝色，小于等于768显示红色

or-------","

普及一个小知识点，横屏orientation: landscape

屏幕设备横屏或者是宽度超过768，显示为蓝色

<style media="screen and (orientation: landscape),screen and (min-width: 768px)" >
        h1 {
            color:blue
        }
    </style>
    <style media="screen and (max-width: 768px)" >
        h1 {
            color:rgb(255, 0, 21)
        }
    </style>