目录
- 1. rem单位介绍
- 2. 媒体查询
- 2.1什么是媒体查询
- 2.2语法规范
- 1. mediatype媒体类型
- 2. 关键字
- 3. 媒体特性
- 4. rem+媒体查询实现元素大小动态变化
- index.html
- style640.css
- style320.css
1. rem单位介绍
rem (root em)是一个相对单位,类似于em,em是父元素字体大小.
不同的是rem的基准是相对于html元素的字体大小.
比如, 根元素(html)设置font-size=12px,非根元素设置 width:2rem,则width实际为24px.
2. 媒体查询
2.1什么是媒体查询
媒体查询( Media Query)是CSS3新语法。使用@media查询,可以针对不同的媒体类型定义不同的样式@media可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面目前针对很多苹果手机、 Android手机,平板等设备都用得到多媒体查询
2.2语法规范
@emedia mediatype and|not|only (media feature){
cSS-Code;
}
- 用@media开头注意@符号
- mediatype媒体类型
- 关键字 and not only
- media feature媒体特性必须有小括号包含
1. mediatype媒体类型
将不同的终端设备划分为不同的类型,称为媒体类型.
值 | 解释 |
all | 用于所有设备 |
print | 用于打印机和打印预览 |
screen | 用于电脑屏幕, 平板电脑, 智能手机等 |
2. 关键字
关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。
值 | 解释 |
and | 可以将多个媒体特性连接到一起,相当于且”的意思 |
not | 排除某个媒体类型,相当于“非”的意思,可以省略。 |
only | 指定某个特定的媒体类型,可以省略。 |
3. 媒体特性
每种媒体类型都具体各自不同的特性,根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个注意他们要加小括号包含
值 | 解释说明 |
width | 定义输出设备中页面可见区域的宽度 |
min-width | 定义输出设备中页面最小可见区域宽度 |
max-width | 定义输出设备中页面最大可见区域宽度 |
案例
/*在屏幕上并且最大宽度800px*/
/*小于等于800px时显示,否则不显示*/
@media screen and (max-width: 800px){
body {
background-color: pink;
}
}
@media screen and (max-width: 500px){
body {
background-color: purple;
}
}效果:
4. rem+媒体查询实现元素大小动态变化
rem单位是跟着htm来走的,有了rem页面元素可以设置不同大小尺寸媒体查询可以根据不同设备宽度来修改样式
媒体查询+rem就可以实现不同设备宽度,现页面元素大小的动态变化
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
@media screen and (min-width:320px){
html {
font-size: 50px;
}
}
@media screen and (min-width: 640px) {
html {
font-size: 100px;
}
}
.top {
height: 1rem;
font-size: .5rem;
background: green;
color: #ffffff;
text-align: center;
line-height: 1rem;
}
</style>
</head>
<body>
<div class="top">购物车</div>
</body>
</html>效果:
### 5. 引入资源
当样式比较繁多的时候,我们可以针对不同的媒体使用不同 stylesheets(样式表)原理,就是直接在link中判断设备的尺寸,然后引用不同的css文件
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">案例:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*<!--大于等于640px,一行显示两个-->*/
/*<!--小于640px,一行显示一个-->*/
/*针对不同的屏幕尺寸调用不同的css文件*/
</style>
<link rel="stylesheet" href="media_css/style320.css" media="screen and (min-width:320px)">
<link rel="stylesheet" href="media_css/style640.css" media="screen and (min-width:640px)">
</head>
<body>
<div>1</div>
<div>2</div>
</body>
</html>style640.css
div {
width: 50%;
float: left;
height: 100px;
}
div:nth-child(1){
background-color: pink;
}
div:nth-child(2){
background-color: purple;
}style320.css
div {
width: 100%;
height: 100px;
}
div:nth-child(1){
background-color: pink;
}
div:nth-child(2){
background-color: purple;
}效果:
