请问老师为什么没有变化?

请问老师为什么没有变化?

<html>
<head>
    <meta charset="UTF-8">
<title>Document</title>
<style>
p{
color:red;
text-align:center;
}
/*此处写代码*/
@media screen and (min-width: 1100px){
p{
color: red;
}
}
@media screen and (max-width: 1100px) and (min-width: 960px){
p{
color: orange;
}
}
@media screen and (max-width: 960px) and (min-width: 800px){
p{
color: yellow;
}
}
@media screen and (max-width: 800px) and (min-width: 750px){
p{
color: green;
}
}
@media screen and (max-width: 750px) and (min-width: 600px){
p{
color: cyan;
}
}
@media screen and (max-width: 600px) and (min-width: 450px){
p{
color: blue;
}
}
@media screen and (max-width: 450px){
p{
color: violet;
}
}

</style>
</head>
<body>
<p>
我的颜色会随着屏幕大小的变化而变化。
</p>
</body>
</html>


正在回答

登陆购买课程后可参与讨论,去登陆

2回答

亲,经测试是有效果的呢,你得改变浏览器的窗口大小才可以哦,改变浏览器窗口大小变化方法如下:

http://img1.sycdn.imooc.com//climg/5ae412f30001b91f15920877.jpg

希望可以帮到你~

  • DaDaDaLa 提问者 #1
    恩,调节浏览器窗口改变了,但是调到手机模式,改换不同大小的手机为什么颜色没有改变呢?
    2018-04-28 21:04:18
一路电光带火花 2018-04-30 11:11:15

换到手机模式,就成移动端了,设备比应该就发生改变了。

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
响应式开发与常用框架 2018
  • 参与学习           人
  • 提交作业       2198    份
  • 解答问题       5012    个

如果你有web端基础,既想进阶,又想进军移动端开发,那就来吧,我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等,让你在前端道路上畅通无阻!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师