ホームページ > 記事 > ウェブフロントエンド > js は画面適応部分コードを実装します。共有_javascript スキル
js は画面適応部分コードを実装します。共有_javascript スキル
- WBOYオリジナル
- 2016-05-16 16:16:581187ブラウズ
何人かの友人が、部分的な画面適応を実装するには js コードが必要だというメッセージを残しました。私はそれをここで簡単にコンパイルし、全員に公開しました。
コードをコピーします コードは次のとおりです:
<頭>
<スタイル>
*{
マージン:0;
パディング:0;
リストスタイル:なし;
}
div{
マージン:0 自動;
高さ:10000px;
min-width:880px;
max-width:1100px;
背景:#060;
クリア:両方;
}
ウル{}
リ{
float:left;
表示:インライン;
幅:198px;
高さ:198px;
ボーダー:1px ソリッド #ccc;
マージン:10px;
}
<スクリプト>
var winWidth;
window.onload=function(){
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
if(winWidth document.getElementById("main").style.width="880px";
else if(winWidth>=1100)
document.getElementById("main").style.width="1100px";
}
window.onresize=function(){
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
if(winWidth document.getElementById("main").style.width="880px";
else if(winWidth>=1100)
document.getElementById("main").style.width="1100px";
}