CSS知识拾遗(10-11):CSS像素与物理像素事宜

  1. 为什么要合并.css文件?
    因为,无论你的<link>元素里面的media属性如何声明,最新版本的主流浏览器都会下载你所有的<link>元素的src属性里面声明的CSS文件。
  2. CSS像素与物理像素(Physical Pixel)
    // 下面的HTML代码规定一个图像元素的宽度为“300 CSS像素”
    <img src="img.png" width="300"/>
    // 由于移动设备的物理像素越来越高,
    // 传统适用于桌面浏览器的像素在移动设备上看来会很小很小。
    // 因此,有了像素比(px ratio)
    // 解决方案有:
    // .svg方案(需fallback)
    <img src="img.svg" width="300" />
    // srcset属性方案(代码少)
    <img src="default.jpg" width="300" height="300"
      srcset =
        "hi.jpg 2x
        , uhi.jpg 3x"
    >
    // <picture>方案(最佳方案)
    <picture>
      <source 
        media="(max-width: 720px)"
        srcset="hd.jpg">
      <source 
        type="image/webp"
        media="(max-width: 720px)"
        srcset="hd.webp">
      <source
        media="(max-width: 1080px)"
        srcset="fhd.jpg">
      <source
        type="image/webp"
        media="(max-width: 1080px)"
        srcset="hd.webp">
      <source 
        src="default.jpg">
      <img 
        src="fallback.jpg" 
        alt="description on the image">
    </picture>
    // 如果浏览器不支持<picture>元素,它会使用它里面的<img>
    // 参考ResponsiveImages.org
    // background-position方案
    <div id="imageHost"></div>
    <style>
      #imageHost{
        background-image: url("default.jpg");
        background-repeat: no-repeat;
        background-position: 300px 300px;
      }
      @media
        (min-width: 720px)
      {
        #imageHost{
          background-position: 0px 0px;
        }
      }
    </style>
    // background: url("...") 方案
    <div id="img"></div>
    <style>
    #img{
      background-color: rgb(236,236,236);
      width: 300;
      height: 300;
    }
    #img{
      background: url("path/to/default.jpg") left top no-repeat;
    }
    
    /* 为确保兼容性 */
    @media
      (-webkit-min-device-pixel-ratio: 2)
    {
      #img{
        background: url("path/to/retina.jpg");
      }
    }
    @media
      (-min--moz-device-pixel-ratio: 2)
    {
      #img{
        background: url("path/to/retina.jpg");
      }
    @media
      (-o--moz-device-pixel-ratio: 2)
    {
      #img{
        background: url("path/to/retina.jpg");
      }
    }
    
    @media
       (min-resolution: 2dppx)
     {
       #img{
         background: url("path/to?retina.jgp");
       }
     }
    </style>
    // JS方案
    <img id="img" src="default.jpg" />
    <script>
      if(window.devicePixelRation >= 2){
        document.getElementById("img").src = "retina.jpg";
      }
    </script>
    // iOS专用方案
    #photoHostEl {
      background-image:
        -webkit-image-set(
          url("default.jpg") 1x
          , url("retina.jpg") 2x
     );
      width: 100px; 
      height: 100px;
    }
    // 让后端解决