.header-container {
            width: 100%;
            /*% em rem vw/vh*/
            /*1rem = html font-size*/
            /*1rem=25px*/
            /*750px 1rem=750px*/
            /*height: 100px / 750px rem*/
            /*height: 0.13333333333333333333333333333333rem;*/

            /*375px 1rem=375px*/
            /*height: 50 / 375 = 0.13333333333333333333333333333333rem;*/
            /*height: 2rem;*/

            /*750px 1rem=750 / 18.75 = 40px*/
            /*height: 100 / 40 = 2.5rem;*/
            /*height: 2.5rem;*/
            height: 2.5rem;
            background-color: rgba(222, 24, 27, 0.9);
        }

移动端屏幕适配 一般使用这些单位： % em rem vw vh
 常用的是rem

也就是说，当我们的设计稿是  750px 是   1rem = 750px
当显示屏是 375px   1rem=375px;
height:100px除2;   1rem=750除2

100/750 = 0.133333333333333333rem;

常用算法如下：
视口宽除以18.75系数。

怎么样来求视口宽呢？
document.getElement.getBoundingClientRect();
document.getElement.getBoundingClientRect().width;
window.innerWidth;