目录
rem 基础
rem 单位
rem (root em)是一个相对单位,类似于em
em是父元素字体大小(
1em=父元素的字体大小
)
这里p的width相当于 10em=10*12=120px
div {
font-size: 12px;
}
p {
/* 1. em 相对于父元素的字体大小来说的 */
width: 10em;
height: 10em;
background-color: pink;
}
不同的是rem的基准是相对于html元素的字体大小。
比如,根元素(html)设置 font-size=12px; 非根元素设置 width:2rem; 则换成px表示就是24px。
rem的优势:父元素文字大小可能不一致,但是可以通过修改html里面的文字大小 ,来改变页面中元素大小,可以整体控制
媒体查询
什么是媒体查询
媒体查询(
Media Query
)是CSS3新语法。
- 使用 @media 查询,可以针对不同的媒体类型定义不同的样式
- @media 可以针对不同的屏幕尺寸设置不同的样式
- 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面
- 目前针对很多苹果手机、Android手机,平板等设备都用得到多媒体查询
语法规范
@media mediatype and|not|only (media feature) {
CSS-Code;
}
- 用 @media 开头 注意@符号
- mediatype 媒体类型
- 关键字 and not only
- media feature 媒体特性 必须有小括号包含
<style>
/* 媒体查询可以根据不同的屏幕尺寸来改变不同的样式 */
/* 这句话的意思:在我们屏幕上,并且宽度小于等于800px,就会变成我们想要的样式 */
@media screen and (max-width:800px) {
body {
background-color: pink;
}
}
</style>
1. mediatype 查询类型
将不同的终端设备划分成不同的类型,称为媒体类型
2. 关键字
关键字 将媒体类型 或多个媒体特性连接到一起做为媒体查询的条件。
- and:可以将多个媒体特性连接到一起,相当于“且”的意思。
- not:排除某个媒体类型,相当于“非”的意思,可以省略。
- only:指定某个特定的媒体类型,可以省略。
3.媒体特性
每种媒体类型都具体各自不同的特性,根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。 注意他们要加小括号包含
案例:根据页面宽度改变背景变色
①按照从大到小的或者从小到大的思路② 注意我们有最大值 max-width 和最小值 min-width都是包含等于的③ 当屏幕小于600像素, 背景颜色变为蓝色 (x <= 599)④ 当屏幕大于等于600像素 并且小于等于 969像素的时候 背景颜色为 绿色 ( 600=<x <= 969)⑤ 当屏幕大于等于 970像素的时候,背景颜色为红色 ( x >= 970)⑥ 里面的screen 和 and 必须带上不能省略
⑦我们的数字后面必须跟单位,不能省略