Blog Preview Card Responsive Page

Community feedback

• 

  Nigusu Daniel•50

  @KingDan123Posted 4 months ago

  When it comes to utilizing measurements other than pixels (px) for font sizes and container widths, you have a few options. Here are some commonly used units: Percentage (%): This unit allows you to set sizes relative to the parent element. For example, if you set the font size of a container to 100%, it will take the font size of its parent element. Using percentages can help maintain proportionality across different screen sizes. Viewport Width (vw): This unit represents a percentage of the viewport width. For instance, setting a font size to 5vw means the font size will be 5% of the viewport width. Using vw can be useful for responsive designs as the font size will adjust automatically based on the screen size. Viewport Height (vh): Similar to vw, vh represents a percentage of the viewport height. It allows you to set sizes relative to the height of the viewport. For example, setting a container's height to 50vh means it will take up 50% of the viewport height. Em (em): The em unit is relative to the font size of the nearest parent element with a defined font size. If no parent element has a defined font size, it's relative to the browser's default font size. Using em can help create scalable designs based on the font size hierarchy. To make font sizes change with the dimensions of the screen, you can use CSS media queries. Media queries allow you to apply different styles based on the characteristics of the user's device, such as screen width. By defining different font sizes for different screen sizes, you can achieve responsive typography.

  Here's an example of using a media query to change font sizes:

  css Copy .container { font-size: 16px; }

  @media screen and (max-width: 768px) { .container { font-size: 12px; } } In this example, the font size of the .container class is set to 16 pixels by default. However, when the screen width is 768 pixels or less, the font size is changed to 12 pixels. Remember that implementing responsive design requires testing on various devices and screen sizes to ensure your website or application looks and functions well across different platforms.

  Marked as helpful

  1

  ---

  

  jubileelin•100

  @jubileelinPosted 4 months ago

  Thank you for your help, I will look into those concepts @KingDan123

  0