rem与媒体查询

1.rem是什么？rem（rootem）是一个相对单位，类似于em。em是父元素的字体大小，而rem是基于相对于html元素的字体大小。html{font-size:20px;}father{font-size:16px;}/*child是father的子元素，则1em=16px，此时宽度为160px*/child{width:10em;}/*rem是相对于html元素的字体大小，1rem=20px，此时的宽度为200px*/footer{width:10rem;}二、什么是媒体查询媒体查询（MediaQuery）是一种新的语法在CSS3中，可以针对不同的媒体类型来定义不同的样式，比如可以根据不同的屏幕尺寸设置不同的样式。在浏览器调整大小的过程中，页面也会根据浏览器的宽度和高度重新呈现。/*Syntax*/@mediamediatypeand|not|noly(mediafeature){specificcssstyle}1、mediatype媒体类型值说明all用于所有设备print适用于在打印预览模式下在屏幕上查看的分页材料和文档.screen主要用于screen，而我们最常用的speech主要用于语音合成器2.关键字and：可以将多个媒体特征连接在一起，相当于“and”；not：排除某种媒体类型，相当于“Not”，可以省略；only：指定一个特定的媒体查询，可以省略。3.Mediafeature常用的mediafeature有3种：width、min-width、max-width。(1)当屏幕可见区域宽度小于500px时，body背景色设置为红色。/*当在屏幕上且最大宽度为500px时，将body背景设置为红色*/@mediascreenand(max-width:500px){body{background-color:red;}}(2)当屏幕可见区域的宽度大于500px且小于1000px时，设置body的背景色为绿色。/*在最小宽度为501px，最大宽度为999px的屏幕上，将主体背景设置为绿色*/@mediascreenand(min-width:501px)and(max-width:999px){body{background-color：绿色的;}}(3)当屏幕可见区域宽度大于1000px时，body背景色设置为紫色。/*当屏幕最小宽度为1000px时，设置body背景为紫色*/@mediascreenand(min-width:1000px){body{background-color:purple;}}4.使用媒体查询导入不同的资源文件3.mediaquery+rem实现元素动态大小变化。rem单元根据html中字符大小变化时，利用media查询不同设备的宽度，设置不同设备html的font-size，实现页面元素大小的动态变化。html中适当的字体大小设置是多少？假设我们的设计稿是750px，我们把屏幕分成15等份（或者10份或者20份），每份的大小（即50px）作为html的字体大小。那么在320px的设备上，每个副本的大小为320/15=21.33px。在640像素的设备上，每个副本的大小为640/15=42.67像素。/*屏幕宽度320px～640px*/@mediascreenand(min-width:320px){html{font-size:21.33px;}}/*屏幕宽度640px～750px*/@mediascreenand(min-width:640px){html{font-size:42.67px;}}/*屏幕宽度大于750px*/@mediascreenand(min-width:750px){html{font-size:50px;}}如果设计稿中有一个高度为80px的div，那么在css中，高度应该是80/50=1.6rem。即使用设计稿中元素的像素值/（设计稿尺寸/分份数）。这样，这个div在不同屏幕尺寸下的尺寸为：屏幕宽度320px~640px：21.33*1.6=34.128px屏幕宽度640px~750px：42.67*1.6=68.272px屏幕宽度750px以上：50*1.6=80px