老师,上个练习到规定的数值就颜色会变,这个练习到规定数值了还没变,是因为百分比不对,还是咋的

来源:3-24 编程练习

光着膀子去南极

2020-10-04 23:03:07

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

  <title>Document</title>

  <!-- <meta name=""> -->

  <style>

    #box{

      width:80%;

      margin:0 auto;

      background: #ccc;

      text-align:center;

    }

    #box>img{

      display: inline-block;

      padding:1.5%;

      width:21%;

      height:200px;

    }

    /*此处写代码*/

    @media (max-width: 960px) {   /* 641开始变             */ 

      #box>img {

        width: 29%;

      }

    }

    @media (max-width: 780px) { /* 520开始变              */

      #box>img {

        width: 45%;


      }

    }

    @media (max-width: 440px) { /* 293开始变              */

      #box>img {

        width: 93%;

      }

    }

  </style>

</head>

<body>

  <div id="box">

    <img src="http://img.mukewang.com/climg/5a45e49100014e5010601059.jpg" alt="">

    <img src="http://img.mukewang.com/climg/5a45e53b00012e6d09940789.jpg" alt="">

    <img src="http://img.mukewang.com/climg/5a45e53c0001d04e09940732.jpg" alt="">

    <img src="http://img.mukewang.com/climg/5a45e49100014e5010601059.jpg" alt="">

    <img src="http://img.mukewang.com/climg/5a45e53b00012e6d09940789.jpg" alt="">

    <img src="http://img.mukewang.com/climg/5a45e53c0001d04e09940732.jpg" alt="">

  </div>

</body>

</html>



写回答

1回答

好帮手慕久久

2020-10-08

同学你好,问题解答如下:

上个练习颜色会变,是因为在媒体查询中,改变了颜色,如下:

http://img.mukewang.com/climg/5f7eb56909f8cb6303640210.jpg

而同学提供的代码中,改变的只有img的宽度,而没有改变颜色相关的属性,所以颜色不会变:

http://img.mukewang.com/climg/5f7eb62d095a86f207170274.jpg

同学再试着理解一下。

如果我的回答帮到了你,望采纳,祝学习愉快!

1

0 学习 · 6815 问题

查看课程