css相关学习

突发奇想，记录一下自己学习的一些css,该博客会不定时更新，我遇到要记录的都会记录在里面

css媒体查询

语法

@media screen and (max-width: 768px){
  .container{
   // 你的代码
  }
}

// 媒体查询声明， @media
// 媒体查询类型， screen
// 覆盖的屏幕范围， max-width: 768px
// 更改样式， 你的代码

媒体查询类型

all 所有媒体设备
print 打印设备
screen 电脑、平板、手机屏幕
speech 屏幕阅读器

示例：
@media screen

深入了解

为什么要加and

 现在你已经确定了一个条件，即 screen 媒体查询类型。你要指定其他条件，比如想要规定在某一个屏幕范围内，那么就可以用 and 来连接。

@media screen and (max-width : 768px) {
  .container{
     // 在screen媒体类型,屏幕宽度<=768px时这部分代码将被触发
  }
}

跳过查询类型

// 你可以只用 min-width & max-width 来跳过媒体查询类型。
@media (min-width : 480px) and (max-width : 768px) {
  .container{
     // 在屏幕宽度为 480px 和 768px 之间这部分代码将被触发
  }
}

多个条件需求

// 当条件大于等于三个时，可以用 comma 连接。

@media screen, (min-width : 480px) and (max-width : 768px) {
  .container{
     // 在screen媒体类型,屏幕宽度为 480px 和 768px 之间这部分代码将被触发
  }
}

em,rem和vw,vh

REM

// rem是一个相对尺寸，它相对于html根元素来进行计算,改变html根元素 font-size 属性的大小。那么REM值也会随之改变。

html {
  font-size: 16px;
}

.text {
  font-size: 1rem; // 此时类text的字体是16px
}


html {
  font-size: 40px;
}

.text {
  font-size: 2rem; // 此时类text的字体是80px
}

rem的使用

// REM 主要应用在响应式布局。什么是响应式布局？能够根据窗口大小动态变化布局的网页就是响应式。
// 将用到px的地方替换成rem单位。通过媒体查询Media Quires的方式改变HTML根节点 font-size 的大小。

// 案例：

#size {
  // 如下，使用媒体查询改变跟元素字体后，id为size的字体大小在2560px和1920px宽度下分别为60px和40px
  font-size: 2rem;
}

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

  html {
    font-size: 30px;
  }
}

@media screen and (max-width: 1920px) {
  
    html {
    font-size: 20px;
  }
}

EM

// EM 单元与 REM 单元相同，但它取决于父字体大小，可以理解成离它最近的font-size大小---不推荐使用
// 原因：可能犯计算错误，且代码量太大，em是根据父元素来定义，容易计算错误

html {
  font-size: 16px;
}

.text {
  font-size: 3em; // 转换过来就是48px
}

vw

// 视口宽度，以百分比方式工作。10vw相当于当前浏览器窗口屏幕宽度的10%。

.box {
  width: 50vw; // 目前屏幕一半的宽度
  
  height: 300px;
}

VH

// 视口高度，以百分比方式工作。10vw相当于当前浏览器窗口屏幕高度的10%。

.text {
  display: none;
}

.box {
  width: 300px;
  
  height: 50vh; // 当前屏幕一半的高度
}