友人は、画面の適応性を実装するためにJSにローカルコードが必要だというメッセージを残しました。ここに編集して、みんなのために投稿しました。
コードコピーは次のとおりです。
<!doctype html>
<html>
<head>
<メタcharset = "utf-8">
<title> un unt ittitled document </title>
<style>
*{
マージン:0;
パディング:0;
リストスタイル:なし;
}
div {
マージン:0 Auto;
高さ:10000px;
最小幅:880px;
最大幅:1100px;
背景:#060;
クリア:両方;
}
ul {}
li {
フロート:左;
表示:インライン;
幅:198px;
高さ:198px;
ボーダー:1pxソリッド#ccc;
マージン:10px;
}
</style>
</head>
<body>
<div id = "main">
<ul>
<li> 11111111111111 </li>
<li> 2222222222222 </li>
<li> 3333333333333 </li>
<li> 44444444444444 </li>
<li> 5555555555555 </li>
<li> 6666666666 </li>
<li> 777777777777777777 </li>
<li> 88888888888888888 </li>
<li> 99999999999 </li>
<li> 0000000000000 </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
<スクリプト>
var winwidth;
window.onload = function(){
if(window.innerwidth)
winwidth = window.innerwidth;
else if((document.body)&&(document.body.clientwidth)))
winwidth = document.body.clientwidth;
if(winwidth <= 1100)
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 <= 1100)
document.getElementById( "main")。style.width= "880px";
else if(winwidth> = 1100)
document.getElementById( "main")。style.width= "1100px";
}
</script>
</body>
</html>
試してみましょう、効果はとても良いですか?みんなが気に入ってくれることを願っています。