同じ指定なのにブレイクポイントで大きさが変わる

ブレイクポイントをlandscapeとportraitにしたレスポンシブデザインのサイトを作っています。
テキストがあまり入っていないサイトでほとんどのサイズ指定にvwを用いているのですが、ハンバーガーメニューのボタンにremを使用しています。
縦長と横長で同じサイズ指定なのにremで指定している部分も大きさが変わってしまいます。
remはサイズ固定だと思っていたのですが認識違いでしょうか。
下のspanがハンバーガーメニューの三本線になる部分です。

css
1.button{
2    position: absolute;
3    right: 6vw;
4    bottom:2.5vw;
5    width: 15vw;
6    min-width: 5rem;
7    height: 15vw;
8    min-height: 5rem;
9    cursor: pointer;
10    z-index: 300;
11    transition: all 1s ease;
12}
13.button div{
14    width: 4rem;
15    height: 3.2rem;
16    position: absolute;
17    top: 0;
18    right: 0;
19    bottom: 0;
20    left: 0;
21    margin: auto;
22}
23.button span{
24    position: absolute;
25    display: block;
26    width: 4rem;
27    height: 0.4rem;
28    background-color: #eee;
29    transition: all 1s ease;
30}