How to design responsive layouts with ResponsiveLayout and Grid? - xamarin.forms

Question

I am trying to understand the logic of the Grid layout structure in Xamarin.Forms.
I created some rows and columns with Grid tags and encoloured them with background colours to be able to check their width and height.
When I check the result, I see a lot of different outputs depending on the dimensions of devices.
Please check the emulators' outputs:
My application will be only a mobile application and it won't be displayed on any other platforms. I think these differences are too much for a mobile application. Is it possible to design adaptive UI with Xamarin or do we have to write separate codes for all different dimensions?
Or are there any logical errors in my xaml file?
<ContentView.Content>
<RelativeLayout Padding="0">
<!-- Background -->
<Image Aspect="AspectFill"
Source="bg.png"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height}"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.1*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="0.1*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1.2*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackLayout Grid.Column="0" Grid.Row="0"
BackgroundColor="Fuchsia" />
<StackLayout Grid.Column="1" Grid.Row="0"
BackgroundColor="Blue" />
<!--Title Starts-->
<StackLayout Grid.Column="1" Grid.Row="1"
BackgroundColor="Blue"
Padding="0, 2, 0, 0">
<Label Text="TITLE"
HorizontalOptions="Center"
TextColor="#28ddff"
FontSize="32"
BackgroundColor="Black"
Opacity="0.7">
<Label.FontSize>
<OnPlatform x:TypeArguments="x:Double"
iOS="30"
Android="25" />
</Label.FontSize>
</Label>
<!--Title Ends-->
<!--SubTitle Starts-->
<Label Text="SUBTITLE"
HorizontalOptions="Center"
TextColor="#ffffff"
FontSize="32"
BackgroundColor="Black"
Opacity="0.7">
<Label.FontSize>
<OnPlatform x:TypeArguments="x:Double"
iOS="32"
Android="27" />
</Label.FontSize>
</Label>
</StackLayout>
<!--SubTitle Ends-->
<!--Description Starts-->
<StackLayout Grid.Column="1" Grid.Row="2"
BackgroundColor="Blue">
<Label Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco."
BackgroundColor="Transparent"
TextColor="White"
FontAttributes="Bold">
<Label.FontSize>
<OnPlatform x:TypeArguments="x:Double"
iOS="15"
Android="13" />
</Label.FontSize>
</Label>
</StackLayout>
<!--Description Ends-->
<StackLayout Grid.Column="1" Grid.Row="3">
<Button Text="LOGIN"
TextColor="#009de0"
BackgroundColor="White"
WidthRequest="120"
HorizontalOptions="Center"
Clicked="Handle_Clicked" />
</StackLayout>
</Grid>
</RelativeLayout>
</ContentView.Content>
I have to set a background image to the app and in this reason, I have begun with <RelativeLayout> tag. Hence, <RelativeLayout> or <AbsoluteLayout> tags mess up the structure of grids, I think or?