媒体查询(Media Query)是CSS3的新语法
使用@media查询,可以针对不同的媒体类型定义不同的样式....值 解释说明
width 定义输出设备中页面可见的区域的宽度
min-width 定义输出设备中页面最小可见区域宽度
max-width 定义输出设备中页面最大可见区域宽度
举个例子:
<style...800时,body的颜色会怎么变化:
03
媒体查询+rem实现元素动态大小变化
rem单位是跟着html来走的,有了rem页面元素可以设置不同大小尺寸,媒体查询可以根据不同设备宽度来修改样式...,媒体查询+rem就可以实现不同设备宽度,实现页面元素大小的动态变化....做一个小案例,当屏幕尺寸变化时,元素大小也会动态变化:
我们将字体和盒子的大小单位不定死,而是用随着html变化而动态变化的rem单位,这样我们只要修改html字体大小,就可以让字体和盒子大小跟着变化,使用媒体查询修改通过判断屏幕的大小改变