Question

我正在设计一个使用media queries在台式机和移动设备上运行的网站。在大多数情况下，这很好。但是，我将尝试在下面描述一个场景，该场景无法正常工作。

在台式机上，我有一系列带有文本覆盖的图像，排列方式如下：

在移动设备上，我希望将其显示在两列中，并且最终图块分布在整个宽度上，如下所示：

但是，我在桌面上用于最终图块的图像是方形的，当我将其散布在整个宽度上时，它太大了，看起来更像这样：

下面是我目前拥有的HTML和CSS：

<div>
    <div class="hotel_container">
        <div class="options">
            <div class="option">
                <a href="www.example.com" target="_blank"><img class="opt_img" src="images/example.jpg"></a>
                <h3 class="centered" id="hotel_info">TEXT</h3>
            </div>
        </div>
        <!-- repeated "options" div 7 more times -->
        <div class="options_last">
            <div class="option">
                <a href="www.example.com" target="_blank"><img class="opt_img" src="images/example2.jpg"></a>
                <h3 class="centered" id="hotel_info">TEXT</h3>
            </div>
        </div>
    </div>  
</div>

CSS

.options, .options_last{
    width: 33%;
    overflow: hidden;
    display: inline-block;
}

@media only screen and (max-width: 812px) {
    .options{
        width: 50%;
    }
}

@media only screen and (max-width: 812px) {
    .options_last{
        width: 100%;
    }
}

.option{
    position: relative;
    text-align: center;
    padding: 10px;
}

@media only screen and (max-width: 812px) {
    .option{
        padding: 1px;
    }
}

.opt_img{
    width: 100%;
    opacity: 0.7;
}

.opt_img:hover{
    opacity: 0.9;
}

.centered {
    position: absolute;
    width: 100%;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#hotel_info{
    background-color: rgba(130, 130, 130,0.7);
    width: 80%;
    font-size: 23px;
    padding: 15px;
}

@media only screen and (max-width: 812px) {
    #hotel_info{
        width: 60%;
        font-size: 10px;
        padding: 5px;
    }
}

我不想强迫图像达到一定的高度，因为这会使图像变形，所以我想我可以拥有第二个矩形的图像，可以在移动设备上打开它。但是，我一生都无法像传统媒体查询那样，想出如何根据设备选择其他图片的方法。

[编辑：我知道可以在页面上同时显示两个图像并通过媒体查询隐藏一个或另一个图像的功能，但是已经警告说，如果使用过多，这会减慢页面的速度，因为所有设备都必须加载所有图像。我正在寻找一种“更好”的方式来做到这一点，以避免在小规模学习的同时养成不良习惯。

有人可以帮我忙吗，或者在网上给我指出一个简单的解释，可能会帮助我解决这个问题。

P.S。我是Web开发的新手，因此请使您的答案对初学者友好，如果需要澄清，请与我联系。我也乐于接受更好或更简单的工作方式的建议，我正在与我从Codecademy网站开发课程中学到的知识一起工作。

Answer 1

您可以简单地放置一个矩形图像并将其隐藏在比移动设备更高的屏幕上，大多数人使用的常见媒体查询断点是引导方式：移动设备从0到768px，平板电脑和类似设备从768px到992px，992px到1200px适用于中型屏幕，而1200px以上适用于苹果视网膜和4K等大屏幕。

在这种情况下，您可以添加诸如.show-sm和.hidden-sm之类的类，并将其用于您的目的：

仅在移动设备上显示元素的示例：

@media screen and (max-width: 768px) {
    .hidden-sm {
        display: none !important; // use important to override other styles
    }
    .show-sm {
        display: block !important; // use important to override other styles
    }
}

用于显示高于移动分辨率的元素的示例：

@media screen and (min-width: 768px) {
    .hidden-sm {
        display: block !important; // use important to override other styles
    }
    .show-sm {
        display: none !important; // use important to override other styles
    }
}

并将这些类添加到要在移动设备和台式机上显示和隐藏的元素，例如：

<div>
    <div class="hotel_container">
        <!-- show this element just on desktop -->
        <div class="options hidden-sm">
            <div class="option">
                <a href="www.example.com" target="_blank"><img class="opt_img" src="images/example.jpg"></a>
                <h3 class="centered" id="hotel_info">TEXT</h3>
            </div>
        </div>

        <!-- show this element just on mobile -->
        <div class="options_last show-sm">
            <div class="option">
                <a href="www.example.com" target="_blank"><img class="opt_img" src="images/example2.jpg"></a>
                <h3 class="centered" id="hotel_info">TEXT</h3>
            </div>
        </div>
    </div>  
</div>

最后但并非最不重要的一点，您可以使用媒体查询在两个分辨率之间应用样式，例如：

@media screen and (min-width: 768px) and (max-width: 992px) {
    .hidden-md {
        display: none !important; // use important to override other styles
    }
}

如您所见，他的媒体查询可在768px到992px之间工作，并隐藏带有已声明类的元素。希望对您有所帮助。

PS：您可以声明自己的媒体查询，并根据自己的需要设置自定义分辨率，并且不受限制。

PS 2：另外，请确保您的head标签中包含视口元：

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">

Answer 2

您可以尝试使用clip property in CSS。

.clippable {
    position: absolute;
    clip: rect(0px,250px,100px,0px);
}

.flex-flow {
  align-self: auto;
  
}

.flow-box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 250px;
  justify-content: space-between;
}

<div class="flow-box">
  <img src="https://pbs.twimg.com/profile_images/883859744498176000/pjEHfbdn_400x400.jpg" width="100" height="100" class="flex-flow"/>
  <img src="https://pbs.twimg.com/profile_images/883859744498176000/pjEHfbdn_400x400.jpg" width="100" height="100" class="flex-flow"/>
  <img src="https://pbs.twimg.com/profile_images/883859744498176000/pjEHfbdn_400x400.jpg" width="100" height="100" class="flex-flow"/>
  <img src="https://pbs.twimg.com/profile_images/883859744498176000/pjEHfbdn_400x400.jpg" width="100" height="100" class="flex-flow"/>
</div>

  <img src="https://pbs.twimg.com/profile_images/883859744498176000/pjEHfbdn_400x400.jpg" width="250" height="250" class="clippable"/>

媒体查询以更改图像

2 个答案: