为了账号安全,请及时绑定邮箱和手机立即绑定

代码运行后为什么拖拽屏幕看不到效果

<!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>



正在回答

1 回答

min-device-width是设备整个显示区域的宽度,例如,真实的设备屏幕宽度。

max-width是目标显示区域的宽度,例如,浏览器宽度。

视频案例使用的是min-device-width,也就说他是根据你的屏幕宽度设置的。你需要F12调出手机模拟窗口,这样就可以根据模拟的手机屏幕宽度而不是你的电脑屏幕宽度来设置。

如何你想在电脑上拖动浏览器来更改适配样式则可以将min-device-width更换为max-width

0 回复 有任何疑惑可以回复我~
#1

小钊哥 提问者

我找到问题了是我的代码media screen and(min-device-width:301px) and(max-device-width:500px)有问题 把and(min-device-width:301px)中的and跟(min-device-width:301px)留个空格后就能正常运行了 还是写代码不规范。。。。。。。
2020-10-31 回复 有任何疑惑可以回复我~
#2

迷路mil 回复 小钊哥 提问者

可以使用代码格式化工具来辅助解决这种问题,例如可以使用vscode编辑器中的prettier插件。一般编译器都会有这种插件或功能可以自行百度一下你使用编译器的代码格式化方案
2020-10-31 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

代码运行后为什么拖拽屏幕看不到效果

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信