rem
1.1 为什么使用 rem 布局
前两两种布局方式一直没有解决两个问题
- 页面中的文字不能随着屏幕变化而变化,比如前面的仿京东页面
- 百分比布局和flex布局主要针对宽度布局,高度一致被忽视
采用 rem 布局,可以让屏幕发生变化时,元素的高度和宽度以及文字大小等能够等比例缩放
1.2 rem单位
rem (root em)是一个相对单位,类似于em,em是父元素字体大小。
不同的是rem的基准是相对于html元素的字体大小。
比如,根元素(html)设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。
<style>
html{
font-size: 12px;
}
.box{
width: 15rem;
height: 10em;
background: blue;
font-size: 1.5rem;
color: black;
text-align: center;
line-height: 10rem;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
rem的优势:父元素文字大小可能不一致, 但是整个页面只有一个html,可以很好来控制整个页面的
元素大小
-
媒体查询
2.1 为什么使用媒体查询
上面案例中,使用rem作为元素的单位
元素的尺寸就会随着 html 中 fong-size 的变化而变换
当屏幕较大时,设置 font-size 为较大值,元素就会变大;当屏幕较小时,设置 font-size 为较小值,元
素就会变小
问题来了:如何在屏幕大小发生变化时,改变 html 的 font-size 的值呢,换言之,如果在不同大小的屏
幕中渲染当前页面时,动态的根据当前屏幕初始化 html 的 font-size 的值呢?
媒体查询是一种比较友好的方式,但不是唯一的方式
2.2 什么是媒体查询
媒体查询(Media Query)是CSS3新语法。 媒体查询就是查询媒体的类型和屏幕大小 -
使用@media查询,可以针对不同的媒体类型定义不同的样式
-
@media 可以针对不同的屏幕尺寸设置不同的样式
-
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面
-
目前针对很多苹果手机、Android手机,平板等设备都用得到多媒体查询
2.3 媒体查询语法 -
用 @media开头 注意@符号
-
mediatype 媒体类型
-
关键字 and not only
-
media feature 媒体特性必须有小括号包含
@media mediatype and|not|only (media feature) {
CSS-Code;
}
2.3.1 mediatype 查询类型
将不同的终端设备划分成不同的类型,称为媒体类型
2.3.2 关键字(逻辑操作符)
关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。
- and:可以将多个媒体特性连接到一起,相当于“且”的意思
- not:排除某个媒体类型,相当于“非”的意思,可以省略。
- only:指定某个特定的媒体类型,可以省略
- ,:表示或者的意思
2.3.3 媒体特性
每种媒体类型都具体各自不同的特性,根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个
注意他们要加小括号包含
2.3.4 媒体查询书写规则
注意: 为了防止混乱,媒体查询我们要按照从小到大或者从大到小的顺序来写,但是我们最喜欢的还是从
小到大来写,这样代码更简洁
2.4 不同屏幕宽度设置body背景
@media screen and (max-width: 800px) {
body{
background-color: #ccc;
}
}
当屏幕宽度<=800px 像素时,body背景颜色为 #ccc
还可以在划分一个挡位
@media screen and (max-width: 800px) {
body{
background-color: #ccc;
}
}
@media screen and (max-width:540px) { body{
background-color: #666;
}
}
当屏幕宽度<=840px 像素时,body背景颜色为 #ccc
当屏幕宽度<=540px 像素时,body背景颜色为 #666
书写顺序
如果把上面的媒体查询颠倒一下顺序
@media screen and (max-width:540px) { body{
background-color: #666;
}
}
@media screen and (max-width: 800px) { body{
background-color: #ccc;
}
}
下面的设置就不再生效了,因为第二个设置包含第一个,所以我们把握住一个原则:前面的设置不能包
含在后面的媒体查询中,否则就会失效
@media screen and (max-width:540px) { body{
background-color: #666;
}
}
又比如下面的代码就没有问题,但是如果颠倒顺序,因为后面的 min-width 320 其实包含了前面 minwidth 750,就会导致 minwidth 750 的设置失效
@media screen and (min-width: 320px) {
body {
background-color: red;
}
}
@media screen and (min-width: 750px) { body {
background-color: blue;
}
}
2.5 通过媒体查询改变 font-size
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@media screen and (min-width: 320px){
html{
font-size: 12px;
}
}
@media screen and (min-width: 640px){
html {
font-size: 16px;
}
}
@media screen and (min-width: 1020px) {
html{
font-size: 16px;
}
}
@media screen and (min-width:1020px) {
html{
font-size: 20px;
}
}
.box {
width: 10rem;
height: 10rem;
background-color: orange;
font-size: 1.5rem;
color: #fff;
text-align: center;
line-height: 10rem;
}
</style>
</head>
<body>
<div class="box">蔡徐坤</div>
</body>
</html>
2.6 逻辑操作符演示
and
表示设备是屏幕并且最小宽度为600px
@media screen and (min-width:600px){ body{
background-color: red;
}
}
如果改成下面这样,就是设备为打印机,并且最小宽度为600px
@media print and (min-width:600px){
body{
background-color: red;
}
}
表示设备时屏幕,并且最小宽度为600px,并且最大宽度为900px,也就是屏幕在 600-900之间时背景颜色为红色
@media screen and (min-width:600px) and (max-width:900px){
body{background-color: red;
}
}
或
使用 , 表示或
下面表示设备为屏幕并且最小宽度为900px,或者最大宽度为600px
也就是说,当设备为屏幕并且屏幕宽度在900px以上时,或者屏幕宽度在600px以下时,背景颜色设置为红色
@media screen and (min-width:900px),(max-width:600px){
body{
background-color: red;
}
}
注意上面的表述,前一个条件限制了设备类型和屏幕宽度,第二个条件限制了屏幕宽度,并没有限制设
备类型(默认就是all)
所以,如果希望限制第二个条件同样限制设备类型,应该这样编写
@media screen and (min-width:900px),screen and (max-width:600px){
body{background-color: red;
}
}
2.7 通过媒体查询实现响应式布局
通过媒体查询实现下面效果
- 屏幕宽度 <=576px 时,每行显示1张图片
- 屏幕宽度>576px 并且 <=768px 时,每行显示2张图片
- 屏幕宽度>768px,并且<=992px 时,每行显示4张图片
- 屏幕宽度>992px,并且<=1200px 时,每行显示6张图片
- 屏幕宽度>1200px 时,每行显示12张图片