媒体查询无法正常运行（继承错误的值）

Question

第一次在这里的用户，如果我在这里列出太多代码，请道歉。还在学习如何成为一名合适的会员！

关注的主要问题是字体大小增量。它似乎是在注册指定的iPad字体值，但是一旦浏览器达到iPhone尺寸（最大宽度：568px），它就会继承一些正确的值，但也会继承之前增量的其他值。我主要是指这个，

#caption, #text, #bio, p.name,  {
        font-size: 13px; 
        line-height: 20px; 
      } 

当我检查元素时，没有列出正确的字体大小和行高，并在其他地方继承。

我已添加到html标头 meta name =“viewport”content =“width = device-width，height = device-height，initial-scale = 1.0，maximum-scale = 1.0，用户可扩展= 0，target-densityDpi = device-dpi“/ ，所以我不确定我还缺少什么。

非常感谢任何帮助或见解！非常感谢。

    /*DEFAULT VALUES*/


	#caption, #text, #bio, #jas, #dean, p.biotext {padding-top: 30px;
			font-size: 19px; 
			line-height: 25px; 
			letter-spacing: 1px; 
			}

p.biotext {font-size:15px; 
			line-height: 20px; 
			letter-spacing: 1px;}

    /*BROWSER QUERIES*/


    @media only screen and (min-width : 1025px) and (max-width: 1205px) and (orientation: landscape) {   
          #caption, #text, #bio, #jas, #dean, p.biotext {padding-top: 20px;}
          #caption, #text, #bio, p.name {
          	font-size: 16px; 
          	line-height: 23px; 
          	letter-spacing: 1px;
          }
          #bio {width: 640px;}
          p.biotext {
          	font-size:13px; 
          	line-height: 17px; 
          	letter-spacing:1px;
          }
          .hplate {width: 70%;}
          .vplate {width: 35%;}
          #jas, #dean {width: 45%;}
          #dean {float: left; 
          	padding-left:55px
          }
        }

    @media only screen and (min-width : 569px) and (max-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {   
          #caption, #text, #bio, #jas, #dean, p.biotext {padding-top: 20px;}
          #caption, #text, #bio, p.name {font-size: 15px; 
          	line-height: 20px; 
          	letter-spacing: 1px;
          }
          #bio {width: 636px;}
          p.biotext {
          	font-size:12px; 
          	line-height: 15px; 
          	letter-spacing:1px;
          }
          .hplate {width: 55%;}
          .vplate {width: 33%;}
          #jas, #dean {width: 45%;}
          #dean {float: left; 
          	padding-left:55px
          }
        }

    @media only screen and (min-width : 569px) and (max-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {    
          #caption, #text, #bio, #jas, #dean, p.biotext {padding-top: 18px;}
          #caption, #text, #bio, p.name,  {
          	font-size: 16px; 
          	line-height: 20px; 
          }
          #bio {width: 82%;}
          #jas, #dean {width: 99%; 
          	float: center; 
          	padding-left:0px; 
          }
          p.biotext {
          	font-size:13px; 
          	line-height: 18px;
          }
          .hplate {width: 90%;}
          .vplate {width: 75%;}
        }

    @media only screen and (max-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {   
          #caption, #text, #bio, #jas, #dean, p.biotext {padding-top: 20px;}
          #caption, #text, #bio, p.name {
          	font-size: 15px; 
          	line-height: 20px; 
          	letter-spacing: 1px;
          }
          #bio {width: 636px;}
          p.biotext {
          	font-size:12px; 
          	line-height: 15px; 
          	letter-spacing:1px;
          }
          .hplate {width: 55%;}
          .vplate {width: 33%;}
          #jas, #dean {width: 45%;}
          #dean {
          	float: left; 
          	padding-left:55px
          }
        }

    @media only screen and (min-width: 569px) and (max-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {   
          #caption, #text, #bio, #jas, #dean, p.biotext {padding-top: 18px;}
          #caption, #text, #bio, p.name,  {
          	font-size: 16px; 
          	line-height: 20px; 
          }
          #bio {width: 82%;}
          #jas, #dean {
          	width: 99%; 
          	float: center; 
          	padding-left:0px; 
          }
          p.biotext {font-size:13px; line-height: 18px;}
          .hplate {width: 90%;}
          .vplate {width: 75%;}
        }

    @media only screen and (min-width: 320px) and (max-width: 568px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) { 
          #caption, #text, #bio, #jas, #dean, p.biotext {padding-top: 18px;}
          #caption, #text, #bio, p.name,  {
          	font-size: 13px; 
          	line-height: 20px; 
          }
          #bio {width: 85%;}
          #jas, #dean {
          	width: 99%; 
          	float: center; 
          	padding-left:0px; 
          }
          p.biotext {
          	font-size:13px; 
          	line-height: 18px;
          }
          .hplate {width: 55%;}
          .vplate {width: 33%;}
        }

    @media only screen and (min-width: 320px) and (max-width: 568px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) { 
          #caption, #text, #bio, #jas, #dean, p.biotext {padding-top: 18px;}
          #caption, #text, #bio, p.name,  {
          	font-size: 13px; 
          	line-height: 20px; 
          }
          #bio {width: 85%}
          #jas, #dean {
          	width: 99%; 
          	float: center; 
          	padding-left:0px; 
          }
          p.biotext {font-size:13px; line-height: 18px;}
          .hplate {width: 90%;}
          .vplate {width: 75%;}
        }