Responsive landing page using Bootstrap

Community feedback

• 

  Ahmed Aziz•90

  @Abo3bazez

  Posted 9 months ago

  Using rem and em instead of pxin CSS offers significant advantages, especially when it comes to responsive design, accessibility, and maintainability. Here’s some feedback on the benefits of adopting rem and em units:

  Advantages: 1.Responsive Typography:

  remand em are relative units, making it easier to create scalable layouts. When users adjust browser settings (e.g., zoom or base font size), designs based on rem/em scale appropriately, whereas px-based designs remain fixed.

  2.Accessibility:

  Relative units like rem and em respect user preferences, especially for those with visual impairments who adjust their base font size for better readability. Designs using px ignore such user-defined settings, potentially causing readability issues.

  3.Consistency Across Devices:

  rem and em units ensure consistent rendering across various devices and screen sizes. For example, using rem for layout dimensions allows elements to scale based on a user’s default font size, creating a more fluid and adaptable design.

  4.Easier Scaling of Elements:

  By using rem for root-level elements and em for nested elements, you can control the scaling of individual components more effectively. This flexibility is helpful for modular design systems, where you want components to be flexible and adapt to their context.

  5.Maintaining Proportions:

  Using relative units helps maintain proportions between text sizes and other layout elements (like padding, margins, etc.), which becomes crucial for responsive designs. This eliminates the need to manually adjust pixel values for different breakpoints.

  10