如果浏览器的宽度小于X，是否要切换到移动视图？

Question

出于各种原因，我正在创建一个网站（尚未在线），该网站具有单独的移动页面。我想在“监视”站点中添加一些内容，该内容是“如果浏览器宽度小于X像素，请查看* mobilepagename.html而不是此页面。我可以在主站点CSS中添加哪些代码来实现此目的？

Answer 1

仅使用CSS不能切换页面。不过，您可以进行媒体查询以根据屏幕尺寸更改样式。

@media screen and ( min-width: 'px' ) and ( max-width: 'px') {
  /* Mobile Styles */
}

或者您可以使用

@media screen and ( max-width: 'px' ) {
  /* Mobile Styles */
}

max-width和min-width也不需要以像素为单位。您可以使用各种单位，例如vw，em等。

如果要根据屏幕大小切换页面，则需要使用Javascript。

if ( window.outerWidth < x ) { 
    window.location = 'newpage.html'; 
}

编辑

将上述Javascript与resize事件合并。

window.addEventListener('resize', function(e) {

  if ( window.outerWidth < 1024 ) {
    window.location = 'yourmobilepage.html';
  }

});