My intention is to create an e-commerce website that is adaptable for users at any screen resolution. To achieve this, I am contemplating designing the layout for a monitor (1024 px wide), a tablet, and a mobile phone. Nonetheless, I am uncertain as to which standard resolution should be used for prototyping the latter two.

However, it may be more practical to create the website using only two resolutions to reduce expenses, preserve functional and convenient navigation, and save time. As such, a resolution of 980 px could be applied for both monitors and tablets, while 320 px could be used for mobile phones. What are your thoughts on this approach?

I have incorporated the following code in my work:

@media (min-width : 320px){}
@media (min-width: 768px) {}
@media (min-width: 998px) {}
@media (min-width: 1224px) {}

Additionally, I have transitioned from using pixels to em for responsive design some time back. With the varying resolutions of mobile devices, I found that the use of pixels could produce unexpected letter sizes on certain screens. In contrast, using em has proven to provide consistent and reliable results without any grievances thus far. In fact, it has been highly convenient for me.

When creating a design, one must pay attention to the technical task of fitting the site elements into the specified width. It can be more challenging to fit elements within a given width than to stretch them to fill the desired dimensions. Therefore, it is ideal to focus on the minimum width of the class.

For mobile phones, 320px should be considered with emphasis placed on the viewport of the smallest iPhone device. As for tablets, 768px is recommended, with focus directed towards the iPad when in portrait orientation. For desktops and landscape tablets, 1000px is suggested.

If the design does not have a maximum width and stretches to the edges of the browser window, the designer may choose to draw one or more sketches for wider screens at their discretion.

When deciding on an order to draw the design, it depends on the technical task set. Typically, the task outlines the full functionality for the desktop version, making it easier to draw a design for 1000px then rearrange it for 768px and 320px by eliminating or simplifying less significant site elements.

It is also convenient to start designing from smaller screens to larger ones (from simple to complex). With a mobile-first approach, the layout designer adds new styles for large screens on top of the basic 320px version instead of resetting the styles written for desktop browsers. This results in faster CSS parsing for mobile devices.

I think your approach of designing the website using two resolutions (980 px for monitors and tablets, and 320 px for mobile phones) is a practical and efficient way to create an e-commerce website that is adaptable for users at any screen resolution. By focusing on these two resolutions, you can reduce expenses, ensure functional navigation, and save time during the design and development process.

Designing for 980 px will cover most monitors and tablets, providing a consistent user experience across multiple devices. Additionally, designing for 320 px will optimize the website for mobile phones, which have smaller screens and require a different layout.

It's important to keep in mind that responsive design techniques can further enhance the adaptability of your website. These techniques involve using fluid layouts, flexible images, and media queries to adjust the website's appearance based on the device's screen size and orientation. By implementing responsive design, you can ensure that your e-commerce website looks and functions well on a wide range of devices, beyond just the specific resolutions you mentioned.

Overall, your approach seems reasonable and practical, but consider also incorporating responsive design principles to make your website even more adaptable and user-friendly.