媒体查询不适用于此图像？

Question

  <div class="col-lg-6" >
   <img src = "iphone6.png" id="dog-mobile" alt="phone">
   </div>

#dog-mobile{
    height:600px;
    position: absolute;
    right: 25%;
    transform: rotate(25deg);
    }
@media(max-width:1000){
    #dog-mobile{
         position: static;
         transform: rotate(0deg); 
        }
    }

<媒体查询不适用于此图像，低于 1000 像素的图像应定位为静态并且应该是直的，但事实并非如此。它还有一个 Bootstrap class 的网格，即 col-lg-6screenshot of output image >

Answer 1

请在 HTML 页面的 <head> 标签内添加此行

<meta name="viewport" content="width=device-width, initial-scale=1">

同时更改 CSS，如下所示：-

#dog-mobile{
    height:600px;
    position: absolute;
    right: 25%;
    transform: rotate(25deg);
    }
@media screen and (max-width: 1000px) {
    #dog-mobile{
         position: static;
         transform: rotate(0deg); 
        }
    }

媒体查询不适用于此图像？

Media-query is not working on this image?

html

css

bootstrap-4

css-selectors

media-queries