响应式开发中的rem

最新推荐文章于 2025-08-18 20:43:51 发布

原创最新推荐文章于 2025-08-18 20:43:51 发布 · 660 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#响应式开发 rem 等比缩放

用rem做为响应式开发中的单位（包括字体，宽度，高度），页面的显示可以自适应设备宽高。比如我们的设计稿是根据iphone6（375 X 667）的尺寸设计的，我们用rem为单位，就按照inphone6的尺寸做好页面就ok了，页面在其他设备里就可以响应显示。

1.设置rem;字体和高度我们可以使用rem,宽度的话我们依然可以使用百分比。

rem是相对于根元素<html>的。浏览器的默认字号是16px。即：1rem= 16px = 100%;

我们是从小屏幕到大屏幕的开发模式，那么我们的设置如下：（下面的height是例子，实际开发中不需要的。）

2.通过下面的设置，高度自适应是可以解决的，但是有的浏览器或移动端设备有最小字体的限制，下面我总结一下最小字体的限制情况可以参考http://www.cnblogs.com/he-lian/p/4512276.html。
移动端最小字体为12px(仅chrome有此限制)，inphone类移动设备没有最小字体限制。其他设备可能会受8px的限制。

html {
		font-size: 62.5%;/* 相当于font-size:10px; 1rem=10px */
                height:10rem;/* height:100px; */
	}

@media screen and (min-width:414px) {
	html {
		font-size:75%;/* 相当于font-size:12px; 1rem=12px */

                height:10rem; /* height=120px */
	}
}

@media screen and (min-width:640px) {
	html {
		font-size:87.5%;/*相当于font-size:14px*/

                height:10rem; /* height:140px; */
	}
}

@media screen and (min-width:1024px) {
	html {
		font-size:100%;/*相当于font-size:16px*/

                height:10rem; /* height:160px;*/
	}
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

yiyingcsdn

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

响应式布局——Rem

weixin_47295135的博客

12-07

1636

rem:相对长度单位。相对于根元素(即html元素)font-size计算值的倍数文章目录前言一、什么是 rem ？1. rem的概念二、为什么要用 rem ？1.为什么用 rem？2.什么时候用 rem？三、如何使用 rem用iPhone6/7/8的手机为例，屏幕宽度为375px，通过换算来完成移动端的响应式布局处理总结前言给根元素大小设置随着视口变化而变化的 vw 单位，这样就可以实现动态改变其大小。限制根元素字体大小的最大最小值，配合 body 加上最大宽度和最小宽度一、什么是 rem

基于rem的移动端响应式适配方案(详解)

01-19

视口在前一段时间，我曾经写过一篇关于viewport的文章。最近由于在接触移动端开发，对viewport有了新的理解。于是，打算重新写一篇文章，介绍移动端视口的相关概念。关于这篇文章说到的所有知识，本质上离不开以下代码 <meta name=viewport content=width=device-width, initial-scala=1, maximum-scale=1, minimum-scale=1, user-scalable=no /> @media all and (max-width: 320px) { // do something } 了解过移动端开发

参与评论您还未登录，请先登录后发表或查看评论

用rem来做响应式开发

weixin_30846599的博客

05-05

219

由于最近在做公司移动项目的重构，因为要实现响应式的开发，所以大量使用到了rem的单位，觉得这个单位有点意思。但是现在貌似用他的人很少。上一篇文章我分享了淘宝写的一篇rem的介绍，介绍的非常全面，但是他们似乎都把关注点放在了字体单位上了，其实rem不只是能应用到字体上面，还可以应用到长度和宽度上面，接下来看下我做的一个项目的首页吧。 Demo 由于这个项目我设置了最大的宽度...

响应式rem

CamilleZJ的博客

05-04

1061

网页中常用的文字大小单位是 px(Pixels)，em，现在《CSS Values and Units Module Level 3》中新增了 rem 这个单位。rem是什么？规范中明确写道：Equal to the computed value of ‘font-size’ on the root element.「rem」是指相对于根元素（root element，html）的字体大小的单位，...

rem/em/响应式用法总结

Welcome to my blog

04-09

1940

Js动态设置rem来实现移动端字体的自适应　　　　实际上讲了这么多，大家可能已经了解了rem的用法，但是还不了解如何利用rem去实现移动端的自适应。说到底，rem实现移动端自适应的原来在于它本身的特性，它可以始终根据根元素的字体大小去改变自己的值。目前各种常见手机的屏幕尺寸大小如下图所示：想实现手机端自适应，就是可以让页面的元素字体、间距、宽高等属性的属性值可以随着手机屏幕尺寸的变化而...

javascript用rem来做响应式开发

10-18

本篇文章主要讲述如何运用JavaScript配合CSS单位rem来实现响应式开发。首先，我们来解释一下什么是rem单位。rem（root em）是一种CSS长度单位，它代表根元素（html元素）字体大小的值。例如，如果html元素的font-...

前端开发Vue中rem布局与大屏自适应组件使用指南：实现高效响应式设计与性能优化

05-25

内容概要：本文详细介绍了在Vue项目中实现rem布局与大屏自适应的方法。首先，阐述了rem布局的基础使用方法，包括项目初始化配置，如安装依赖、配置postcss以及引入自适应脚本。其次，讲解了如何在组件中使用rem进行...

前端开发Vue中REM布局与大屏自适应组件使用指南：实现高效响应式设计和性能优化

05-25

内容概要：本文档详细介绍了如何在Vue项目中实现rem布局与大屏自适应，涵盖从基础配置到高级应用的全流程。首先，讲解了rem布局的基础使用方法，包括项目初始化配置、依赖安装、配置postcss以及引入自适应脚本。接着...

使用rem开发响应式布局

Zpan204的博客

10-22

186

步骤一从Ui设计师拿到设计稿，一般尺寸都是以iphone 6的尺寸为准 750*1334（6381136）在样式中给html设定一个fontsize的值，我们一般设置一个方便后续计算的值，例如10px、100px等，我们使用100px 写样式完全按照设计稿的尺寸来写样式，设计稿上的长度、height、margin、padding、字体的值是多少，我们就写多少，这样可以100%还原设计稿注意：需要把得到的像素值/100px,转换为rem单位

rem响应式原理

QiGeS的博客

04-09

1001

1、什么是rem rem（font size of the root element）是指相对于根元素的字体大小的单位 em（font size of the element）是指相对于父元素的字体大小的单位。 rem计算的规则是依赖根元素,em是依赖父元素计算 2、rem响应式原理先按定高宽设计出来页面，然后转换为rem单位，配合js查询屏幕大小来改变html的font-size，...

我的rem响应式解决方案

海天酱油zz

01-29

573

一、原理：虽然大家都喜欢直接拿代码，但是原理还是不得不说的。走的越远，越发现理论的重要性。关键知识： 1：rem是定义在html元素上面的，并且必须设置font-size（别和我扣，我也知道body上面也可以） 2、浏览器内用rem就必须在初始的html元素上面定义fontSize大小，并且需要设置随着页面变化fontSize也会随之变化这里很多新手都不知道，直接拿来用虽然看着没问...

前端【技术方案】多端适配 -- 响应式布局（含 rem 详解）

最新发布

10-15

<think>首先，用户的问题是：“我想了解响应式开发中flex布局的相关内容请问响应式开发中flex布局的介绍和应用”。这是一个新的查询，所以我需要基于提供的站内引用来回答。回顾系统级指令： - 所有行内数学表达式必须使用$...$格式。 - 独立公式必须使用$$...$$$$格式并单独成段。 - LaTeX语法正确。 - 使用中文回答。 - 生成相关问题。 - 回答中引用的段落末尾自然地添加引用标识，例如[^1]。用户提供了几个引用： - 引用[1]：关于Flex布局的基本介绍。 - 引用[2]：提到响应式布局包括flex布局、rem布局等。 - 引用[3]：详细描述了Flex布局的关键属性及其在响应式设计中的应用，包括一个导航栏示例。 - 引用[4]：给出了一个使用Flex布局实现居中的代码示例。用户的上一个问题和我的回答没有提供，因为在这个对话中，用户直接给出了这个查询。系统指令说“参考用户上一次的问题和你的回答”，但这里没有之前的互动，所以我只能基于当前上下文。用户的问题焦点是“响应式开发中flex布局的介绍和应用”。所以，我需要： 1. 介绍Flex布局的基本概念。 2. 解释它在响应式开发中的应用。 3. 从引用中提取相关信息。结构化回答： - 首先，介绍Flex布局是什么。 - 然后，描述其基本用法和关键属性（基于引用[3]）。 - 接着，讨论在响应式设计中的应用。 - 最后，提供示例代码（如引用[4]），并生成相关问题。确保使用中文回答。从引用中提取关键点： - 引用[1]：Flex布局是弹性盒子布局，用于高效设计复杂布局。 - 引用[2]：响应式布局包括Flex布局。 - 引用[3]：详细属性表，包括父容器和子元素属性，以及响应式应用。 - 引用[4]：一个居中的代码示例。在回答中，自然地添加引用标识。例如，当提到某个点时，添加[^1]、[^2]等。最终，生成相关问题。大纲回答： 1. **介绍Flex布局**：定义和基本概念（基于引用[1]）。添加引用。 2. **基本用法**：如何开启Flex布局，常见的父容器属性和子元素属性（基于引用[3]）。添加引用。 3. **在响应式开发中的应用**：解释Flex布局如何用于响应式设计，比如通过媒体查询调整布局（引用中没有直接说，但可以推断）。引用中提到flex-grow和flex-shrink在响应式中的作用。 4. **示例**：提供一个简单的代码示例，如引用[4]中的居中示例。添加引用。 5. **生成相关问题**：在最后，创建一个“相关问题”部分。确保回答清晰、逐步解决问题。没有数学表达式，所以不需要使用$...$或$$...$$，除非必要。但指令说如果有数学表达式，必须用那些格式。这里可能没有数学，所以可以忽略。响应： - 开头：简要概述。 - 主体：详细解释。 - 结尾：总结和问题。 </think>### 响应式开发中Flex布局的介绍和应用在响应式网页开发中，Flex布局（弹性盒子布局）是一种基于CSS3的现代布局模型，它通过灵活的容器和元素控制，简化了复杂布局的实现过程。Flex布局特别适合响应式设计，因为它能自动适应不同屏幕尺寸，无需复杂的媒体查询即可实现元素的重排、对齐和空间分配。下面我将从基本介绍和应用两方面逐步解释Flex布局在响应式开发中的核心内容。 #### 1. Flex布局的基本介绍 Flex布局全称为“Flexible Box Layout”，它将容器（父元素）定义为弹性容器，子元素则成为弹性项目。这种机制允许开发者通过几个关键属性轻松控制元素的排列方向、对齐方式和空间分配，从而提高页面布局的灵活性和效率[^1]。例如： - **核心优势**：Flex布局减少了传统布局（如float）的复杂性，尤其是在响应式设计中，元素能根据可用空间自动伸缩或换行。 - **工作机制**：只需在父容器设置`display: flex`，即可激活弹性布局；子元素则通过属性如`flex-grow`和`flex-shrink`动态调整大小，适应不同设备。 Flex布局的核心属性分为父容器属性和子元素属性两部分（基于引用[3]）： - **父容器属性**： - `flex-direction`: 定义排列方向（如`row`横向默认、`column`纵向），适用于响应式布局中根据屏幕方向切换排列。 - `justify-content`: 控制主轴对齐（如`flex-start`左对齐、`center`居中、`space-between`两端对齐）。 - `align-items`: 控制交叉轴对齐（如`stretch`拉伸默认、`center`居中），常用于响应式布局中确保元素在各种屏幕中保持居中或对齐。 - **子元素属性**： - `flex-grow`: 指定空间足够时元素的扩展比例（0表示不扩展，1表示平均分配剩余空间），在响应式设计中增强元素的伸缩性。 - `flex-shrink`: 指定空间不足时元素的收缩比例（0表示不收缩，1表示平均收缩），防止元素溢出容器。 - `flex-basis`: 定义初始基准大小（如`100px`或`auto`），为响应式布局提供弹性基准[^3]。这种灵活的结构使Flex布局成为响应式开发的理想选择，因为它能无缝处理不同屏幕尺寸下的布局重组。 #### 2. Flex布局在响应式开发中的应用在响应式设计中，Flex布局的核心价值在于其“弹性”特性：元素能自动调整大小和位置，无需大量媒体查询。结合其他响应式技术（如rem布局或vw/vh单位），Flex布局能高效实现自适应界面。以下是常见的应用场景和实现方法： - **自适应元素排列**：在响应式布局中，使用`flex-direction: column`在移动端（小屏幕）纵向排列元素，而在桌面端（大屏幕）改用`flex-direction: row`横向排列。这减少了代码冗余，提升维护性[^2]。 - **动态空间分配**：利用`flex-grow`和`flex-shrink`确保元素在屏幕变化时合理伸缩。例如，导航栏中的链接在空间充足时平均扩展（`flex-grow: 1`），在狭窄屏幕时自动收缩（`flex-shrink: 1`），避免布局断裂[^3]。 - **居中和对齐控制**：响应式居中无需绝对定位，只需在父容器设置`display: flex`, `justify-content: center`, and `align-items: center`，即可在任何屏幕中实现水平垂直居中（如引用[4]的示例）。这在响应式设计中被广泛用于卡片、按钮等元素的对齐。 - **组合其他响应式技术**：Flex布局常与媒体查询结合，实现更精细的响应式调整。例如，在移动优先设计中，先基于Flex布局定义基本结构，再用媒体查询针对大屏幕优化`flex-direction`或`justify-content`。 **应用示例：响应式导航栏** 以下是基于Flex布局实现的一个简单响应式导航栏代码（基于引用[3]的示例）。它自动适应屏幕宽度：在小屏幕上元素垂直排列，在大屏幕上横向排列并两端对齐。 ```css /* 父容器设置Flex布局 */ .nav-container { display: flex; flex-direction: column; /* 移动端纵向排列 */ justify-content: space-between; /* 主轴两端对齐 */ align-items: center; /* 交叉轴居中 */ padding: 10px; background-color: #f0f0f0; } /* 子元素设置伸缩属性 */ .nav-item { flex-grow: 1; /* 空间充足时平均扩展 */ flex-shrink: 1; /* 空间不足时收缩 */ padding: 10px; text-align: center; } /* 媒体查询：桌面端切换为横向排列 */ @media (min-width: 768px) { .nav-container { flex-direction: row; /* 桌面端横向排列 */ } } ``` 在这个示例中： - 移动端（小于768px）时，导航项垂直居中排列。 - 桌面端（大于等于768px）时，导航项自动切换为横向排列并分散对齐。 - Flex属性确保元素在各种屏幕下保持美观，无需JavaScript干预，体现了Flex布局在响应式开发中的高效性[^3][^4]。 #### 总结 Flex布局是响应式网页开发的核心工具之一，它通过弹性容器和项目的动态控制，简化了布局实现，并增强了跨设备兼容性。结合其他响应式技术（如媒体查询或rem单位），它能高效处理元素排列、空间分配和对齐问题。实际应用中，建议从简单结构（如居中或导航栏）入手，逐步扩展到复杂布局[^1][^3]。Flex布局虽强大，但对于网格型布局，可结合CSS Grid布局以获得更精细的控制，两者互补能提升整体响应式效果。