移动端是手机和平板的统称。它们使用广泛，使用频率高， 因此导致移动端优先的设计策略。
移动端设计，三个约束最重要：第一，屏幕尺寸偏小；第二不同设备的屏幕尺寸差别大； 第三，屏幕可以横放，也可以竖放。
移动端设计的5条顶层原则
我总结了网上能找到的移动端设计的几十篇文章，总结出5条便于执行的具体的顶层原则。
原则1：先设计移动端的方案，其次才是PC端。
原则2：先从最小的屏幕开始设计，然后扩展到更大的屏幕。
原则3：先实现最核心的功能，然后再扩展其他功能。
原则4：CSS框架应当是响应式的，当屏幕发生变化了，自动适应变化。
原则5：尽可能在多种设备上测试，以便尽早发现问题。
TailWind移动端设计的6条最佳实践
我使用TailWind开发Kunniaa Voice Repeater。
TailWind CSS是效率优先的CSS框架：多数情况下， 不需要在Style设计样式， 直接在Class中使用即可，又叫原子化CSS。不需要绞尽脑汁给CSS样式起名字， 不需要自己写CSS文件，因为TailWind的CSS文件是编译生成的。
在开发的过程中，我总结出6条最佳实践。
1. 通过编译，删除掉不需要的样式，可以将CSS文件从几M降低到几个K，十几个K，几十个K。
2. 使用媒体查询功能，让设计能适应手机，平板，超大屏幕等多种显示设备。
3. 优化性能。某些原子类的组合，会被重复使用。 那么，用apply把这些组合定义成一个独立的更短的类名，可以进一步减少HTML文件的尺寸。
4. 谨慎使用JS动态地调整样式，因为不同的浏览器对样式有不同的实现， 可能导致样式的表现不一致。可能会劳而无功。尽量只使用框架自身提供的功能。
5. 使用flex-wrap，flexbox, flex-row, flex-col，对页面元素进行自适应堆叠。
6. 为了美观，可以使用tailwind的自带插件，调整纵横比，排版，表单，让页面更美观。