移动开发之rem适配

最新推荐文章于 2025-04-25 21:37:23 发布

bjt_yy

最新推荐文章于 2025-04-25 21:37:23 发布

阅读量162

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.youkuaiyun.com/bjt_yy/article/details/118874177

版权

前端专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何利用rem单位和媒体查询进行移动开发中的响应式设计，通过改变html字体大小实现不同屏幕尺寸的适配，并展示了如何结合Less预处理器简化CSS编写。重点讲解了rem单位的原理、媒体查询的应用以及使用Less的变量、嵌套和运算来优化代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

移动开发之rem适配

通过使用媒体查询+rem实现不同尺寸屏幕的适配

1.rem
rem是一个单位，参照于HTML根元素的字体大小，和em有点相似。

<style>
	html{
	/* 通过改变这个整体的值从而实现适应不同设备  使用媒体查询 */
		font-size: 12px;
	}
	/* div基于html字体大小变化尺寸 */
	div{
		width: 20rem;
		height: 15rem;
		background-color: antiquewhite;
	}
	p{
		/*1. em相对于父元素 的字体大小来说  这里的尺寸是div继承了父元素的font-size:12px;*/
		width: 5em;
		height: 10em;
		background-color: aqua;
	}
</style>

<body>
	<div><p></p></div>
</body>

在这里插入图片描述

2.媒体查询

使用@media查询，可以针对不同媒体进行不同样式设置，不同设备的尺寸有不同的样式。

@media screen and (max-width:600px) {
				body{
					background-color: #00FFFF;
				}

当改变浏览器屏幕大小时，body的背景颜色会变。

3.引入css文件
通过增加media的值，在不同尺寸的屏幕引入不同的css样式表。

<link rel="stylesheet" href="test2.css" media="screen and (min-width:320px)">
<link rel="stylesheet" type="text/css" href="test1.css" media="screen and (min-width:640px)"/>

4.less
是css预处理器（常见的有sass less stylus）
使用Less是为了简化媒体查询+rem时候的计算。

less变量
定义变量：
格式： @变量名:值；
不能有特殊字符，严格区分大小写
less编译
less编译之后会在当前文件夹形成一个css文件
less嵌套
通过嵌套能够精简简化css代码
嵌套的样式的作用元素之间默认是空格，所以在嵌套伪类时要加上&符号（比如&:hover）
less运算
为了可读通常给运算符左右各加上一个空格
两个参数运算,两个参数都没有单位时，默认宽度为100%；如果只有一个参数有单位，则选用已有的一个单位；两个都有单位时，不管是有没有相同单位，都默认采用第一个参数的单位。

test.less:

@bgcolor:yellow;
@width:100px;
div{
	width:@width + 100;
	height: 100px;
	background-color: @bgcolor;
	p{
		width: 100px;
		height: 50px;
		background-color: red;
		&:hover{
			background-color: @bgcolor;
		}
	}
}

编译后产生的test.css:

div {
  width: 200px;
  height: 100px;
  background-color: yellow;
}
div p {
  width: 100px;
  height: 50px;
  background-color: red;
}
div p:hover {
  background-color: yellow;
}

test.html