The static layout

  • Description: it is set to the width and length, the size does not change, no matter how big your screen is it is the same size, the resolution does not change

  • Pros: This is the simplest layout for developers, no compatibility issues

  • Cons: Scrollbars appear when the screen resolution is too low

  • Scenario: a traditional Web site

Adaptive layout

  • Description: Keep the original display mode under different screen resolutions. The position of the element changes but the size does not change

  • Advantages: The page can be compatible with different resolution devices

  • Cons: Too small a screen can cause content overcrowding. All devices will look like the same website, but the length or images will be smaller, and there will be no different presentation style depending on the device

  • Scenario: a traditional Web site

Responsive layout

  • Description: Different screen resolution, different display mode

  • Pros: A set of code compatible with web, tablet, and mobile web

  • Cons: Heavy workload and multiple versions of UI design

  • Scenario: Compatible with multiple devices

Flexible layout (EM/REM layout)

  • Description: Relative layout using EM or REM units, all elements of the page are scaled equally in height and width at different screen resolutions

  • Pros: All screens have the same or similar aspect ratio as the original design, which fits perfectly

  • Disadvantages: This layout is only width adaptive, but height is not adaptive

  • Scenario: Compatible with multiple devices

Flexible layout (Flex Layout)

  • Description: This is a popular layout. It is difficult to implement complex layouts using traditional layouts, but it is very easy to implement the Flex layout

  • Advantages: Simple, complete, and responsive implementation of various page layouts

  • Cons: Only compatible with Internet Explorer 10+ browsers

  • Scene: three-column layout, vertical horizontal center layout

Flow layout (percentage layout)

  • Description: The width of the page elements is adjusted to fit the screen resolution, but the overall layout remains the same. The main feature is a waterfall of regular infinite traversal of the module.

  • Advantages: Flexible, make full use of the browser space

  • Cons: Width is adjusted to fit the screen, not a great user experience for large screens, some layout elements can be too long

  • Scene: similar to douyin video, Weibo message, wechat circle of friends and other layout

additional

  • This article is published through multiple platforms of “we media” and will not be maintained after publication. If you have any objection to the content, you can discuss it on GitHub below

  • Continuous maintenance/update 500+ github.com/noxussj/Int…

  • 3D city modeling using three.js (Zhuhai