目录
一.rem基础
rem单位
rem(root em)是一个相对单位,类似于em,em是父元素字体大小
不同的是rem的基准是相对于html元素的文字大小
比如根元素(html)设置flont-size=12px;非根元素设置width:2rem,则换成px表示就是24px
em单位,在当前元素设置了font-size时,以当前元素为参照,当前元素没有设置font-size,则以父元素为参照
二.媒体查询
2.1什么是媒体查询
媒体查询(media query)是css3新语法
-
使用@media查询,可以针对不同的媒体类型定义不同的样式
-
@media 可以针对不同的屏幕尺寸设置不同的样式
-
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度从新渲染页面
-
目前针对很多苹果手机、Android手机,平板等设备都用得到媒体查询
2.2语法规范
@media mediatype and|not|only (media feature) {
CSS-Code;
}
-
用@media 开头注意@符号
-
mediatype 媒体类型
-
关键字 and not only
-
media feature 媒体特性 必须有小括号包含
1.mediatype查询类型
将不同终端设备划分成不同的类型,称为媒体类型
第三个为screen(屏幕)的意思(这里写错了),scree是小石子的意思
2.关键字
关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件
-
and:可以将多个媒体特性连接到一起,相当于“且”的意思
-
not:排除某个媒体类型,相当于“非”的意思,可以省略ellipsis
-
only:指定某个特定的媒体类型,可以省略
3.媒体特性
每种媒体类型都具有各自不同的特性,根据不同媒体类型的媒体特性设置不同的展示风格。我们暂时了解三个。注意他们要加小括号包含
案例:根据页面宽度改变背景变色
实现思路:
1.按从大到小或者从小到大的思路
2.注意我们有最大值max-width和最小值min-width都是包含等于的
3.当屏幕小于540像素,背景颜色变成蓝色(x<=539)
4.当屏幕大于等于540像素并且小于等于969像素的时候背景颜色为绿色(540<=x<=969)
5.当屏幕大于等于970像素时,背景颜色为红(x>=970)
<style>
/* screen and 必须有不能省略 */
@media screen and (max-width: 539px) {
body {
background-color: blue;
}
}
@media screen and (min-width: 540px) {
body {
background-color: green;
}
}
@media screen and (min-width: 970px) {
body {
background-color: red;
}
}
</style>
层叠简化:
2.3媒体查询+rem实现元素动态大小变化
rem单位是跟着html来走的,有了rem页面元素可以设置不同大小尺寸
媒体查询可以根据不同设备宽度来修改样式
媒体查询+rem就可以实现不同设备宽度,实现页面元素大小的动态变化