响应用户界面

响应用户界面 https://developers.google.cn/web/fundamentals/design-and-ux/responsive/

CSS 媒体查询用于自适应设计 https://developers.google.cn/web/fundamentals/design-and-ux/responsive/#css

    .box {
      width: 120px;
      height: 120px;
      background: #f48;
    }
    @media (max-width: 1000px) { /*浏览器宽度小于 1000px时*/
      .box {
        background: red;
      }
    }
    @media (orientation: landscape) {/*横屏*/
      .box {
        background: blue;
      }
    }
     @media (orientation: portrait) { /*竖屏*/
      .box {
        background: green;
      }
    }

图像 https://developers.google.cn/web/fundamentals/design-and-ux/responsive/images

background-image: image-set();

chrome 有效

    .box {
      width: 120px;
      height: 120px;
      background-image: url(http://per.kelantu.com/photos/1515232896-FnIf9c57Hf1-l7DUdBwlXdN1bcLv-ng0?e=3153600000&token=CT86R8zZYVXDyHWEWFoMX4pz0ksOzxtKCaC80si4:ZodhYJxq7jbwaeeCe_r_9de7Nf4=);
      background-image: image-set(  
        url(http://per.kelantu.com/photos/1515232896-FnIf9c57Hf1-l7DUdBwlXdN1bcLv-ng0?e=3153600000&token=CT86R8zZYVXDyHWEWFoMX4pz0ksOzxtKCaC80si4:ZodhYJxq7jbwaeeCe_r_9de7Nf4=) 1x,  
        url(http://per.kelantu.com/photos/1514437475-FlTozLVMxiq8Ctx0Mbh8G5Hc6hvk-ng0?e=3153600000&token=CT86R8zZYVXDyHWEWFoMX4pz0ksOzxtKCaC80si4:0Jf5nGsPWg5WhNUgQJisyMcGiaQ=) 2x  
      );

      background-image: -webkit-image-set(  
        url(http://per.kelantu.com/photos/1515232896-FnIf9c57Hf1-l7DUdBwlXdN1bcLv-ng0?e=3153600000&token=CT86R8zZYVXDyHWEWFoMX4pz0ksOzxtKCaC80si4:ZodhYJxq7jbwaeeCe_r_9de7Nf4=) 1x,  
        url(http://per.kelantu.com/photos/1514437475-FlTozLVMxiq8Ctx0Mbh8G5Hc6hvk-ng0?e=3153600000&token=CT86R8zZYVXDyHWEWFoMX4pz0ksOzxtKCaC80si4:0Jf5nGsPWg5WhNUgQJisyMcGiaQ=) 2x  
      );

    }