移动端之rem布局

最新推荐文章于 2023-11-17 10:25:30 发布

HarkerYX

最新推荐文章于 2023-11-17 10:25:30 发布

阅读量210

点赞数

分类专栏：【 Web前端开发】

本文链接：https://blog.csdn.net/yexiangCSDN/article/details/116591709

版权

【 Web前端开发】专栏收录该内容

190 篇文章 5 订阅 ¥199.90 ¥299.90

订阅专栏

本文介绍了移动端的rem布局，包括rem的基础概念，相对于html元素字体大小的相对单位，以及其优势。还讲解了多媒体查询的使用，如何根据屏幕尺寸设置样式。此外，讨论了rem适配方案，通过动态设置html的font-size和媒体查询实现元素的等比缩放。最后提到了两种技术方案，包括使用less和flexible.js，并提供了计算页面元素rem值的公式。

摘要由CSDN通过智能技术生成

我是表哥Harker，表妹我来咯~

前面讲解过了流式布局和flex布局，每个布局也练习了一个小网页，今天介绍 rem布局，也是非常常用的布局，努力加油！

1、rem 基础

rem (root em)是一个相对单位，类似于em，em是相对父元素字体大小
不同的是rem的基准是相对于html元素的字体大小
比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px
rem的优势：父元素文字大小可能不一致，但是整个页面只有一个html，可以很好来控制整个页面的元素大小

/* 根html 为 12px */
html {
    font-size: 12px;
}
/* 此时 div 的字体大小就是 24px */
div {
    font-size: 2rem;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="U

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

HarkerYX

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

订阅专栏

移动WEB开发 rem适配布局

Ulrica_Amaris的博客

03-19

348

rem基础 rem 单位 rem (root em)是一个相对单位，类似于em，em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。 <style> div { font-size: 12px; } p { width: 10em; /*120px*/ height: 10em;

移动WEB开发之rem布局--rem适配方案

薛定谔的猫

12-05

385

思考1. 我们适配的目标是什么？ 2. 怎么去达到这个目标的？ 3. 在实际的开发当中使用？答案1. 让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。2. 使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配。① 按照设计稿与设备宽度的比例，动态计算并设置 html 根标签的 font-size 大小；（媒体查询） ② CSS 中，设计稿元素的宽、高、相对位置等取值，按照同

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

移动端的花式自适应方法

joinzhu的博客

04-11

272

1：来自鑫大王的 calc() + vw + rem 方法转： http://www.zhangxinxu.com/wordpress/2016/08/vw-viewport-responsive-layout-typography/ ！：经测试 pc端除去火狐均能完美支持，移动端完美支持<style type="text/css">...

web页面适配移动端之rem

qq_41199601的博客

01-17

320

适配问题现在很多页面动不动就要多端适配，开发过程中也很是无奈，但是为了混口饭吃也没有办法，对于移动端适配问题，也算实践了一两次，采用的rem来进行适配（对于vue的uni-app和react的rn的话，就不做讨论了。），本人也是菜鸟一枚，谢谢。 px，em，rem px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 em是相对长度单位。相对于当前对象内文本的字体尺寸...

移动web开发之rem适配布局

qq_43477251的博客

10-28

364

一、rem布局 1、rem单位 rem（root em）是一个相对单位，类似于em，em是父元素字体大小 rem的基准是相对于<html>元素的字体大小比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 转换成px表示就是24px 优势：父元素文字大小可能不一致，但是整个页面只有一个<html>，可以很好地来控制整个页面的元素大小比例 * { margin: 0; padding: 0; } html { fo

移动端REM布局与ViewportVW布局的实例运用

08-10

**一、REM布局** 1. **REM（Root Em）介绍** REM是以根元素（通常是html元素）的字体大小为单位的长度单位。通过调整根元素的字体大小，可以实现整个页面的响应式设计。这种方式允许开发者设定一个基准值，然后...

remLayout:移动端基于rem布局的demo页

06-21

移动端基于rem布局的demo页页面布局计算的时候,比如设计稿为640px的宽度,那么计算的基数就是640/16=40px 一个banner宽度为640px的时候,对应的rem单位就是 16rem,无需考虑移动端各种屏幕大小需要注意的是当像素在...

移动端使用rem布局那些事

08-10

在移动端Web开发中，rem（root em）布局是...总的来说，移动端使用rem布局是提升页面响应性和可维护性的有效手段，但需要注意兼容性、适配性和性能优化。通过熟练掌握rem，开发者可以更好地应对多样化的移动设备环境。

详解H5 活动页之移动端 REM 布局适配方法

09-27

本文将深入探讨移动端REM布局的适配方法，这是H5活动页实现响应式设计的关键技术。首先，我们需要理解什么是REM（Root EM）。REM是一个相对于根元素（通常是html元素）font-size的长度单位。这意味着，如果我们...

移动端rem布局——初始化html, fontSize

weixin_44117096的博客

12-23

241

自执行函数： window.onresize = function(){ +function(){ var deviceWidth = document.documentElement.clientWidth; if(deviceWidth > 750) deviceWidth = 750; document.documentElement.style.fontSize...

移动端rem布局初始化js代码,rem.js工作可用

业余前端的职业经历

04-16

713

1.在你写移动端页面的时候就应该想清楚为什么要用 rem 为啥不用px,因为px是定死的宽高,不管哪种设备宽高的显示效果都是一样的。这样就出现问题了,如果我们在750px手机上写一个 400px宽度div 可能刚好合适但是在650px宽度的手机上呢是不是有点长了所以在设备宽度变小的情况下 750px手机上的元素都应该按比例的缩小一点才能达到和750px 上面一样的显示效果这个时候就...

移动端适配rem,自动适应布局,rem的俩种计算方式JS与CSS

qq_30378295的博客

04-04

1937

rem是基于html(根节点)的font-size字体大小来决定如1rem=16px 计算方式屏幕宽度与设计图宽度来动态计算html的font-size这样就能做到大部分移动设备的页面兼容计算尺寸参照的标准尺寸 750px rem布局换算1rem=100px，设计图上100px=1rem来表示 JS 个人推荐一位大佬(博客)的写法 /* 作者:helang 此版本应用于 750px尺寸的 iOS 设计稿 rem计算方式：设计图尺寸px / 100 = 实际rem 【例: 1

移动端开发使用rem时动态设置html的字体大小

前端小白的逆袭

01-05

1664

移动端开发使用rem时动态设置html的字体大小

移动端布局-rem适配布局

weixin_49455047的博客

12-12

900

一.rem基础 rem单位 rem（root em）是一个相对单位，类似于em，em是父元素字体大小不同的是rem的基准是相对于html元素的文字大小比如根元素（html）设置flont-size=12px；非根元素设置width：2rem，则换成px表示就是24px em单位，在当前元素设置了font-size时,以当前元素为参照，当前元素没有设置font-size，则以父元素为参照二.媒体查询 2.1什么是媒体查询媒体查询（media query）是css3新语法使用@m

Html5移动端页面自适应布局详解(阿里rem布局)

weixin_30565327的博客

12-14

890

在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport,通读网上的各种对于viewport的解释之后大概viewport可以理解为三种 1。layout viewport,也就是这个浏览器默认的viewport 2。visual viewport,浏览器可视区域viewport 3。ideal viewport ,移动设备的理想viewpo...

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

weixin_46127956的博客

11-07

1319

关于rem布局的基础知识

【Nuxt】Nuxt3 响应式方案：rem、vw