html - 如何在设备宽度发生变化时运行不同的 html 文件？

Question

我正在让我的网站响应不同的用户，我知道我可以使用 CSS 来为网站设置不同的样式，例如使用 CSS

`@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px){

{
body {
background: #ccc;
}
}`

然而，当我的设备达到 500 像素的宽度时，我想运行一个不同的 HTML 文件，因为一个图像发生变化，以便它更适合移动用户。我认为这是如何做到的，但如果不是，请另行说明。

Answer 1

两种好方法:

图片标签:

---

<picture>
    <source srcset="smaller_landscape.jpg" media="(max-width: 40em) and (orientation: landscape)">
    <source srcset="smaller_portrait.jpg" media="(max-width: 40em) and (orientation: portrait)">
    <source srcset="default_landscape.jpg" media="(min-width: 40em) and (orientation: landscape)">
    <source srcset="default_portrait.jpg" media="(min-width: 40em) and (orientation: portrait)">
    <img srcset="default_landscape.jpg" alt="My default image">
</picture>

图片标签:

---

<img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x,
                                 image-3x.png 3x, image-4x.png 4x">

检查样本:Picture || Image srcset

使用 css 背景 url 属性更改图像然后为不同的媒体查询以不同方式加载 css 的一种棘手方法。

<link rel="stylesheet" type="text/css" media="screen and (max-width: 700px)" href="css/devices/screen/layout-modify1.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width: 701px) and (max-width: 900px)" href="css/devices/screen/layout-modify2.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width: 901px)" href="css/devices/screen/layout-modify3.css">