html 缩放 最小尺寸,如何根据屏幕大小缩放HTML中元素的大小？

我想在屏幕缩小或缩小时缩放标题中元素的大小.如何才能做到这一点？这是我的

HTML：

myWebpage

Hello!

Welcome
Make Yourself at Home

这是我的css：

* {

margin:0;

padding:0;

}

body,html {

height: 100%;

background: honeydew;

}

/* Header*/

header {

height: 100vh;

background-image: url(https://s3-us-west-2.amazonaws.com/webassets/apple.jpg);

background-size: cover;

background-position: center;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

text-shadow: 0 1px 3px rgba(0,0,0,.8);

text-align: center;

}

h1 {

color: honeydew;

font-size: 50px;

font-family: "Helvetica Neue";

}

p {

color: honeydew;

font-size: 30px;

font-family: "Helvetica Neue-Thin", sans-serif;

}

这是我的全屏页面：

&安培;这里缩小到最小的窗口：

正如你所看到的,我需要文本按照我的背景进行缩放..我该如何做到这一点？