html - 移动设备的准确横幅图像大小可响应不同设备

Question

如何处理响应不同设备(如中小型手机和平板电脑)的横幅图像？

Answer 1

1. Width:

.banner
{
    max-width: 100%;
    height: auto;
}

2. Media Query:

    @media only screen and (min-width: 960px) {
        .banner
        {
          width: 960px
          height: auto;
        }
    @media only screen and (min-width: 1440px) {
        .banner
        {
          width: 1440px
          height: auto;
        }
    }
    @media only screen and (min-width: 2000px) {
        .banner
        {
          width: 2000px
          height: auto;
        }
    }
    @media only screen and (max-device-width: 480px) {
       .banner
        {
          width: 480px
          height: auto;
        }
    }
    @media only screen and (device-width: 768px) {
       .banner
        {
          width: 768px
          height: auto;
        }
    }