移动Web开发——rem适配布局（一）

最新推荐文章于 2024-08-31 20:49:28 发布

红人日天

最新推荐文章于 2024-08-31 20:49:28 发布

阅读量133

点赞数 1

分类专栏： rem适配布局文章标签： html css

本文链接：https://blog.csdn.net/zhr_beyond/article/details/114163220

版权

rem适配布局专栏收录该内容

8 篇文章 0 订阅

订阅专栏

rem适配布局（一）

学习目标

（1）能够使用rem单位

（2）能够使用媒体查询的基本语法

（3）能够使用Less的基本语法

（4）能够使用Less中的嵌套

（5）能够使用Less中的运算

（6）能够使用2种rem适配方案

（7）能够独立完成苏宁移动端首页

1.rem基础

（1）rem单位

rem(root em)是一个相对单位，类似于em，em是父元素字体大小

不同的是，rem的基准是相对于html元素的字体大小

例如：根元素(html)设置 font-size = 12px

非根元素设置 width：2rem 换成px表示24px

// 例1
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				font-size: 12px;
			}
			p{
				/*em相对于父元素字体大小来说的*/
				width: 10em;
				height: 10em;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div>
			<p></p>
		</div>
	</body>
</html>

在这里插入图片描述

// 例2
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			html{
				font-size: 14px;
			}
			div{
				font-size: 12px;
			}
			p{
				/*rem是相对于html的字体大小来说的*/
				width: 10rem;
				height: 10rem;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div>
			<p></p>
		</div>
	</body>
</html>

在这里插入图片描述
rem的优点是可以通过修改html的文字大小来改变页面元素的大小，可以进行整体控制

// 例3
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			html{
				/*font-size: 14px*/
				font-size: 12px;
			}
			div{
				width: 15rem;
				height: 15rem;
				font-size: 12px;
				background-color: green;
			}
			p{
				width: 10rem;
				height: 10rem;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div>
			<p></p>
		</div>
	</body>
</html>

rem适配布局学习笔记持续更新中···

红人日天

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
移动Web开发——rem适配布局（一）

rem适配布局（一）学习目标（1）能够使用rem单位（2）能够使用媒体查询的基本语法（3）能够使用Less的基本语法（4）能够使用Less中的嵌套（5）能够使用Less中的运算（6）能够使用2种rem适配方案（7）能够独立完成苏宁移动端首页1.rem基础（1）rem单位rem(root em)是一个相对单位，类似于em，em是父元素字体大小不同的是，rem的基准是相对于html元素的字体大小例如：根元素(html)设置 font-size = 12px  &n
复制链接

扫一扫

专栏目录