Breakpoint responsive

Kindly Anyone tell me what are the common breakpoints for responsive layout…??

There is a range of opinion on these. I would do a search to see what most people are using.

I never use px values for breakpoints, I always use em units. In my opinion this makes it much easier to set break points because I am letting the content decide where the break point should be instead of arbitrary px values. But I understand that not everyone feels this way and I won’t bad mouth people who use px. In fact, the majority of sites out there use px, so I know I’m on the losing side of the battle. But give em a try if you don’t want to worry about this. If you have any questions about using em you can message me directly or post them here.

1 Like

Hello Respected Sir, I never use the em before how should i use em ???

First, always use a narrow-first (or mobile-first if you prefer that term) approach to styling your page. Narrow your browser as far in as it will go and style your page so it looks good at this narrow width. This will be your base CSS. You should not be using any break points at this time.

After you have your narrow view styled correctly then gradually widen your browser until you feel you have enough room change the layout on your page, this will be your first break point. You can measure the width of your page in px and then divide by 16 to get the approximate em value and adjust as needed. You use use min-width for the break point. Then add your style changes for the wider view port inside the break point. Remember to always use em or rem units for any elements that you need to set a min-width/width/max-width on. Continue widening and adding break points as needed.

Notice I never mentioned a specific px value. Each time you add a break point you are adding it based on how much room the content needs for the layout you want to use. In other words, you are letting the content determine the break points. For example, when do you shift a single column of elements in narrow view to a two column layout in a wide view? When you feel you have enough room to do so. It doesn’t matter what the actual px width of the browser is because you are adding the break point in em when you feel you have enough room to make the shift.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.