@media 查询类型

  • all, which applies to all media type devices
  • print, which only applies to printers
  • screen, which only applies to screens (desktops, tablets, mobile etc.)
  • speech, which only applies to screenreaders

media MDN 文档 https://developer.mozilla.org/en-US/docs/Web/CSS/@media

ch

ch 是一个相对单位，所谓相对，意思是 ch 会根据当前容器的font-size变化而变化。
但如果 字体不是等宽字体，这时的ch看起来就不止是一个英文字母的宽度

  • 1ch = 1个英文 = 1个数字
  • 2ch = 1个中文
  • 1ch 一个相对于数字0的宽度，注意，是0的宽度，和0的高度无关
    1. .box {
    2.   width: 8ch;
    3.   background-color: powderblue;
    4.   overflow: hidden;
    5.   white-space: nowrap;
    6.   text-overflow: ellipsis;
    7.   font-size: 50px;
    8. }

tailwindcss 媒体查询

接在元素上加断点

  1. <div class="p-2 md:p-4 lg:p-6"></div>