The static layout

  • Description: the set length and width, the size will not change, no matter how big your screen is, it is the same size, the resolution will not change
  • Pros: this is the simplest layout for developers, no compatibility issues
  • Cons: scrollbars appear when the screen resolution is too low
  • Scenario: Traditional Web sites

Adaptive layout

  • Description: The original display mode can be maintained under different screen resolutions. The position of the element changes but the size does not
  • Advantages: Pages can be compatible with devices of different resolutions
  • Disadvantages: Too small screen can cause content to be overcrowded. All the devices look like the same website, but the length or images are smaller, and there is no different presentation style depending on the device
  • Scenario: Traditional Web sites

Responsive layout

  • Description: Different display modes at different screen resolutions
  • Pros: One set of code compatible with web, tablet, and mobile web
  • Cons: heavy workload, multiple versions of UI design required
  • Scenario: Compatible with many different devices at the same time

Elastic Layout (EM/REM Layout)

  • Description: Relatively laid out 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 very similar aspect ratio as the original design, perfect fit
  • Disadvantages: This layout is adaptive in width, but not in height
  • Scenario: Compatible with many different devices at the same time

Flexible Layout (Flex Layout)

  • Description: Currently a more popular layout, using the traditional layout is difficult to achieve some complex layout, using Flex layout is very easy to achieve
  • Advantages: Simple, complete and responsive to implement various page layouts
  • Cons: Compatible with IE10+ browsers only
  • Scene: Three column layout, vertical and horizontal center layout

Streamed layout (percentage layout)

  • Description: The width of the page elements is adjusted according to the screen resolution, but the overall layout remains the same. The main feature is flowing down like a waterfall, with regular infinite traversing modules.
  • Pros: flexible, full use of browser space
  • Cons: Width is adjusted to fit the screen, not particularly good for a large screen, some layout elements can be very long
  • Scenarios: Layouts like Douyin Video, Weibo Message, WeChat Moments, etc

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 in the GitHub below
  • The ongoing maintenance / 500 + face questions before update/notes 】 https://github.com/noxussj/In…
  • [3D city modeling using three. JS (Zhuhai City)] https://3d.noxussj.top/