css - 如果浏览器比 X 窄，切换到移动 View ？

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 与调整大小事件结合起来。

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

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

});