您好,欢迎来到二三娱乐。
搜索
您的当前位置:首页CSS @media

CSS @media

来源:二三娱乐

举例:@media only screen and

only: 限定某种设备;

screen: 是媒体类型中的一种,其他还有print/handheld/tv/tty等;

and: 关键字,其他关键字还包括not(排除某种设备);

1. 常用场景:

a. 

<link rel="stylesheet" type="text/css" href="style.css" media="screen and (min-width:600px) and (max-width:800px)">

---表示style.css只应用于屏幕的宽度是在大于600px小于800px的情况下;

b.

@media screen and (max-width:600px){

.class{

  background: #ccc;

}

}

---表示屏幕宽度小于600px时,#ccc背景颜色生效;

2. device-aspect-ratio

当需求是要对某种长宽比的屏幕做特殊样式的情况下使用

@media only screen and (device-aspect-ratio:4/3)

3. only  : 一般来说,用only是看不出效果的,这样采用效果:

      /*这段查询的all是针对所有设备(有些设备不一定是屏幕,也许是打字机,盲人阅读器)*/

}

         /*上面针对了所有设备,这段是只(only)针对彩色屏幕设备*/

}

Copyright © 2019- yule263.com 版权所有 湘ICP备2023023988号-1

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务