手机端布局正常，电脑端却显示异常，如何解决？

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《手机端布局正常，电脑端却显示异常，如何解决？》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

电脑端布局正常，手机端访问失败，原因及解决办法

问题描述

编写了一段手机端布局，在电脑上调试时正常。然而，切换到手机访问时却出现异常，如下所示：

<p>
写入的html代码：

<table class="cards">
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

<p>错误情况：

在手机端，布局错位，第二个单元格（4）被挤出屏幕</p>

**原因分析和解决方案**

在移动端，表格中的单元格宽度默认占据 100%，而没有设置明确的宽度。解决方法是为单元格（`td`）设置明确的宽度。

出错的布局中还涉及到了一个 flex 布局问题。flex 属性被应用于 `.cards` 类上，但其作用范围只适用于 `table` 层级，不会延伸到 `tr` 和 `td` 层级。

**DOM 结构不显示的原因**

今天关于《手机端布局正常，电脑端却显示异常，如何解决？》的内容介绍就到此结束，如果有什么疑问或者建议，可以在米云公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！

VS Code 如何点击文件直接跳转到文件进行编辑？