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

我认为你应该学习如何做响应式网页设计，css3媒体查询很有用

于 2012-07-19T11:40:33.947 回答