请老师检查一下,谢谢。

来源:3-23 编程练习

幻城163630

2020-06-09 17:18:17

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        p{

            color:red;

            text-align:center;

        }

        /*此处写代码*/

        @media (max-width: 450px){

            p {

                color: purple;

            }

        }

        @media (min-width: 450px) and (max-width: 600px){

            p {

                color: blue;

            }

        }

        @media (min-width: 600px) and (max-width: 750px){

            p {

                color: cyan;

            }

        }

        @media (min-width: 750px) and (max-width: 800px) {

            p {

                color: green;

            }

        }

        @media (min-width: 800px) and (max-width: 960px) {

            p {

                color: yellow;

            }

        }

        @media (min-width: 960px) and (max-width: 1100px) {

            p {

                color: orange;

            }

        }

        @media (min-width: 1100px) {

            p {

                color: red;

            }

        }


        

    </style>

</head>

<body>

    <p>

        我的颜色会随着屏幕大小的变化而变化。

    </p>

</body>

</html>



写回答

1回答

好帮手慕慕子

2020-06-09

同学你好,代码实现是正确的,继续加油,祝学习愉快~

0

0 学习 · 6815 问题

查看课程