關於如何用rem兼容不同手機屏幕大小不一致問題以達到多終端自適應問題


<!DOCTYPE html> 
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1"/>        <!--請不要少了這句話-->

<style>


body{
margin:0rem;
font-size:0.3rem;         /*谷歌瀏覽器  input元素  不繼承 body的fontsize*/

}                                                      /*最后將所有px 改為rem*/ 
input{border-width:0.01rem;padding:0rem;font-size:inherit;} /*為了調節input元素的兼容性問題強行設置了input元素border的width和padding    ;同時谷歌瀏覽器input元素的font-size不會繼承父級  需要強行設置 inherit */     /*這些rem 都是 算好量好設計圖的每個元素必要的屬性的px值  除以100改的*/
.s_div_First{
background-color:#C8000A;
height:1.25rem;
line-height:1.25rem;    /*   后面小括號里面那句話 適用 各個元素內部 單獨設置fontsize :(用rem 垂直居中的時候  line-height大約是height的一半上下浮動0.7左右) */   /*如果font-size屬性 僅僅設置在body元素內 利用繼承性的話     考慮一些特殊元素不繼承  父級fontsize 問題    有個偷懶的辦法*{font-size:inherit;}   你也可以 單獨設置 16行我就單獨設置了input元素font-size屬性的繼承性問題*/
text-align:center;

}
.s_div_First_In1{
display:inline-block;

}
.s_div_Second{
border:0.01rem solid red;background-color:#232323;
text-align: center;
height:1.18rem;
   line-height:1.18rem;
}
.s_div_Second_In2{
display:inline-block;
}
.input_Button{background-color:#C8000A;
color:#fff;
padding:0.16rem 0.4rem;  
border:0.01rem solid red;
 

/*font-size:0.3rem;*/


 
 
}
.input_1{
height:0.7rem;
width:5.5rem;
margin-right:0.1rem;
/*font-size:0.3rem;*/
}
.input_Name{
width:2.6rem;
height:0.7rem;
margin-right:0.4rem;
/*font-size:0.3rem;*/
}
.input_Classa{
width:2.6rem;
height:0.7rem;
/*font-size:0.3rem;*/
}

</style>
</head>
<body>
<div class="s_div_First">
<div class="s_div_First_In1">
<input type="text"  class="input_1"/><input type="submit" class="input_Button" value="篩選"/>

</div>
</div>
<div class="s_div_Second">
<div class="s_div_Second_In2">
<input type="submit"  class="input_Name" value="按名稱"/><input type="submit"  class="input_Classa" value="按類別"/>

</div>
</div>
</body>
<script>   //小bug 不再調       // 84行到 90行 動態html元素 的font-size的由來
var html=document.getElementsByTagName("html")[0];
if(window.innerWidth>750){   //如果想 兼容 ie8;  window.innerWidth  換為  document.documnentElement.clientWidth 
window.innerWidth=750;   //  750的由來   假設 給的設計圖 的width為750
html.style.fontSize=window.innerWidth/7.5+"px";    /*width height margin padding left top  font-size 都需要+"px"*/
}else if(window.innerWidth<=750){
html.style.fontSize=window.innerWidth/7.5+"px";      /*注意 7.5 的由來 設計圖的width除以 100*/
}

  window.onresize=function(){        /*僅僅為滿足手機端  92行到107行 可以不要 */
  var userAgent=navigator.userAgent;
if(userAgent.indexOf("Firefox")>-1){
window.location.href=window.location.href;
}
document.location.reload();
   

var html=document.getElementsByTagName("html")[0];
if(window.innerWidth>750){
window.innerWidth=750;
html.style.fontSize=window.innerWidth/7.5+"px";
}else if(window.innerWidth<=750){
html.style.fontSize=window.innerWidth/7.5+"px";
}
}

</script>
</html>

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com