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

本文转载自 a3216291662 查看原文 2016-10-22 3 手机/ 自适应/ 兼容/ 问题/ 如何/ 终端

<!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>

注意！

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

rem在三星s5部分機型情況下設置的字體大小與手機實際字體大小不一致問題做一個手機端頁面時，遇到了一個奇怪的問題：字體的顯示大小，與在CSS中指定的大小不一致手機端頁面時，字體的顯示大小與在CSS中指定的大小不一致磁盤容量大小與實際使用大小不一致的問題？ iOS背景圖片大小不一致問題關於Windows下記事本無法對齊和字符大小不一致的問題 android布局中和用代碼設置字體大小不一致的問題解決安卓TextView高度和textSize大小不一致問題 nginx 開發時 off_t 大小不一致問題手機兼容【手機顯示與電腦（或指定）的顯示不一致】