rem单位
rem(rootem)是一个相对单位,类似于em,em是父元素字体大小.不同的是rem的基准是相对于html元素的字体大小.比如,根元素(html)设置font-size=12px;非根元素设置width:2rem,则换成px表示就是24px.也就是说rem这个单位之看html,如果想要实现自适应,那就只要修改html的字体大小即可,但是em的话则要修改许许多多的盒子.02媒体查询
媒体查询(MediaQuery)是CSS3的新语法使用
media查询,可以针对不同的媒体类型定义不同的样式.media可以针对不同的屏幕尺寸设置不同的样式当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面.
目前针对很多苹果手机,Android手机,平板等设备都用得到多媒体查询
语法:mediamediatypeandnot
only(mediafeature){
CSS-Code;
}
用media开头,注意
符号mediatype媒体类型
关键字andnoonly
mediafeature媒体特性必须要有小括号包含
mediatype查询类型将不同的终端设备划分成不同的类型,称为媒体类型值解释说明all用于所有设备print用于打印机和打印预览screen用于电脑屏幕,平板电脑,智能手机等关键字
媒体特性每种媒体类型都具体有各自不同的特征,根据不同媒体类型的媒体特征设置不同的展示风格,我们暂且了解三个,注意他们都要加上小括号包含.值解释说明width定义输出设备中页面可见的区域的宽度min-width定义输出设备中页面最小可见区域宽度max-width定义输出设备中页面最大可见区域宽度举个例子:
style/*这句话的意思是:在我的屏幕吧上,且最大的宽度为像素,就设置成我们想要的样式*/
mediascreenand(max-width:px){body{background-color:pink;}}/style那么我们实验一下,当屏幕宽度大于时,body的颜色会怎么变化:
03媒体查询+rem实现元素动态大小变化
rem单位是跟着html来走的,有了rem页面元素可以设置不同大小尺寸,媒体查询可以根据不同设备宽度来修改样式,媒体查询+rem就可以实现不同设备宽度,实现页面元素大小的动态变化.做一个小案例,当屏幕尺寸变化时,元素大小也会动态变化:我们将字体和盒子的大小单位不定死,而是用随着html变化而动态变化的rem单位,这样我们只要修改html字体大小,就可以让字体和盒子大小跟着变化,使用媒体查询修改通过判断屏幕的大小改变html字体的大小让文字垂直居中利用的是line-height,这里也可以不定死,用rem单位,将line-height设置成height一样就可以.!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"meta