前端页面开发浅谈：PC 端设计如何“完美，2024年最新基于微信小程序设计与实现

这就需要我们开发者对于屏幕内容（菜单等信息）做出处理，扩大可操作范围，以满足用户的需求。

我们不仅需要在开发设计的阶段考虑这些问题，在项目上线之前也一定要在真机环境下测试，而非仅仅在浏览器中点点即可。

例如：我们日常所使用的微信，虽然底部 4 个菜单的占用位置不大，但是可触控的范围却是很大的，大家可以试一下，如下图所示：

5.2.2、特殊样式

实现多种特殊控件的交互，如多选、下拉菜单等等。

例如：如下图所示，在华为云官网的弹性云服务器的控制台这里就做了一个很好的处理，我们可以看到在 PC 端和移动端的交互方式也是不一样的。

PC 端的控制台如下图所示：

移动端的控制台如下图所示：

小结：曾经的我们是以简单的自适应来满足对系统功能的需求，而现在简单的自适应已经无法满足日益增长的用户移动端需求了。很多开发商都是专门做两套不同端的应用以满足用户。

5.3、编码

编码是开发人员的立足之本，只是“会写”是不行的，更要结构坚固、形式优美……

对于上面例子的表单内容，我们在代码方面做如下分析：

我们使用了如下几个熟悉的前端标签：<form>、<label>、<input>、<button>

可能有人会说，“哎你为什么不直接用<div>呢，<div> 和 js 不香吗？”

<div> 和 js 能有什么坏心眼儿呢，无非就是让你写了不必要的代码。“最好的食材往往只需要最朴素的烹饪方式。”

5.3.1、form 标签

<form>可以最大限度的保证功能的正常执行。它具有 div+js+jquery 无法满足的功能，具有 action、method，同时 form 标签可以保证页面在 js 与 jquery 无法加载成功的前提下表单正常提交，而不依赖于整个前端框架的加载，这是一个分离的思想。

只谈技术，国内前端的标杆目前还是淘系团队。如下图所示，淘宝目前登录页使用的还是 form 标签，这就说明 form 承载淘宝这种大用户量级别的登陆需求是完全没问题的。