代碼運行后為什么拖拽屏幕看不到效果
<!DOCTYPE?html>
<html?lang="en">
<head>
<meta?charset="UTF-8">
<meta?name="viewport"?content="width=device-width,initial-scale=1.0">
<title>媒體查詢</title>
<style>
????#div0{
????????width:?100px;
????????height:?200px;
????}
????/*?@media?screen?屏幕尺寸*/
@media?screen?and?(min-device-width:200px)?and(max-device-width:300px)?{
???????#div0{
???????????background-color:?yellow;
???????}
????}
@media?screen?and(min-device-width:301px)?and(max-device-width:500px){
????????#div0{
????????????background-color:?blue;
????????}
????}
</style>
</head>
<body>
<div?id="div0"></div>
</body>
</html>
2020-10-30
min-device-width是設備整個顯示區域的寬度，例如，真實的設備屏幕寬度。
max-width是目標顯示區域的寬度，例如，瀏覽器寬度。
視頻案例使用的是min-device-width，也就說他是根據你的屏幕寬度設置的。你需要F12調出手機模擬窗口，這樣就可以根據模擬的手機屏幕寬度而不是你的電腦屏幕寬度來設置。
如何你想在電腦上拖動瀏覽器來更改適配樣式則可以將min-device-width更換為max-width