前言
昨天发表了对近期在开发的「TodoList」应用在桌面端和移动端自适应设计的思考和总结，蛮多读者阅读的，甚至有转发(是的，本公众号目前关注人数其实没有超过30的，而有100+阅读量其实已经很超预期了)。
因此，今天想着把相关的代码实现也做相应的总结，核心就三类：
- 使用
css样式中的@media screen and (max-width: xxxpx)实现识别屏幕大小，进而控制组件的显示和隐藏来实现用户感知上的自适应 - 使用
css样式中的@media (max-width: xxxpx) and (hover: none) and (pointer: coarse)实现识别移动端/桌面端，进而控制两端的组件差异化显示 - 使用
js动态嵌入代码，来实现样式差异化显示
场景1 识别屏幕大小
这里其实之前的文章有大体介绍过的，核心的代码就是在大屏幕和小屏幕采用不同的组件或不同的尺寸大小来进行显示。比如这里的「新建任务」按钮：
源码里面其实是两个按钮都存在的，只是设定在大屏幕下显示大按钮，浮动按钮不做显示。
而到了小屏幕展示，则相反：浮动按钮通过 @media screen and (max-width: xxxpx) 配置显示。
而其他的效果很多都是在 @media 的基础上进一步扩展的。比如「TodoList」小屏幕的抽屉式弹窗，实际上只是加多了一个遮罩来形成层次感而已。具体的代码实现可以参照往期的这篇文章：
![[遮罩效果.gif]]
场景2 识别移动端/桌面端
在某些场景下，期望相关组件在移动端显示，但是桌面端不显示；或者反过来桌面端显示，移动端不显示。比如这里设置中心的「窗口置顶」是不需要在手机端显示的；对应的「同步数据」也不需要在桌面端显示。
这种和上一种类似方式，也是采用 css 样式实现 @media (max-width: xxxpx) and (hover: none) and (pointer: coarse)，原理是区别是点击效果 (桌面端) 还是触摸效果 (移动端) 。
如上图，以「同步数据」的组件为例，这里默认屏幕下是隐藏效果的。由于移动端的代码没有在 DevTool 中显示，这里给出相应核心代码：
/* 桌面端 - 默认不显示 */
.mobile-shown-item {
display: none;
}
/* 移动端 - 基于触摸设备检测 */
@media (max-width: 768px) and (hover: none) and (pointer: coarse) {
.mobile-shown-item {
display: flex !important;
}
}
场景3 基于JS动态插入代码
某些场景下桌面端和移动端的自适应效果差别很大，涉及到很多组件的样式调整，这种情况下可以考虑使用 JS 动态代码进行实现。
比如这里的任务列表的渲染，两端的渲染效果差别很大，桌面端同时是列表+分页渲染，而移动端是卡片+无限下拉渲染，采用纯粹的 css 样式已经很难实现了，因而最终使用的是 JS 动态插入代码。
这里给出大体的代码截图仅作为参考。
总结
上述是具体代码的实现思路，但是回到初衷 - 自适应是为了提高用户体验而作的代码改动，绝不是为了炫技。
个人理解的屏幕自适应提高用户体验的核心设计思想：
- 桌面端，由于鼠标操作且屏幕较大，因而更适合点击操作和大屏数据渲染；
- 移动端，由于触摸操作且屏幕较小，不适合超多数据直接列表渲染，多弹窗渲染来分离页面渲染效果，且相关点击操作调整点击按钮大小以便更利于用户在小屏幕进行操作。
好啦，以上就是此次分享的全部内容，我是唐叔，感谢阅读，欢迎三连，我们下期再见。
