屏幕自适应

示例代码:

@media screen and (max-width: 740px) {
  body{
    /*background: url("./pages/home/1.jpeg");
    background-repeat: no-repeat;
    background-size: 100% 100%;*/
   }
   div.active{
        color: #333;
   }
}

@media screen and (min-width: 741px) and (max-width: 1160px) {
   body{
    /*background: url("./pages/home/1.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;*/
   }
}


@media screen and (min-width: 1160px)  {
  body{
    /*background: url("./pages/home/2.jpeg");
    background-repeat: no-repeat;
    background-size: 100% 100%;*/
   }
}

示例

/* 屏幕宽度小于340px时的样式 */
@media (max-width: 340px){ /* 样式1 */ }

/* 屏幕宽度在340px至410px时的样式 */
@media (min-width: 340px) and (max-width: 410px){ /* 样式2 */ }

/* 屏幕宽度大于410px时的样式 */
@media (min-width: 410px){ /* 样式3 */ }

上面其实和下面是等效的，建议用下面的精简写法：

/* 屏幕宽度在340px至410px时的样式 */
/* 样式2 */

/* 屏幕宽度小于340px时的样式 */
@media (max-width: 340px){ /* 样式1 */ }

/* 屏幕宽度大于410px时的样式 */
@media (min-width: 410px){ /* 样式3 */ }

这样屏幕适配框架就完成了