前言 不知道大家在工作中是否遇到需要把一个非移动端的项目快速改造成为移动端适配的需求 此篇以 理论+实战演示 快速分析改造一个项目使其能进行移动端适配 同时对移动端适配方案也进行了总结 妈妈再也不用担

写在前面： 什么是多端适配？ 前端的多端适配是指在开发前端网页或应用程序时，通过编写不同的布局和样式代码，使得同一个项目能够适应不同的终端设备，如PC端和移动端，以提供更好的用户体验。 由于PC端和移

时隔 3 年，重新接触了移动端 h5 页面开发，上一次还是大四实习。这一次是 hybrid 开发，涉及到 h5 页面与原生 app 的交互，h5 页面需要与原生打通登录态，以及调

移动端页面调试一直是好多朋友头疼的问题，iOS 由于其封闭的特性和整体较高的性能，整体适配相对好做，调试也由于 safari 的打通变得很方便。而 Android 系统，尤其是国内环境下的 Android 系统，由于版本跨度大，且各家厂商采用自研内核，使得其成为移动端页面问题出…

前端页面调试技巧，使用edge调试安卓app/手机浏览器网页。绕过chrome的访问限制，解锁控制台所有功能~

混合开发中，需要在app端访问h5页面(基于React),工单反馈，在vivoV5中打开是空白页。在IOS系统上没有问题，在部分Android系统上会出现这个问题，但是直接使用手机自带的浏览器是没有问题的。 做完以上部分，基本就可以看到我们熟悉的web调试页面了。但是，如果问题…

这时候，手机页面右下角会出现一个 vconsole 按钮，点击 vconsole 按钮就可以打开控制台进行调试了。 这个控制台和PC上的类似，console.log('test')，可以打印出 test 。

2. 1px边框的问题 2. background-image 和border-image类似，准备一张符合条件的边框背景图，模拟在背景上。 上面两种都需要单独准备图片，而且圆角不是很好处理，但是可以应对大部分场景。 这种方式可以满足各种场景，如果需要满足圆角，只需要给伪类也加…

由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。 4、如果前面的元素设置了浮动，那后面的元素就有可能产生异位的现象。 这些问题让众多开发这相当苦恼，尤其是在相对复杂的项目，各…