html元素应该从语义方向去考虑使用,而不是样式方向。
比如em
、strong
其实是为了强调,而不是为了斜体、粗体而添加。
另外,还要考虑非视觉的效果,比如screen reader、SEO等,所以还是尽量使用HTML的各种标记的特征,如h1
、p
、nav
等,不要想当然的用div
+CSS就能搞定一切,虽然视觉上看来是没有区别的。
html元素应该从语义方向去考虑使用,而不是样式方向。
比如em
、strong
其实是为了强调,而不是为了斜体、粗体而添加。
另外,还要考虑非视觉的效果,比如screen reader、SEO等,所以还是尽量使用HTML的各种标记的特征,如h1
、p
、nav
等,不要想当然的用div
+CSS就能搞定一切,虽然视觉上看来是没有区别的。
<img>
<img>
<img srcset="elva-fairy-320w.jpg 320w,
elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
这两个属性都是HTML5引入的。
srcset
xxx.jpg 320w
: 图片资源 图片真实宽度
xxx.jpg 2x
: 图片资源 像素密度
sizes
(max-width: 320px) 280px
: 媒体查询 设置宽度
设置宽度可以是百分比、em、px、rem等。
首先媒体查询屏幕宽度,设置显示图片的容器宽度,然后查询资源集,加载宽度最接近的图片资源。
注意:
<head>
中的<meta name="viewport" content="width=device-width">
是为了:强制移动端浏览器使用它们真实的窗口宽度来加载网页(一些移动浏览器伪造它们的窗口宽度,从而加载较大窗口宽度的网页然后缩放显示,这个对响应式图片或设计来说是无用的)。
<picure>
<picture>
<source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
<source media="(min-width: 800px)" srcset="elva-800w.jpg">
<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>
自适应屏幕宽度的图片
.img-wrapper {
position: relative;
width: 100%;
padding-top: 100%; /* 以宽度来计算 */
height: 0;
img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
SVG