媒体查询

媒介类型
某些 CSS 属性仅仅被设计为针对某些媒介。比方说 “voice-family” 属性被设计为针对听觉用户终端。其他的属性可被用于不同的媒介。例如,“font-size” 属性可被用于显示器以及印刷媒介,但是也许会带有不同的值。显示器上面的显示的文档通常会需要比纸媒介文档更大的字号,同时,在显示器上,sans-serif 字体更易阅读,而在纸媒介上,serif 字体更易阅读。
@media规则
@media 规则使你有能力在相同的样式表中,使用不同的样式规则来针对不同的媒介。
总结:媒体查询就是说:在不同的条件下显示不同的东西;相当于:在特定的尺寸中,写了一套样式。只兼容IE10及以上
媒体: 电脑 平板 手机 打印机 投影。。。

语法:

@media 条件{
	css选择器{
	属性:}
}
==================
eg:
@media screen and(min-with:1200px){
	.item{
	background-color:red;
	}
}

补充
@media 媒体查询 利用css判断设备类型和获取设备的宽度
screen 手机电脑等智能设备
min 最小值 ===》 大于或等于时 下限
max 最大值 ===》 小于或等于时 上限

条件连接符:and 且;or 或;not 非。

点击进入w3c测试一下

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值