px指定をしているのに文字サイズが変化する(Flex内の要素)

CSSでFlexを使用した個所の文字が、Chromeのディベロッパーツールで画面サイズを(スマホサイズからパッドサイズ等に)変化させたときpx指定をしているのにも関わらず文字の大きさが変わる。Flexを使用していない箇所は文字サイズは変わらない。

HTML
1<!DOCTYPE html>
2  <html lng="ja">
3  <head>
4    <meta charset="utf-8">
5    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
6    <title>はにわマントレース</title>
7    <link rel="stylesheet" href="css/styles.css"> 
8  </head>
9  <body>
10    <header>
11      <p class="ue"></p>
12      <img src="siteTitle.png" class="dental">
13      <p class="tiiki">"地域に根付いた歯科医院"デンタル クリニック</p>
14      <div class="tel">
15        <img src="#">
16        <p>03-0000-0000</p>
17      </div>
18      <p class="reserve">予約受付時間 10:00~19:30 日祝 休診</p>
19    <div class="nav">
20      <ul>
21        <li>トップページ</br>
22        <span>HOME</span></li>
23        <li>医院紹介</br>
24        <span>CLINIC</span></li>
25        <li>診療案内</br>
26        <span>SERVICE</span></li>
27        <li>院長・スタッフ紹介</br>
28        <span>STAFF</span></li>
29        <li>アクセス</br>
30        <span>ACCESS</span></li>
31      </ul>
32    </div>
33    </header>
34  <img src="in01.jpg" class="in01">
35  </div>
36
37  <section class="new">
38    <p>新着情報</p>
39    <div class="info">
40      <p>2012年08月01日</p>
41      <p>
42        【診療時間変更のお知らせ】長期休診の前日8月1</br>
43        1日は、通常より1時間長く診療をすることにしま</br>
44        した。ご予約をお待ちしております。
45      </p>
46    </div>
47
48    <div class="info">
49      <p>2012年07月24日</p>
50      <p>
51        【8月休診のお知らせ】8月12日～16日の間は</br>
52        休診とさせていただきます。何卒よろしくお願い</br>
53        いたします。
54      </p>
55    </div>
56
57    <div class="info">
58      <p>2012年07月02日</p>
59      <p>
60        【こどもデンタル教室のご案内】毎月第二土曜日</br>
61        に行っているこどもデンタル教室では、参加して</br>
62        くださるお子様を募集しております。
63      </p>
64    </div>
65
66    <div class="info">
67      <p>2012年06月20日</p>
68      <p>
69        【7月休診日のお知らせ】7月は土日祝日以外の休</br>
70        診日はありません。ご来院お待ちしております。
71      </p>
72    </div>
73    <div class="info">
74      <p>2012年06月01日</p>
75      <p>ホームページをリニューアルしました。</p>
76    </div>
77  </section>
78  
79  <section class="menu">
80    <div class="common">
81      <p>一般歯科</p>
82      <ul>
83        <li><span>虫歯治療</span></li>
84        <li><span>歯周病治療</span></li>
85        <li><span>入れ歯</span></li>
86        <li><span>予防歯科</span></li>
87      </ul>
88    </div>
89
90    <div class="common">
91      <p>審美歯科</p>
92      <ul>
93        <li><span>ホワイトニング</span></li>
94        <li><span>オールセラミック</span></li>
95        <li><span>セラミックインレー</span></li>
96        <li><span>PMTC</span></li>
97      </ul>
98    </div>
99  </section>
100
101
102  <section>
103    <ul class="sitemap">
104      <li><span>トップページ</span></li>
105      <li><span>医院紹介</span></li>
106      <li><span>診療案内</span></li>
107      <li><span>院長・スタッフ紹介</span></li>
108      <li><span>アクセス</span></li>
109    </ul>
110  </section>
111
112  <div class="addres">
113    <p>デンタル クリニック</p>
114    <p>東京都新宿区市谷左内町２１-１３</p>
115    <p>TEL:03-0000-0000</p>
116  </div>
117  
118  <footer>
119    Copyright 2012 Dental Clinic CO.,LTD All Rights Reserved.
120  </footer>
121
122```css

body {
margin:0;
background-color: seashell;
--mycolor: rgb(102, 209, 209);
}

header {
text-align: center;
}
/* 一番上の線 */
.ue {
height: 24px;
background-color: var(--mycolor);
margin:0;
padding: 0;
}

.dental {
width:650px;
}

header > p {
font-size: 26px;
}

.tiiki {
margin: 0;
font-size: 10px;
}
/* 電話番号 */
.tel {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}

.tel img {
width: 48px;
height: 48px;
}

.tel p {
font-size: 70px;
margin: 0;
}

/* 予約のとこ */
.reserve {
border: 0.1px solid var(--mycolor);
margin: 0;
width: 500px;
margin: 0 auto;
padding: 20px 40px;
}

.nav {
/* background-color: tomato; */
width: 100%;
margin-top: 30px;
}

.nav ul {
display: flex;
flex-flow: row wrap;
align-items: flex-start;
width: 100%;
padding: 0;
}

.nav ul li {
width: 50%;
background-color: var(--mycolor);
list-style: none;
font-size: 36px;
font-weight: bold;
padding: 45px 0px;
border-radius: 4%;
color: white;
line-height: 40px;
}

.nav span {
font-size: 24px;
font-weight: bold;
}

.in01 {
width: calc(100% - 60px);
margin: 35px 30px 0 30px;
}

/* 新着情報 */

.new {
width: calc(100%-60px);
margin: 0px 30px;
padding-top: 80px;
padding-bottom: 100px;
background-color: white;
}

.new > p {
margin: 0 auto;
width: 88%;
font-size: 15px;
font-weight: bold;
border-bottom: var(--mycolor) solid 8px;
padding-bottom: 70px;
}

.info {
/* background-color: rosybrown; */
border-bottom: royalblue 1px solid;
border-bottom-style: dotted;
width: 88%;
margin: auto;
}

.info > p:nth-child(odd) {
padding-bottom: 60px;
padding-top: 40px;
font-weight: bold;
width: 100%;
font-size: 12px;
margin: 0 auto;
}

.info > p:nth-child(even) {
margin: auto;
padding-bottom: 30px;
width: 95%;
font-size: 13px;
}

/* メニュー */
.menu {
width: calc(100% - 60px);
margin: 100px auto;
}

.menu p {
background-color: var(--mycolor);
color: white;
padding: 20px 0 20px 40px;
margin: 0;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
font-weight: bold;
}

.common {
background-color: white;
border:var(--mycolor) 1px solid;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
margin-bottom: 60px;
padding-bottom: 50px;
}

.common ul {
width: 93%;
padding-left: 0;
margin: 0 auto;
}

.common li {
padding: 25px 0;
font-size: 14px;
border-bottom: solid var(--mycolor) 1px;
list-style: none;
font-weight: bold;
color: rgb(82, 107, 107);
}

.common span {
padding-left: 20px;
}

.common li::before {
content: "\025c6";
font-size: 14px;
color: var(--mycolor);
}

/* サイトマップ /
.sitemap {
margin: auto;
width: calc(100% - 60px);
background-color: rosybrown;
display: flex;
flex-wrap: wrap;
/ list-style: none; */
text-align: center;
justify-content: space-between;
padding-left: 0;
padding-bottom: 20px;
font-size: 24px;