Html兼容手机需要两步

使用完整版Meta

VS code自动生成的不够完整

借用淘宝网移动端Meta

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

响应式

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着大屏幕移动设备的普及，用“大势所趋”来形容也不为过。

一般使用媒体查询实现，如

@media (max-width: 500px) {
  /*媒体查询*/
  #html {
    height: 50vh;
    overflow: auto;
  }
  #divwrapper {
    height: 50vh;
  }
  #div1 {
    position: relative;
    top: 0;
    right: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}