jon*_*nas 18 css image responsive-design
我即将编写一个响应式布局,它可能包含三种不同的"状态".
古怪的部分是文本的大部分,例如菜单项将是图像 - 不是我的想法,这是我可以改变,我害怕.
由于每个状态的图像将略有不同(除了大小)(例如,在最小的状态下,菜单变为浮动按钮而不是常规标题),我将需要切换图像而不是仅缩放相同的图像.
如果不是因为我可能会选择"adaptive-images.com".
所以,我需要一些关于最佳实践解决方案的输入.
我能想到的是:
将图像作为背景加载 - 感觉有点脏.
插入两个版本并切换css显示属性 - 非常肮脏!
写一个设置所有img链接的javascript - 感觉有点矫枉过正？
有人坐在一个好的解决方案？:)
小智 29
其他选择.不需要脚本,只需要CSS.
HTML
<div id="mydiv">
<img src="picture.png" class="image_full">
<img src="picture_mobile.png" class="image_mobile">
</div>
CSS
.image_full{
display:block;
}
.image_mobile{
display:none;
}
@media (max-width: 640px) and (min-width: 320px){
.image_full{
display:none;
}
.image_mobile{
display:block;
}
}
rya*_*nve 14
如果它只是几个图像(并且它们被优化),那么通过CSS隐藏它们是没有问题的.如果它很多,那么看看Response JS,它会src为你动态改变.试试这个:
<body data-responsejs='{ "create": [
{ "prop": "width", "breakpoints": [0, 320, 481, 641, 961, 1025, 1281] }
]}'>
<img src="small.png" data-min-width-481="medium.png" alt="example">
也阅读这篇文章.
更新 - 额外的例子:
<body data-responsejs='{ "create": [
{ "prop": "width", "breakpoints": [0, 320, 481, 641, 961, 1025, 1281] }
, { "prop": "device-pixel-ratio", "breakpoints": [0, 1, 1.5, 2] }
]}'>
<img src="small.png" data-device-pixel-ratio-1.5="medium.png" alt="example">
今天的大多数浏览器都支持 picture标签.因此,您可以根据视口宽度使用它来更改图像.
<picture>
<source media="(min-width: 1200px)" srcset="/img/desktop-size.png">
<source media="(min-width: 768px)" srcset="/img/medium-size.png">
<img src="/img/mobile-size.png"/>
</picture>
| 归档时间： |
|
| 查看次数： |
40053 次 |
| 最近记录： |