媒体查询，常用设备尺寸

pc端全屏

@media screen and (min-width:1200px){
                 #shishi {
                   height: 200px;
                   width: 200px;
                     background: #000;
                 }
             }

手机端

/*phone<768  小屏，字体黑色，背景蓝色*/
 @media screen and (max-width: 767px) and (min-width: 480px){
                        #shishi {
                          height: 100px;
                          width: 100px;
                            background: #0ff;
                        }
                     }

pad端

 /*768<=pad<992 中屏，字体黄色，背景红色*/
  @media screen and (min-width: 768px) and (max-width: 991px) {
                                 #shishi {
                                   height: 100px;
                                   width: 100px;
                                     background: #f00;
                                 }
                                 
                             }

参考
媒体查询，常用设备尺寸
@media响应式媒介尺寸
@media响应式媒介尺寸