Mobile end is a general term for mobile phones and tablets. They are widely used and frequently used, which leads to a mobile-first design strategy.
For mobile design, three constraints are most important: first, the screen size is small; second, the screen sizes of different devices vary greatly; third, the screen can be placed horizontally or vertically.
5 Top-Level Principles
I summarized dozens of articles on mobile design that I could find online and came up with five specific top-level principles that are easy to implement.
Principle No.1: Design the solution for mobile first, then the desktop.
Principle No.2: Design for the smallest screen first, then scale to larger screens.
Principle No.3: Implement the most core functions first, then expand other functions.
Principle 4: The CSS framework should be responsive and automatically adapt to changes when the screen changes.
Principle 5: Test on as many devices as possible to detect problems as early as possible.
6 Best Practices For TailWind Mobile Design
I use TailWind to develop Kunniaa Voice Repeater.
TailWind CSS is a practical CSS framework: in most cases, you don't need to design styles in Style, you can use them directly in Class, also known as atomic CSS. You don't need to rack your brains to name CSS styles, and you don't need to write CSS files yourself, because TailWind's CSS files are compiled and generated.
During the development process, I summarized 6 best practices.
No.1: By compiling and deleting unnecessary styles, the size of the CSS file can be reduced from several MB to several KB, dozens of KB, or dozens of KB.
No.2: Use the media query function to make the design adaptable to various display media such as mobile phones, tablets, monitors, and ultra-large screens.
No.3: Optimize performance. Some combinations of atomic classes will be used repeatedly. Then, use apply to define these combinations as a separate class name, which can further reduce the size of the HTML file.
No.4: Be cautious when using JS to dynamically adjust styles, because different browsers have different implementations, resulting in inconsistent style performance. It may be futile. Try to only use the functions provided by the framework itself.
No.5: Use flex-wrap, flexbox, flex-row, flex-col to stack tags adaptively.
No.6: For aesthetics, you can use Tailwind's built-in plug-in to adjust the aspect ratio, layout, and form to make the page more beautiful.