Web前端开发移动端布局（rem布局快速入门）

零、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
}复制

标签

less

	<div class="father" style="font-size: 12px;">
	<div class="son" style="width: 10em;height:10em;background-color:pink"></div>
	</div>

	html{
	font-size: 12px;
	}
	div{
	width: 10rem;
	height:10rem;
	background-color:pink
	}

	<!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>

	@media screen and (min-width:800px) and (max-width:969px) {
	div{
	background-color:pink;
	}
	}

	<link rel="stylesheet " href="./style320.css" media="screen and (min-width:320px)">
	<link rel="stylesheet " href="./style640.css" media="screen and (min-width:640px)">

	//定义@color变量
	//命名规则和C语言变量一致，开头@
	@color : pink;
	div{
	background-color: @color;
	}

	ul{
	list-style: none;
	li{
	display: inline-block;
	width: 100px;
	height: 100px;
	}
	}

	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

	}

	div{
	//宽度为50px,html的font-size:50px时
	width: 50rem / 50;//1rem
	}

Web前端开发 移动端布局（rem布局快速入门）

目录

零、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的值

微信扫一扫：分享

Web前端开发移动端布局（rem布局快速入门）