Article directory
Solution one: Use CSS media queries.
This is the traditional solution. Use a set of codes, first do the PC side, and then adjust the mobile side style according to the viewport.
pseudocode:
@media screen and (max-width:992px){...}
@media screen and (max-width:1400px){...}
Disadvantages : The interface interaction experience is different from that ofPC端 , and the layout of the page is also different. Mobile端Relying solely on CSS media queries only makes the pages on the PC side available on the Mobile side, which is far from the effect of the native Mobile side. It is relatively rigid to display on the mobile terminal.
Solution 2: Write two sets of codes, which are applied to PC and mobile respectively.
This can achieve the desired effect, but the same business logic requires the development of two sets of codes, which increases time and labor costs.
Recommended solution: use CabloyJS
pc = mobile + pad adaptive layout
CabloyJS full-stack framework pioneered pc = mobile + pad adaptive layout mechanism
Effect : Only one set of code is needed, compatible with both mobile and PC, and the mobile terminal achieves a native interactive experience
Principle : Adapt to the mobile terminal first, and then seamlessly bring the interactive experience and development mode of the mobile terminal to the PC terminal. Therefore, the PC side can be seen as a combination of many Mobile-sized and Pad-sized page components.
Advantages of the new solution: This solution also implements the design principle of out-of-the-box + flexible expansion, with a simple but not simple style.
You can understand this mechanism through 查阅文档or 观看视频, the amount of code required for actual front-end page development is very streamlined, far more concise than css media queries.
Related Links
- CabloyJS Documentation: https://cabloy.com
- Station B video: unique cross-terminal solution: pc=mobile+pad adaptive layout