移动端布局四： 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;非根元素设置2rem;则换成px表示就是24px.

实例

<style>
html{font-size: 14px;}
div{font-size: 12px;}

/* 1. em相对于父元素的字体大小来说的*/ 
div p:nth-child(1){
	 10em;
	height: 10em;
	background-color: blue;
}

/*2. rem相对于htm1元素字体大小来说的*/
div p:nth-child(2){
	 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	用于所有设备
print	用于打印机和打印预览
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- 500px) {
	body{background-color: purple;}
}

/*即：当屏幕宽度大于800时颜色为粉色*/
@media screen and (min- 800px) {
	body{
		background-color: pink;
	}
}
</style>	
<body>
</body>
</html>

5.引入资源(根据不同屏幕引入不同样式)

当样式比较繁多的时候,我们可以针对不同的媒体使用不同stylesheets (样式表) .
原理,就是直接在link中判断设备的尺寸,然后引用不同的css文件。
屏幕最好从小到大写

<link rel="stylesheet" media="screen and (min-320px)" href="style320.css">
<link rel="stylesheet" media="screen and (min-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-320px)	{
	html{font-size: 50px;}
}
/*2.屏幕大于640px时根字体大小100px*/
@media screen and (min-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时不管它，正常屏幕不会这么小