jsp页面如何适配不同屏幕大小的手机浏览器？

一，应用场景

       移动应用app终端，需要定制一些活动页面，开展运营类的活动。可以使用jsp定制活动页面，使用css样式适配不同终端的屏幕大小。

二，css适配样式

      css适配样式如下：

//适配手机屏幕宽度<=330px的手机
@media screen and (max-width:330px) {
    body { font-size: 32%;}
}

//适配手机屏幕宽度>=331px<=350px的手机
@media screen and (min-width:331px) and (max-width:350px) {
    body { font-size: 32%;}
}

//适配手机屏幕宽度>=351px<=365px的手机
@media screen and (min-width:351px) and (max-width:365px) {
    body { font-size: 32%;}
   .container {width: 340px;}
   .trans-info {width: 240px;}
}

//适配手机屏幕宽度>=365px<=400px的手机
@media screen and (min-width:365px) and (max-width: 400px)  {
    body { font-size: 32%; }
   .container {width: 370px;}
   .trans-info {width: 260px;}
}

//适配手机屏幕宽度>=400px的手机
@media screen and (min-width:400px) {
    body { font-size: 32%;}
   .container {width: 380px; }
   .trans-info { width: 280px;}
}