FWQ
手机端布局正常,电脑端却显示异常,如何解决?
手机端布局正常,电脑端却显示异常,如何解决? 积累知识,胜过积蓄金银!毕竟在文章开发的过程中,会遇到各种各样的问题,往往都是一些细节知识点还没有掌握好而导致的,因此基础知识点的积累是很重要的。下面本文《手机端布局正常,电脑端却显示异常,如何解决?》,就带大家讲解一下知识点,若是你对本文感兴趣,或者是想搞懂其中某个知识点,就请你继续往下看吧~ 电脑端布局正常,手机端访问失败,原因及解决办法 问题描述 编写了一段手机端布局,在电脑上调试时正常。然而,切换到手机访问时却出现异常,如下所示: <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` 类上,但其作用范围只适用于…