如何不以语义方式将图像发送到手机 [英] How to not send images to mobiles in a semantic manner

问题描述

通常，在进行响应/移动设计时，我们使用媒体查询将不同的CSS发送到不同的屏幕尺寸。

没有任何图像。

在CSS中为图像使用 background-image 时很容易实现，但是我无法想象您将如何使用语义< img> 标签来实现此目的。

• 这可以用HTML完成吗？


• 是否可以使用CSS来存放所有图片？

就我个人而言，我喜欢我的默认小屏幕尺寸没有图像，但是我发现，不要将任何图像发送到桌面设备的纯HTML版本。

<注意： JavaScript解决方案是不可接受的。 参考图片 img src =https://html.slidesharecdn.com/pragmatic-responsive-design-110912113912-phpapp01/output053.png?1315879532alt =示例不，它通常不会对所有图像使用CSS。这种情况下的图像是一段数据，就像标题和描述一样，语义上应该使用< img> 。如果定义太松，则可以将所有图像视为可选项，从而使< img> 过时。 不能在所有屏幕上显示是不是不使用< img> 元素的原因。

查看它的一种方式是CSS background-image 用于使元素更漂亮。该元素仍然可以在没有 background-image 的情况下运行，只是不够漂亮。如果元素由于没有图像而不可见，那么它首先不是一个有效的元素。

CSS显示和定位属性用于移动东西并隐藏不同显示内容。

正确的方法做到这一点是 display：none; ，假设大多数浏览器不下载图像。如果浏览器支持较弱，请使用黑客技术，如 background-image ，甚至可以使用Javascript动态加载。

Generally when doing responsive / mobile first design we use media queries to send different CSS to different screen sizes.

A good design may include the default (small) resolution not having any images.

This is easy to achieve when using background-image in CSS for your images but I can't imagine how you would achieve this using semantic <img> tags.

• Can this be done with HTML?
• Is it acceptable to use CSS for all your images?

Personally I like having no images for my default small screen size, however I find it very ugly to not send any images to the HTML-only version for desktops.

Note: JavaScript solutions are not acceptable.

Reference image

解决方案

No, it is not normally OK to use CSS for all your images. The image in this case is a piece of data, just like the title and description, and semantically should use <img>. With too loose a definition, you could consider all images as optional and thus render <img> obsolete. "Might not display on all screens" is not a reason not to use an <img> element.

One way to look at it, is CSS background-image is for making elements prettier. The element should still be functional without background-image, just not as pretty. If the element isn't visible because it has no image, it's not a valid element in the first place.

CSS display and positioning properties are for moving stuff around and hiding stuff for different displays.

The proper way to do this is display: none;, assuming most browsers don't download the image. If browser support is weak, resort to a hack, like background-image or even dynamically loading with Javascript.

这篇关于如何不以语义方式将图像发送到手机的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！