移动端布局四： rem适配布局，em和rem介绍，媒体查询显示不同样式，媒体查询调用不同css样式
学习目标
能够使用rem单位
能够使用媒体查询的基本语法
能够使用Less的基本语法
能够使用Less中的嵌套
能够使用Less中的运算
能够使用2种rem适配方案
能够独立完成苏宁移动端首页
解决方案
1.页面布局文字能否随着屏幕大小变化而变化?
2.流式布局和flex布局主要针对于宽度布局,那高度如何设置?
3.怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放?
一、em 和 rem
rem单位
- rem (root em)是一个相对单位,类似于em , em是父元素字体大小。
- 不同的是rem的基准是相树对于html元素的字体大小。
- 比如,根元素( html )设置font size= 12px;非根元素设置width:2rem;则换成px表示就是24px.
实例
<style>
html{font-size: 14px;}
div{font-size: 12px;}
/* 1. em相对于父元素的字体大小来说的*/
div p:nth-child(1){
width: 10em;
height: 10em;
background-color: blue;
}
/*2. rem相对于htm1元素字体大小来说的*/
div p:nth-child(2){
width: 10rem;
height: 10rem;
background-color: skyblue;
}
</style>
<div>
<p></p>
<p></p>
</div>
效果：用em的第一个span是120px，相对于div字体大小10倍； 用rem的第二个span是140px，相对于html的字体大小10倍；
二、媒体查询
媒体查询( Media Query )是CSS3新语法。
- 使用 @media查询,可以针对不同的媒体类型定义不同的样式
- @media 可以针对不同的屏幕尺寸设置不同的样式
- 当你重置浏览器大小的过程中。页面也会根据浏览器的宽度和高度重新植染页面
- 目前针对很多苹果手机。 Android手机 ,平板等设备都用得到多媒体查询
2.2语法规范
@media mediatype and|not|only (media feature) {
CSS-Code...
}
1. 用@media开头注意@符号
2. mediatype媒体类型
将不同的终端设备划分成不同的类型,称为媒体类型
| 值 | 解释说明 |
|---|---|
| all | 用于所有设备 |
| 用于打印机和打印预览 | |
| scree | 用于电脑屏幕，平板电脑，智能手机等 |
3. 关键字and not only
关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。
- and: 可以将多个媒体特性连接到一起，相当于“且"的意思。
- not :排除某个媒体类型,相当于“非”的意思,可以省略。
- only: 指定某个特定的媒体类型,可以省略。
4. media feature媒体特性必须有小括号包含
每种媒体类型都具体各自不同的特性,根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。
注意他们要加小括号包含
| 值 | 解释说明 |
|---|---|
| width | 定义输出设备中页面可见区域的宽度 |
| min-width | 定义输出设备中页面最小可见区域宽度 |
| max-width | 定义输出设备中页面最大可见区域宽度 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>媒体查询</title>
</head>
<style>
/*这句话的意思就是:在我们屏幕上 并且最大的宽度是500像素设置我们想要的样式*/
/*即：当屏幕宽度小于500时，颜色为紫色*/
@media screen and (max-width: 500px) {
body{background-color: purple;}
}
/*即：当屏幕宽度大于800时颜色为粉色*/
@media screen and (min-width: 800px) {
body{
background-color: pink;
}
}
</style>
<body>
</body>
</html>
5.引入资源(根据不同屏幕引入不同样式)
- 当样式比较繁多的时候,我们可以针对不同的媒体使用不同stylesheets (样式表) .
- 原理,就是直接在link中判断设备的尺寸,然后引用不同的css文件。
- 屏幕最好从小到大写
<link rel="stylesheet" media="screen and (min-width:320px)" href="style320.css">
<link rel="stylesheet" media="screen and (min-width:640px)" href="style320.css">
三、媒体查询+ rem实现元素动态大小变化
- rem单位是跟着html来走的,有了rem页面元素可以设置不同大小尺寸
- 媒体查询可以根据不同设备宽度来修改样式
- 媒体查询+rem就可以实现不同设备宽度,实现页面元素大小的动态变化
实例：根据屏幕大小，购物车按钮高度不同，字体也不同（相对于html字号按比例缩放）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
/*1.屏幕大于320px时html字体大小为50px（320以下的不考虑）
---注意min-width按从小到大写有助少写代码*/
@media screen and (min-width:320px) {
html{font-size: 50px;}
}
/*2.屏幕大于640px时根字体大小100px*/
@media screen and (min-width:640px){
html{font-size: 100px;}
}
/*3.top的高为html字体的1倍，内部的字体为html字体的0.5倍
这样就会根据屏幕不同，而导致html字体变成1或2步大小，此处也自动跟着变*/
.top{
height: 1rem;
font-size: .5rem;
background-color: green;
color: white;
/*水平垂直居中*/
line-height: 1rem;
text-align:center;
}
</style>
<body>
<div class="top">购物车</div>
</body>
</html>
效果：
小于640时
大于640时
小于320时不管它，正常屏幕不会这么小
