Custom srcset for responsive images?

I’m trying to create custom srcsets for each image size so they will be responsive and displayed in a certain way on certain viewports. I can’t seem to find a good tutorial or guide, and I don’t really want to “just use a plug-in” as I’ve been told so many times.

Is there a possible way to do this within the functions.php file? The sizes I have added are below.

add_action( 'after_setup_theme', 'wpdocs_theme_setup' );
function wpdocs_theme_setup() {
    add_image_size( 'category-thumb', 1024 ); // 300 pixels wide (and unlimited height)
    add_image_size( 'single-thumb', 1024, 400, true ); // Single Posts
    add_image_size( 'homepage-thumb', 350, 350, true ); // (cropped)
    add_image_size( 'archive-thumb', 400, 400, true ); // (cropped)
}

add_filter( 'image_size_names_choose', 'rudr_new_image_sizes' );
function rudr_new_image_sizes( $sizes ) {

    $addsizes = array(
        "category-thumb" => 'Featured Size',
        "homepage-thumb" => 'Home Size',
        "archive-thumb"  => 'Archive Size',
        "single-thumb"  => 'Single Posts Size',
    );

    $newsizes = array_merge( $sizes, $addsizes );

    return $newsizes;

}

How do I go about making these responsive below the smallest size of 350 pixels, I know it’s quite unusual for devices as small as that, but I just want to have everything responsive, including images.

I’d love to also read some explanation on how to do it, if you find the time to type it out. Thanks in advance!