1

このコードをまとめました...

<title>Style Change on Resize</title>
<script type="text/javascript">

function resize() {

if (screen.width <= 640)

{document.write("<link href='style1.css' rel='stylesheet' type='text/css'>")}

else

{document.write("<link href='style2.css' rel='stylesheet' type='text/css'>")}
}

</script>
</head>

<body onResize="resize();">

<div id="styleMe">This is a test of a resize javascirpt that will change its CSS sheet    
when the browser window is resized, or when being viewed on a mobile device, such as     
iOS, etc. Hello.</div>

</body>

</html>

そして、CSSファイルにはこれが含まれています（背景色が異なるため、CSSシートが変更されているかどうかを確認できます）...

#styleMe {
background-color:#309;
height:200px;
width:100%;
}

問題は、ページを実行すると単語にスタイルが設定されていないことです。次に、ページのサイズを変更すると、ページが真っ暗になります。何かアイデアはありますか？

ありがとう

4

2 に答える 2

8

これは、 CSS のみを使用してメディアクエリで行うことができます。

#styleMe {
  background-color:#309;
  height:200px;
  width:100%;
}

@media only screen and (max-width: 640px) {

  #styleMe {
    background-color: magenta;
  }

}
于 2012-07-19T11:40:43.400 に答える
0

レスポンシブ Web デザインのやり方を学ぶべきだと思います。css3 メディア クエリが便利です

于 2012-07-19T11:40:33.947 に答える