背景图片根据不同宽度的屏幕适配

需求：首页有个大的背景图，需要根据设备屏幕的不同宽度进行图片大小适配。 实现思路：使用媒体查询实现不同宽度适配。

APP.vue ``

Home.vue `

` 遇到的问题：直接使用.home-container .bg-img进行选择和设置，不生效，必须从根元素开始选择。以下是正确代码：

`@media only screen and (max-width: 1280px){

            .content  .home-container  .bg-img{

                background-image:url(../assets/home/bgc_1280.png);

            }

        }

        @media only screen and (min-width: 1300px) and (max-width: 1440px){

            .content  .home-container  .bg-img{

                background-image:url(../assets/home/bgc_1440.png);

              

            }

        }

        @media only screen and (min-width: 1460px) and (max-width: 1920px){

            .content  .home-container  .bg-img{

                background-image:url(../assets/home/bgc_1920.png);

                         }

        }

        @media only screen and (min-width: 1930px) {

            .content  .home-container  .bg-img{

                background-image:url(../assets/home/bgc_2560.png);

            }

        }`