媒体查询

媒体查询

媒体查询可以让我们针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

百分比

通过百分比单位，可以使得浏览器中组件的宽和高随着浏览器的高度的变化而变化，从而实现响应式的效果。

vw/vh

px、em、rem、vh、vw的区别及使用场景

这几个单位是在写长度的时候常常会用到的：

一、px

px：也就是像素，是基于屏幕分辨率来说的，一旦设置了，就无法适应页面大小的变化。

二、em

em：是相对单位，相对于当前对象内文本的字体大小（也就是它的父元素），如果当前对象内文本的字体没有设置大小，就会相对于浏览器默认字体大小也就是16px。所以在没有设置的情况下 1em = 16px。

为了便于运算你可以在body选择器中声明Font-size=62.5%；这就使em值变为 16px*62.5%=10px, 这样 12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

三、rem

rem：rem的出现是为了解决em的问题的，em是相对于父元素来说的，这就要求我们进行任何元素设置的时候，都需要知道它的父元素字体的大小。而 rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个参考

值，就可以了，同时还能做到只修改根元素就成比例地调整所有字体大小。

四、vh、vw

vh、vw：vw 是根据窗口的宽度。会把窗口的大小分为100份，所以50vw代表窗口大小的一半。并且这个值是相对的，当窗口大小发生改变也会跟着改变，同理，vh则为窗口的高度

四、总的来说，四者的区别：

px 是固定的大小，em 是相对于父元素字体的大小，rem 是相对于根元素字体的大小，vh、vw 是相对可是窗口的大小

五、使用场景的区别：

一般我们在设置边框和边距的时候用 px 比较好而在一些需要做响应式的页面用 rem 比较便捷

但是具体还是得看你的业务来定的

rem布局

rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准，当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生响应的变化。

过渡与动画