在小屏幕上显示不同的演示文稿？

Question

我有简单的网页演示文稿（html + css）旧网站，没有移动设备，只是想在小型设备（少于920px）上显示一些简单的bootstrap onepage presentatio，所以想法是如果屏幕小于920px来显示新的演示文稿，使网站移动，我的选择是：

1.如果使用小屏幕，则使用JS / Jquery在新页面或子域上重定向用户

任何其他想法都会有所帮助..

致以最诚挚的问候，

帕夫莱

Answer 1

use media query
<div class="static" style="height:300px;width:100%">
</div>
<div class="dynamic">
</div>
<style>
  @media only screen and (max-width: 600px) {
.dynamic{
  height:100px;
  } 
}
@media only screen and (min-width: 600px) {
.dynamic{
  height:200px;
  } 
} 
@media only screen and (min-width: 768px) {
.dynamic{
  height:300px;
  } 
} 
@media only screen and (min-width: 992px) {
.dynamic{
  height:400px;
  } 
} 
@media only screen and (min-width: 1200px) {
.dynamic{
  height:500px;
  } 
}