我有一个网站,主页是一个 div
,其中有六个 div
和六个 imgs
。我想知道最好的方法,以便在移动网站上只提供一个 div
/img
。我知道使用 CSS 重新组织页面有很多技巧,但我不想隐藏 imgs
,我希望它们根本不创建(在移动设备上)。我希望没有 jQuery。这可能吗?
HTML(全尺寸)
<div id="mainContainer">
<div class="imageHolder"><div class="imageContent"><img class="staging" ald="a picture" src="example.png"></div></div>
<div class="imageHolder"><div class="imageContent"><img class="staging" ald="a picture" src="example.png"></div></div>
<div class="imageHolder"><div class="imageContent"><img class="staging" ald="a picture" src="example.png"></div></div>
<div class="imageHolder"><div class="imageContent"><img class="staging" ald="a picture" src="example.png"></div></div>
<div class="imageHolder"><div class="imageContent"><img class="staging" ald="a picture" src="example.png"></div></div>
<div class="imageHolder"><div class="imageContent"><img class="staging" ald="a picture" src="example.png"></div></div>
<div class="imageHolder"><div class="imageContent"><img class="staging" ald="a picture" src="example.png"></div></div>
<div class="imageHolder"><div class="imageContent"><img class="staging" ald="a picture" src="example.png"></div></div>
<div class="imageHolder"><div class="imageContent"><img class="staging" ald="a picture" src="example.png"></div></div>
</div>
理想的 HTML(移动尺寸)
<div id="mainContainer">
<div class="imageHolder"><div class="imageContent"><img class="staging" alt="Example" src="example.png"></div></div>
</div>
最佳答案
在服务器端而不是将图像链接放在 src=
中<img>
的一部分标记你可以将它们放入 data-*
标记,然后在确定您的站点是在桌面浏览器还是移动浏览器上浏览后,您可以编写 javscript 以从 data-*
中获取相应的图像链接。并将它们放入自己的 src=
标签。
关于javascript - 如何向移动网站提供更少的图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25145533/