CSS responsive for 1080p and above - html

Question

Recently I am thinking about creating a responsive website that displays really well on high resolution screens, like 2k and 4k screens, I will also make it responsive on desktop and smaller devices.
Problem:
Because different screen sizes will have different font size, padding and margin so there is going to be a lot of similar media query codes and I don't think it's a good idea to repeating similar media query codes so is there any other good approaches?
Example of REPEATING SIMILAR CODES:
#media only screen and (min-width: 900px) {
.title{
font-size: 1rem;
margin-bottom: 0.2rem;
}
}
#media only screen and (min-width: 1200px) {
.title{
font-size: 1.5rem;
}
}
#media only screen and (min-width: 1920px) {
.title{
font-size: 2rem;
margin-bottom: 0.5rem;
}
}
#media only screen and (min-width: 2560px) {
.title{
font-size: 3rem;
margin-bottom: 1rem;
}
}
#media only screen and (min-width: 3840px) {
.title{
font-size: 3.5rem;
margin-bottom: 1.2rem;
}
}
Is above approach the only approach or is there any other ways I can use so I don't need to change font size, padding and margin on every different screen size.

Answer 1

After some trying out, I created a sass mixin to help myself with my responsive design, I am not sure if this works 100% well but I think it might be able to help a little.
code:
#function size-number($base-size, $new-size) {
#if $new-size != 0 {
#return $new-size;
} #else {
#return $base-size;
}
}
#mixin break-points-resize ($properties) {
$PROPERTIES: $properties;
$BREAKPOINTS: ("1920px","2560px","3840px",);
#for $i from 1 through length($BREAKPOINTS) {
#media only screen and (min-width: nth($BREAKPOINTS, $i)) {
#each $PROPERTY-KEY, $PROPERTY-VALUE in $PROPERTIES {
$SIZE-NUMBERS: map-get($PROPERTY-VALUE, "size" );
// [1920px default size => 2], [2560px default size => 3], [3840px default size => 4]
$BASE-SIZES: (size-number(2,nth($SIZE-NUMBERS, 1)),size-number(3,nth($SIZE-NUMBERS, 2)),size-number(4,nth($SIZE-NUMBERS, 3)));
$INDIV-PROPERTY-KEY: $PROPERTY-KEY;
$VALUE-NUMBERS: map-get($PROPERTY-VALUE, "value" );
#{$INDIV-PROPERTY-KEY}: $VALUE-NUMBERS * nth($BASE-SIZES, $i);
}
}
}
}
h1{
// Specify size, it will use the size that is specified (Three breakpoints, three size)
#include break-points-resize(("font-size":("value": 2rem,"size": (2,3,3.5))));
// Specify 0, it will use the default size (Three breakpoints, three size)
#include break-points-resize(("font-size":("value": 2rem,"size": (0,0,0))));
}
Sorry the code is a little messy