How to decide max-width in XD?

I have seen old questions about this subject but they are quite old. I guess things change so that is why I ask this. I want to be updated.

I am about to design a web page mockup in Adobe XD. I will only design in XD – coders will then transform my designs into a webpage. I don’t have any data of the users since it is a new project.

The page will be responsive of course. I don’t want it to be full-width design but rather a fixed width webpage with different breakpoints all the way from large monitors all the way down to smartphones.

I am trying to find where these breakpoints should be. I want to start designing the maximum width page and then move my way down when it comes to size.

However, what should the max-width be for people with 4k screens? It is so confusing because of different scalings and different monitors. Where should the breakpoints be? I have seen that Google’s Material.io recommends breakpoints but it is all in dp instead of px. AdobeXD does not work with dp. I just wish someone could tell me what breakpoints to use in XD so that I can start designing.

Any tips would be greatly appreciated!

What is the best max-width content container in a website?

Following Bootstrap 3/4 or other frameworks, we have notice discrepancies in terms of max-width for the main content, for instance:

  • In bootstrap 3 the max width of the container is 1170px
  • In bootstrap 4 the max width of the container is 1140px.
  • In Microsoft website, currently the max width is 1600px

The data from google analytics indicates that most of the users have a screen resolution of 1366×768 about 12.76%.

What principle/rule can we use to determine what is the best max width following standards and screen resolutions?

Thanks