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

【学习打卡】第五天 前端工程师2022版 媒体查询语法

标签:
CSS3

课程名称: 前端工程师2022版

课程章节:响应式布局

主讲老师:Alex

课程内容:

今天学习的内容包括:


1.什么是媒体查询:Media querys

一套样式很难适应各种大小的屏幕

针对各种大小的屏幕写样式,让我们的页面在不同大小的屏幕上都能正常显示

//是屏幕设备并且屏幕宽度>=320px(断点Breakpoint)
@media screen//媒体类型 and (min-width//媒体特性:320px//断点){
    body{ 
        background-color:red;
    }
}


2.媒体类型

all(所有设备,包括后面三个 默认值)

screen(屏幕设备)/ print(打印设备)

speech(屏幕阅读器,一般供残障人士使用)

常用:all    screen

写all的时候可以省略把 all 和 and都省略


3.媒体查询中的逻辑

与(and) / 或(,) /非(not)

3.1.与(and)

查询条件全部为真时生效

当屏幕设备并且屏幕宽度>=320px   <= 375px

@media screen and (min-width:320px)and (max-width:375px) {
     body{
          color:red;
     }
}

3.2.或(,)

查询条件中任意一个为真时生效

//(screen并且屏幕宽度>=375px)或(屏幕宽度<=320px)
@media screen and (min-width:375px),(max-width:320px){
    body{
        background-color:red;    
    }
}
//(screen并且屏幕宽度>=375px)或(all并且屏幕宽度<=320px)
@media screen and (min-width:375px),all and (max-width:320px){
    body{
        background-color:red;    
    }
}

3.3.非(not)

对当前查询条件取非取反

//取反(screen 并且屏幕宽度>=320px 且 <= 375px)
//当not 与 and 同时出现,not 对整个媒体查询生效
@media not screen and (min-width:320px) and (max-width:375px){
    body{
        background-color:red;
    }
}

//取反(screen 并且 屏幕宽度>=375px) 或(all 并且屏幕宽度<=320px),
//或条件前后是两个条件,取反只能对一部分起作用
@media not screen and (min-width:375px) , all and (max-width:320px){
 body{
     background-color:red;
  }
 }


4.媒体特性

width  / max-width / min-width

-webkit-device-pixel-ratio  (dpr 设备像素比) 

-webkit(设备兼容性

-webkit-max-device-pixel-ratio

-webkit-min-pixel-ratio

orientation(屏幕方向):landscape (水平方向)/ portrait(垂直方向)

像素比<=2并且水平方向时显示

@media (-webkit-max-device-pixel-ratio:2) and (orientation:landscape){
 body{
     background-color:red;
 }
}

获取dpr

console.log ( window.devicePixelRatio);



课程收获

学习语法前看了老师的样式演示,发现响应式布局很常见,今天学的语法还算简单,能记住一部分的语法,其实一下子记不住也没关系,用的时候知道有这个语法,然后查就好了

今天学习课程共用了52分钟,没有练习,唯一欣慰的一点是,今天没有走神,希望能够早日走上正轨,早点找工作!


作者:Daisy_l
链接:https://www.imooc.com/article/327287
来源:慕课网








点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消