代碼運(yùn)行后為什么拖拽屏幕看不到效果
<!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是設(shè)備整個顯示區(qū)域的寬度，例如，真實的設(shè)備屏幕寬度。
max-width是目標(biāo)顯示區(qū)域的寬度，例如，瀏覽器寬度。
視頻案例使用的是min-device-width，也就說他是根據(jù)你的屏幕寬度設(shè)置的。你需要F12調(diào)出手機(jī)模擬窗口，這樣就可以根據(jù)模擬的手機(jī)屏幕寬度而不是你的電腦屏幕寬度來設(shè)置。
如何你想在電腦上拖動瀏覽器來更改適配樣式則可以將min-device-width更換為max-width