前端响应式---媒体查询基础

最新推荐文章于 2024-11-14 15:33:48 发布

hhkhhhhklkhh

最新推荐文章于 2024-11-14 15:33:48 发布

阅读量168

点赞数

分类专栏：响应式布局media基础知识文章标签： html css3

本文链接：https://blog.csdn.net/hhkhhhhklkhh/article/details/112302559

版权

响应式布局media基础知识专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了媒体查询的基础知识，包括媒体类型如screen和print，以及特性如width、max-width和min-width。通过实例展示了如何使用媒体查询实现响应式设计，包括逻辑运算符and和or的应用。同时，提供了移动端优先和PC端优先的断点设置方法，以适应不同设备的屏幕尺寸。此外，还强调了减少代码冗余和在旧版浏览器中兼容性的考虑。

摘要由CSDN通过智能技术生成

媒体查询

1、媒体查询基础

媒体查询类型

screen
print

媒体查询特性

width 视口宽度
max-width
min-width
注意：媒体查询的后面必须要加上括号`

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>媒体查询--媒体类型</title>
    <style>
        h1{
            color:green;
            font-size: 100px;
        }
        @media (max-width: 600px) {
            h1{
                color:red;
                font-weight:bold;
            }
        }
    </style>
</head>
<body>
    <h1>hello world</h1>
</body>
</html>`

运算符

and
，逻辑或
not 逻辑非

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>媒体查询--媒体类型</title>
    <style>
        h1{
            color:green;
            font-size: 100px;
        }
        @media (max-width: 600px) and (min-width:1000px) {
            h1{
                color:red;
                font-weight:bold;
            }
        }
    </style>
</head>
<body>
    <h1>hello world</h1>
</body>
</html>

媒体查询用法

<link rel="stylesheet" href="normal.css" media="(max-width:600px)">
    <!-- inport只能跟媒体类型，不能跟媒体特性  不推荐使用-->
    import url('normarl.css') print
     <!-- 这种方式用的比较多-->
    <style>
        h1{
            color:green;
            font-size: 100px;
        }
        @media (max-width: 600px) and (min-width:1000px) {
            h1{
                color:red;
                font-weight:bold;
            } 
        }
    </style>

常用的断点设置
在这里插入图片描述

移动端优先

首先把你要把主要的width设置为100%，然后在media设置相应的最大宽度是多少，比如第一个可以设置为（min-width：768px），第二个设置为（min-width：991px），第三个设置为(min-width:1200px)
****注意：***每往下写一个你要设置好的宽度，都会覆盖你之前写的宽度，所以这个就不要你再加and这些条件了，可以很好的实现代码冗余性

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置断点移动优先</title>


    <style>
        * {
            margin:0;
            padding:0;
        }
        /*默认设置的样式 是移动端的样式*/
        .container {
            margin: 0 auto;
            width: 100%;  /*移动设备 宽度是100%  < 768px*/
            height: 300px;
            background: #54ABD4;
        }

        /*当宽度 >=768px 的时候*/
        /*作用f范围  768~991  */
        @media screen and (min-width: 768px){
            .container {
                width: 750px;
            }
        }

        /*当宽度 >=992 的时候*/
        /* 992 ~ 1199*/
        @media screen and (min-width: 992px) {
            .container {
                width: 970px;
            }
        }

        /*当屏幕 》= 1200px*/
        /*作用范围： >= 1200*/
        @media screen and (min-width: 1200px) {
            .container {
                width: 1170px;
            }
        }

    </style>
</head>
<body>
    <div class="container"></div>
</body>
</html>

pc端优先

首先把你要把主要的width设置为1200px，然后在media设置相应的最小宽度是多少，比如第一个可以设置为（max-width：1200px），第二个设置为（max-width：991px），第三个设置为(max-width:768px)

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置断点移动优先</title>


    <style>
        * {
            margin:0;
            padding:0;
        }
        /*默人最大视口宽度的演示 > 1200*/
        .container {
            margin: 0 auto;
            width: 1170px;
            height: 300px;
            background: #54ABD4;
        }

        /*当宽度 <= 1200的时候*/
        /* 作用于 993 ~ 1200 */
        @media screen and (max-width: 1200px) {
            .container {
                width: 970px;
            }
        }


        /*当宽度 <= 992的时候*/
        /* 769 ~ 992 */
        @media screen and (max-width: 992px) {
            .container {
                width: 750px;
            }
        }


        /*当宽度 <= 768的时候*/
        @media screen and (max-width: 768px) {
            .container {
                width: 100%;
            }
        }

    </style>
</head>
<body>
    <div class="container"></div>

    <!--
        PC优先有个大好处
        能够在IE8等老旧浏览器显示大屏幕样式（手机上没有IE8）
    -->
</body>
</html>