Skip to content

Instantly share code, notes, and snippets.

@NoName4Me

NoName4Me/[mozilla]web-developer-basics.md

Created May 17, 2017 15:49
Show Gist options
  • Save NoName4Me/b4f237602efa9fff07b1daff4503deab to your computer and use it in GitHub Desktop.
Save NoName4Me/b4f237602efa9fff07b1daff4503deab to your computer and use it in GitHub Desktop.
Download ZIP
Raw
[mozilla]web-developer-basics.md

html元素应该从语义方向去考虑使用，而不是样式方向。 比如em、strong其实是为了强调，而不是为了斜体、粗体而添加。

另外，还要考虑非视觉的效果，比如screen reader、SEO等，所以还是尽量使用HTML的各种标记的特征，如h1、p、nav等，不要想当然的用div+CSS就能搞定一切，虽然视觉上看来是没有区别的。

@NoName4Me
Copy link
Author

responsive <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>

@NoName4Me
Copy link
Author

自适应屏幕宽度的图片

.img-wrapper {
    position: relative;
    width: 100%;
    padding-top: 100%; /* 以宽度来计算 */
    height: 0;
    img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
 }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment