目录
- 零、rem布局案例代码
- 1.效果图
- 2.源代码
- 一、rem单位
- 1.em（代表父元素字体大小）
- 2.rem（代表html元素字体大小）
- 二、媒体查询
- 1.基本语法
- 2.引入css时进行媒体查询
- 三、less使用
- 1. .less文件自动生成.css文件
- 2. less基本语法
- 1. 定义变量
- 2.嵌套
- 3.运算
- 四、rem适配方案
- 1. 设计稿尺寸为750px
- 2. 屏幕划分为15等份，一份50px
- 3. 元素取值：rem值=元素值(px) / html font-size的值
零、rem布局案例代码
1.效果图
2.源代码
https://download.csdn.net/download/weixin_46127956/86946719
一、rem单位
1.em（代表父元素字体大小）
当父元素font-size:12px
子元素height:10em,width:10em
等价于height:120px,width:120px
<div class="father" style="font-size: 12px;">
<div class="son" style="width: 10em;height:10em;background-color:pink"></div>
</div>
2.rem（代表html元素字体大小）
当html元素font-size:12px
dom元素height:10rem,width:10rem
等价于height:120px,width:120px
css
html{
font-size: 12px;
}
div{
width: 10rem;
height:10rem;
background-color:pink
}
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div></div>
</body>
</html>
二、媒体查询
1.基本语法
需求：当 800px<=屏幕宽度<=969px，将div背景色改为粉色
css
@media screen and (min-width:800px) and (max-width:969px) {
div{
background-color:pink;
}
}
@media 代表声明查询
screen 代表屏幕查询
and (min-width:800px) and (max-width:969px) 代表当 800<=屏幕宽度<=969，进行css样式修改
2.引入css时进行媒体查询
当screen宽度>=320，使用style320.css文件
当screen宽度>=640，使用style640.css文件
html
<link rel="stylesheet " href="./style320.css" media="screen and (min-width:320px)">
<link rel="stylesheet " href="./style640.css" media="screen and (min-width:640px)">
三、less使用
1. .less文件自动生成.css文件
- VScode安装easy less插件
- 创建一个test.less→写入less代码→保存→自动生成css代码
2. less基本语法
1. 定义变量
//定义@color变量
//命名规则和C语言变量一致，开头@
@color : pink;
div{
background-color: @color;
}
2.嵌套
ul{
list-style: none;
li{
display: inline-block;
width: 100px;
height: 100px;
}
}
注意：伪类（:hover或::after）、选择器（nth:child(n)）,开头加&
ul{
list-style: none;
li{
display: inline-block;
width: 100px;
height: 100px;
&:hover{
background-color: pink;
}
}
}
3.运算
less:
div{
// 1)实现加减乘除,运算符左右加空格
width: 10 + 150px;//160px
width: 150 - 10px;//140px
width: 10 * 150px;//1500px
// 2)除运算要用小括号修饰
width: (150 / 10px);//15px
// 3)一定要有单位
width: (150px / 10);//15px
// 4)都有单位，以第一个为准
width: (150rem / 10px);//15rem
}
四、rem适配方案
1. 设计稿尺寸为750px
2. 屏幕划分为15等份，一份50px
3. 元素取值：rem值=元素值(px) / html font-size的值
div{
//宽度为50px,html的font-size:50px时
width: 50rem / 50;//1rem
}
