菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: CSS中的rem使用_汪刚_2023.4.27 [打印本页]

---

作者: 霁后彩虹O    时间: 2023-5-3 12:49
标题: CSS中的rem使用_汪刚_2023.4.27
今日学习内容：
1.rem基础

• rem（root em）是一个相对单位，类似于em，em是相对于父元素字体的大小
• 不同的是rem是相对于html元素的字体大小来定义的
• 比如：html元素设置的font-size的值是20px，那么2rem的对应的像素大小就是40px
  

rem的优势：父元素的文字大小可能会不一致，一个元素也可能会有多个父级元素，但是整个页面只有一个html标签，所以我们可以通过改变html的字体大小，来控制整个页面的所有元素的尺寸。

2.媒体查询

• 什么是媒体查询
  
  • 媒体查询是可以帮助我们查询不同的屏幕宽度来进行相应的设置
    
  • 使用@media  查询，可以针对不同的媒体类型来定义不同的样式
    
  • 当我们重置浏览器的时候，页面会根据媒体查询来重新渲染页面
    
  • 目前我们主要的媒体查询是针对移动端的：比如手机、平板等等。
    

• 媒体查询的语法规范
  
  • 用@media  开头
    
  • mediatype 媒体类型
    
    • all 用于所有设备
      
    • print 用于打印设备和打印预览
      
    • screen 用于电脑屏幕、平板、手机等等（主要使用这个类型）
      
  • 关键字 and not only
    
    • and 可以将多个媒体特性连接起来，相当于且的意思
      
    • not 排除某个媒体类型，相当于非的意思，可以省略
      
    • only 指定某个特定的媒体类型 可以省略
      
  • media feature 媒体特性，必须放在小括号中
    
    • width 定义输出设备中页面可见区域的宽度
      
    • min-width 定义输出设备中页面最小可见区域
      
    • max-width 定义输出设备中页面最大可见区域
      
  • @media mediatype and|not|only （media feature） { CSS的样式代码}
    
  今日所遇问题：无

解决方案：无

---

欢迎光临 菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)

Powered by Discuz! X3.4