Question

我把这段代码放在一起......

<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%;
}

问题是，当我运行页面时，单词没有样式，那么当我调整页面大小时，它会变黑，有什么想法吗？

由于

Answer 1

您只能使用CSS mediaqueries执行此操作。

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

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

  #styleMe {
    background-color: magenta;
  }

}

Answer 2

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

更改页面上的CSS调整大小

2 个答案: