JavaScript は適応ウィンドウサイズ Web page_html/css_WEB-ITnose を実装します

ログイン body{ text-align: left; background-color: F6F6F6; background-attachment: fix; } #imgcenter{ 位置:相対; 高さ:自動; 幅:50%; 左:20%; 上:250px; } #center{ 位置:相対; 高さ: 自動; 幅:50%; 左:20%; 上:220px; } #アカウント{ 位置:相対; 高さ:自動; 左:60%; 上:-110px; パディング:2%; 幅:50%; } #pwd{ 位置:相対; 高さ:自動; 左:60%; 上:-100px; パディング:2%; 幅: 50%; } #login{ 位置:相対; 高さ:自動; 左:60%; 上:-95px; パディング:1%; 幅: 25%; } #logo{ パディング: 3%; 幅: 50%; 高さ: 自動; } #div_forgetpwd{ 位置:相対; 高さ: 30%; 左: 90%; 上:-115px; 幅: 25%; font-size: 1pt; white-space:nowrap; } #div_forgetpwd a{ text-decoration: none; マージン: auto; } #div_forgetpwd a:hover{ テキスト装飾: 下線; マージン: auto; } .Clew{ position:relative; height: 15px; left:-10%; トップ:-80%; パディング:2% 50%; 空白:nowrap; 色: #FFFFD5; フォントの太さ: 太字; フォントファミリー: 世紀ゴシック、アリアル; 背景: #FCBE47; ボーダートップ: 2px 実線 #db6e3c; border-bottom: 2px ソリッド #db6e3c; } //エラー クリュー var userFlag=0; var pwdFlag=0; $().ready(function() { $("form :input").blur (function() { var $parent = $(this).parent(); $parent.find(".clew").remove(); if($(this).is(".username")) { if(this.value=="" || this.value.length var errorMsg = "アカウントを入力してください。"; $parent.append(" "+errorMsg+" "); }else userFlag=1; } if($(this).is(".password") ) { if(this.value=="" || this.value.length var errorMsg = "パスワードを入力してください。"; $parent.append(" "+errorMsg+" "); }else pwdFlag=1; } }).keyup(function() { $(this).triggerHandler("blur"); }).focus( function() { $(this).triggerHandler("blur"); }); }); //提交检验 function validate_form(thisform){ with (thisform){ if (userFlag==0||pwdFlag==0){ ユーザー名.focus(); return false; } } } 当前窗口高度： 当前窗口宽度： --> class="username"> 注册帐号 忘记密码 //変更元素 CSS プロパティ function set(){ var setImgDiv = document.getElementById("imgcenter"); setImgDiv.style.top = "150px"; setImgDiv.style.left = "36%"; var setTextDiv = document.getElementById("center"); setTextDiv.style.top = "280px"; setTextDiv.style.left = "8%"; var setLogo=document.getElementById("logo"); setLogo.style.height="100px"; setLogo.style.width="240px"; var setAccount=document.getElementById("account"); setAccount.style.height="15px"; setAccount.style.width="240px"; var setPwd=document.getElementById("pwd"); setPwd.style.height="15px"; setPwd.style.width="240px"; var setLogin=document.getElementById("login"); setLogin.style.height="25px"; setLogin.style.width="100px"; var setForgetPwd=document.getElementById("div_forgetpwd"); setForgetPwd.style.width="100px"; setForgetPwd.style.left="100%"; } function reSet(){ var reSetImgDiv = document.getElementById("imgcenter"); reSetImgDiv.style.top = "250px"; reSetImgDiv.style.left = "20%"; var reSetTextDiv = document.getElementById("center"); reSetTextDiv.style.top = "220px"; reSetTextDiv.style.left = "20%"; var reSetLogo=document.getElementById("logo"); reSetLogo.style.height="auto"; reSetLogo.style.width="50%"; var reSetAccount=document.getElementById("account"); reSetAccount.style.height="auto"; reSetAccount.style.width="50%"; var reSetPwd=document.getElementById("pwd"); reSetPwd.style.height="auto" ; reSetPwd.style.width="50%"; var reSetLogin=document.getElementById("login"); reSetLogin.style.height="auto "; reSetLogin.style.width="25%"; var reSetForgetPwd=document.getElementById("div_forgetpwd"); reSetForgetPwd.style.width=" 100px"; reSetForgetPwd.style.left="90%"; } function setSizeMid(){ var setSizeMidImgDiv = document.getElementById ("imgcenter"); setSizeMidImgDiv.style.top = "150px"; setSizeMidImgDiv.style.left = "22%"; var setSizeMidTextDiv = ドキュメント。 getElementById("center"); setSizeMidTextDiv.style.top = "280px"; setSizeMidTextDiv.style.left = "-35px"; var setSizeMidLogo=document .getElementById("logo"); setSizeMidLogo.style.height="100px"; setSizeMidLogo.style.width="240px"; var setSizeMidAccount=document .getElementById("アカウント"); setSizeMidAccount.style.height="15px"; setSizeMidAccount.style.width="240px"; var setSizeMidPwd=document .getElementById("pwd"); setSizeMidPwd.style.height="15px"; setSizeMidPwd.style.width="240px"; var setSizeMidLogin=document .getElementById("login"); setSizeMidLogin.style.height="25px"; setSizeMidLogin.style.width="80px"; var setSizeMidForgetPwd=document .getElementById("div_forgetpwd"); setSizeMidForgetPwd.style.width="80px"; setSizeMidForgetPwd.style.left="110%"; } function setSizeMini(){ var setSizeMiniImgDiv = document.getElementById("imgcenter"); setSizeMiniImgDiv.style.top = "150px"; setSizeMiniImgDiv.style.left = "6%"; var setSizeMiniTextDiv = document.getElementById("center"); setSizeMiniTextDiv.style.top = "280px"; setSizeMiniTextDiv.style.left = "-60px"; var setSizeMiniLogo=document.getElementById("logo"); setSizeMiniLogo.style.height="100px"; setSizeMiniLogo.style.width="240px"; var setSizeMiniAccount=document.getElementById("account"); setSizeMiniAccount.style.height="15px"; setSizeMiniAccount.style.width="240px"; var setSizeMiniPwd=document.getElementById("pwd"); setSizeMiniPwd.style.height="15px"; setSizeMiniPwd.style.width="240px"; var setSizeMiniLogin=document.getElementById("login"); setSizeMiniLogin.style.height="25px"; setSizeMiniLogin.style.width="80px"; var setSizeMiniForgetPwd=document.getElementById("div_forgetpwd"); setSizeMiniForgetPwd.style.width="80px"; setSizeMiniForgetPwd.style.left="125%"; } //获取当前窗口尺寸 var winWidth = 0; var winHeight = 0; function findDimensions() //関数数：获取尺寸 { //获取窗口宽度 if (window.innerWidth ) winWidth = window.innerWidth; else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; //获取窗口高さ if (window.innerHeight) winHeight = window.innerHeight; else if ((document.body) && (document.body.clientHeight)) winHeight = document.body.clientHeight; //通过深入Document内部对body进行检测，获取窗口大 if ( document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) { winHeight = document.documentElement.clientHeight; winWidth = document.documentElement.clientWidth ; } //結果出到两个文本框 if(winWidth setSizeMini(); else if(420 setSizeMid(); else if(595 set(); else reSet(); } findDimensions(); / /调用関数数，获取数值 window.onresize=findDimensions;

JavaScript は適応ウィンドウ サイズ Web page_html/css_WEB-ITnose を実装します

関連記事

JavaScript は適応ウィンドウサイズ Web page_html/css_WEB-ITnose を実装します