<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Account Bindings </title>
<meta name= "viewport" content= "Width=device-width, minimum-scale=1.0, maximum-scale=1.0, User-scalable=no" >
<meta name= "format-detection" content= "Telephone=no, Address=no, Email=no" >
<meta name= "apple-mobile-web-app-capable" content= "yes" >
<meta name= "Apple-mobile-web-app-status-bar-style" content= "Black" >
<script>
var iwidth=document.documentelement.clientwidth;
Iwidth = iwidth>640?640:iwidth;
document.getElementsByTagName ("HTML") [0].style.fontsize=iwidth/32+ "px";
</script>
<script>
/* Just started this setting but in some Android browsers do not get the screen width and change the font size in time
Window.onorientationchange = function () {
var iwidth=document.documentelement.clientwidth;
Iwidth = iwidth>640?640:iwidth;
document.getElementsByTagName ("HTML") [0].style.fontsize=iwidth/32+ "px";
}*/
function FontSize () {
var iwidth=document.documentelement.clientwidth;
Iwidth = iwidth>640?640:iwidth;
document.getElementsByTagName ("HTML") [0].style.fontsize=iwidth/32+ "px";
}
function hengshuping () {
if (window.orientation==180| | window.orientation==0) {fontSize ();};/ /Cell Phone Vertical screen
if (window.orientation==90| | window.orientation==-90) {fontSize ();};/ /Mobile Phone Horizontal screen
}
Window.addeventlistener ("Onorientationchange" in Window?) "Orientationchange": "Resize", hengshuping, false);//The method is also executed when the cell phone changes state
</script>
<link rel= "stylesheet" type= "Text/css" href= "Css/reset.css" >
<link rel= "stylesheet" type= "Text/css" href= "Css/bangding.css" >
<style>
header{width:97%;p adding:1em 0 1em 3; border-bottom:2px solid #88c165;}
Header img{Height:auto; width:67%; display:block;}
. bd_wrap{width:94%; height:auto; padding:2rem 3% 1.7rem; background: #f4f4f4; overflow:hidden;}
. bd_top{width:94.7%; height:auto; Padding:0.9rem 1.6% 0.5rem 3.7%; background: #7fa5dd;}
. num{font-size:1.5rem; color: #FFF; border-left:0.2rem solid #FFF; width:95%; padding-left:0.5rem; height:1.5rem; Line-height:1.5rem;}
num_con{font-size:1rem; padding-left:0.5rem; color: #FFF; margin-top:1rem;}
. content{width:94.7%; height:auto; Padding:1rem 1.6% 26rem 3.7%; Background:url (.. /img/last_li2.png) no-repeat left bottom #f7fcff; Overflow:hidden; Position:relative;}
. nation{width:12%; height:3rem; font-size:1.5rem; line-height:3rem;}
. img{width:2.8%; height:3rem; line-height:3rem; margin-left:0.5%; margin-right:2.5%;}
. img img{width:100%; height:auto;-webkit-transform-origin:center Center;-webkit-transition:0.5s;}
. shuru {width:66%; height:1.2rem; border:0.1rem solid #7fa5dd; Border-radius:0.2rem 0 0 0.2rem; Padding:0.8rem 0 0.8rem 0 .7rem; Line-height:1.2rem; Font-size:1rem;}
. sousou{width:11%; height:2.8rem; Background:url (.. /img/sou.png) No-repeat left top #7fa5dd; Background-size:contain;border:0.1rem solid #7fa5dd; border-radius:0 0.2rem 0.2rem 0;}
. level{width:94%; height:34.85rem; Background:url (.. /img/level.png) No-repeat; Background-size:contain; Position:absolute; Margin-top:3rem; Display:none;}
. role{width:100%; height:1.6rem; margin:2.2rem 0 0 3.2%;}
. role1{width:5.6%; height:1.6rem; Background:url (.. /img/role1.png) No-repeat; Background-size:contain; border-radius:50%;}
. teacher{Font-size:1.5rem; width:15%; height:1.6rem; line-height:1.6rem; margin:0 4% 0 2%;}
. role2{width:5.6%; height:1.6rem; Background:url (.. /img/role2.png) No-repeat; Background-size:contain; border-radius:50%;}
Student{font-size:1.5rem; width:20%; height:1.6rem; line-height:1.6rem;}
. form{Width:100%;margin:2.2rem 0 0 0; text-align:center;}
. Form Input:nth-of-type (1) {width:92%; height:1.2rem; border:0.1rem solid #7fa5dd; border-radius:0.2rem; padding:0. 8rem 0 0.8rem 0.7rem; Line-height:1.2rem; Font-size:1rem; Margin-bottom:0.5rem;}
. Form Input:nth-of-type (2) {width:92%; height:1.2rem; border:0.1rem solid #7fa5dd; border-radius:0.2rem; padding:0. 8rem 0 0.8rem 0.7rem; Line-height:1.2rem; Font-size:1rem;}
. Form Input:nth-of-type (3) {-webkit-appearance:none;padding:0.6rem 0.8rem 0.6rem 0.8rem; background: #88c165; Font-size:1.5rem; Border-radius:0.2rem; Margin-top:2rem; color: #FFF;}
</style>
<script>
Window.onload = function () {
var oRole1 = document.getElementById ("Role1");
var oRole2 = document.getElementById ("Role2");
var onation = document.getElementById ("Nation");
var oimg = document.getElementById ("img");
var olevel = document.getElementById ("level");
var B = true;
Orole1.ontouchend = function () {
this.style.backgroundImage = "url (img/role2.png)";
oRole2.style.backgroundImage = "url (img/role1.png)";
}
Orole2.ontouchend = function () {
this.style.backgroundImage = "url (img/role2.png)";
oRole1.style.backgroundImage = "url (img/role1.png)";
}
Onation.ontouchend = function () {
if (b) {
OImg.style.WebkitTransform = "Rotate ( -180deg)";
OLevel.style.display = "block";
b = false;
}else{
OImg.style.WebkitTransform = "Rotate (0deg)";
OLevel.style.display = "None";
B = true;
}
}
}
</script>
<body>
<a href= "javascript:;" ></a>
<div class= "Bd_wrap" >
<div class= "Bd_top" >
<p class= "num" > Account bindings </p>
<p class= "Num_con" > select your school according to the province, then enter your username and password in "Happiness Stream-School subsite" </p>
</div>
<div class= "Content" >
<span class= "FL Nation" id= "Nation" > National </span>
<span class= "fl img" ></span>
<input type= "Text" class= "fl Shuru" placeholder= "Please enter school name" >
<div class= "Sousou fl" ></div>
<div class= "Level" id= "level" >
</div>
<div class= "role fl" >
<span class= "fl role1" id= "Role1" ></span>
<span class= "FL Teacher" > Teacher </span>
<span class= "fl role2" id= "Role2" ></span>
<span class= "FL Student" > Students </span>
</div>
<div class= "Form FL" >
<input type= "text" placeholder= "Username:" >
<input type= "password" placeholder= "Password:" >
<input type= "button" value= "Bind login" >
</div>
</div>
</div>
</body>
|
|
|
Mobile phone end of the screen switch, how to do to the Android browser in time to change the font size
