css3 回应式新闻媒体查寻的示例编码

日期:2021-01-20 类型:科技新闻 

关键词:小程序怎么做,凡科网小程序,微信小程序界面,线上报名小程序,微信小程序页面制作

让大家看1下应用新闻媒体查寻的更多示例。新闻媒体查寻是1种时兴的技术性,用于向不一样的机器设备出示订制的款式表。以便演试1个简易的示例,大家能够变更不一样机器设备的情况色调

/* 将body的情况色调设定为tan */
body {
  background-color: tan;
}
/* 在992px或更低的显示屏上,将情况色调设定为蓝色 */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}
/* 在600px或更低的显示屏上,将情况色调设定为橄榄色 */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}

列的新闻媒体查寻

新闻媒体查寻的普遍主要用途是建立灵便的合理布局。在此示例中,大家建立的合理布局在4个,两个和全宽列之间转变,实际取决于不一样的显示屏尺寸:

.column {
  float: left;
  width: 25%;
}
/*在992px宽或更小的显示屏上,从4列到多列 */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}
/* 在宽度为600px或更小的显示屏上,使列层叠在相互之上而并不是相互邻近*/
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

应用新闻媒体查寻变更字体样式尺寸

您还能够应用新闻媒体查寻来变更不一样显示屏尺寸的元素的字体样式尺寸:

/* 假如显示屏尺寸超出600px宽,请将字体样式尺寸设定为80px */
@media screen and (min-width: 600px) {
  div.example {
    font-size: 80px;
  }
}
/* 假如显示屏尺寸为600px或更小,请将字体样式尺寸设定为30px */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

应用额外值:在下面的示例中,大家应用逗号向大家现有的新闻媒体查寻加上别的新闻媒体查寻(这将像OR运算符1样):比如当宽度介于600px和900px之间或高于1100px时 - 更改外型

@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

总结

以上所述是网编给大伙儿详细介绍的css3 回应式新闻媒体查寻的示例编码,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!
假如你感觉本文对你有协助,欢迎转载,烦请注明出处,感谢!

上一篇:CSS实例教程:了解承继特性及运用 返回下一篇:没有了