Question

我正在让我的网站针对不同的用户做出响应，我知道我可以在使用CSS设置网站样式时使用CSS，例如

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

{
body {
background: #ccc;
}
}`

但是，当我的设备达到500px的宽度时，我希望在一个图像发生变化时运行不同的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 background 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">

设备宽度更改时如何运行不同的html文件？

1 个答案: