CSS 内容总结
1.rem基础
rem(root em)是一个相对单位,类似于em,em是相对于父元素字体大小。
不同的是rem的基准是相对于html元素的字体大小
比如:html:设置font-size=12px,非根元素设置width:2rem,则换成px表示就是24px
2.媒体查询
Media Query 是CSS3新语法
- @media 可以针对不同的屏幕尺寸设置不同的样式
语法规范
@media mediatype and|not|only (media feature){
CSS-Code;
}
-
用@media开头注意符号
-
mediatype媒体类型
值 说明 all 用于所有设备 print 用于打印机和打印预览 scree 用于电脑屏幕、平板电脑、智能手机等 -
关键字and not only
关键字 说明 and 可以将多个媒体特性连接到一起,相当于“且”的意思 not 排除某个媒体类型,相当于“非”的意思,可以省略 only 指定某个特定的媒体类型,可以省略 -
media feature 媒体特性 必须有小括号包含
值 解释说明 width 定义输出设备中页面可见区域的宽度 min-width 定义输出设备中页面最小可见区域宽度 max-width 定义输出设备中页面最大可见区域宽度
<style>
@media screen and (max-width:500px) {
body {
background-color: rgb(159, 185, 64);
}
}
@media screen and (max-width:800px) {
body {
background-color: rgb(224, 54, 54);
}
}
/* 从小到大写 */
</style>
媒体查询+rem案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge