CSS3打卡
rem布局
1、rem单位
em：em是相对于父元素的字体大小来说的。
rem：rem是先相对与html元素的字体大小来说的。
优点：可以通过修改html的字体大小来改变页面中元素的整体控制。
<style>
html {
font-size: 12px;
}
div {
font-size: 10px;
width: 15rem;
height: 15rem;
background-color: purple;
}
p {
/* 1、 em是相对于父元素的字体大小来说的 */
/* width: 10em;
height: 10em; */
/* 2、 rem是先相对与html元素的字体大小来说的 */
width: 10rem;
height: 10rem;
background-color: pink;
/* 3、 rem的优点就是可以通过修改html的字体大小来改变页面中元素的整体控制 */
}
</style>
<body>
<div>
<p></p>
</div>
</body>
2、多媒体查询
语法如下：
@media 媒体类型 and | not | only (媒体特性) {
css代码;
}
媒体类型：
all 用于所有多媒体类型设备
print 用于打印机
screen 用于电脑屏幕，平板，智能手机等。
speech 用于屏幕阅读器
not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。
only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。
all: 所有设备，这个应该经常看到。
例子：
@media screen and (max-width: 800px) {
body {
background-color: pink;
}
}
扫一扫
708
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
