-
2022-04-30 21:28:07
rem布局 学习rem 先学em
1.em 是指父元素的字体大小
2.rem 是指html的字体大小
3.rem 布局是用 媒体查询来改变(js改变)HTML的字体大小来实现自适应
rem 的优点就是可以通过修改html里面的文字大小来改变页面中元素的控制大小rem其实不是布局 是单位
rem适配方案原理 (动态更改html的字体大小)布局方式有两种
- rem+媒体查询
- js+rem
rem+媒体查询 (动态设置方法)
- 假设我们的设计稿是750
- 假设我们把整个屏幕划分为15份(划分的份数可以是10或者20)
- 每一份作为HTML字体大小,这里是50px 750/15= 50
- 那么在320px设备的时候,字体大小是320/15=31.33px
- 用我们页面元素的大小除以不同的HTML字体大小会发现他们比例是相同的(比如要个100px的盒子就是 100px/50字体=2rem,用100px/31.33字体=3.1rem 多是100px的盒子)
- 比如我们以750为标准设计稿
- 一个100*100像素的页面元素在750屏幕下,就是100/50 转换为rem 是 2rem*2rem 比例是 1比1
- 320屏幕下,html字体大小为21.33 则 2rem = 42.66px 此时宽和高都是 42.66 但是 宽和高的比例还是 1比1
- 但是已经能实现不同屏幕下,页面元素盒子等比例缩放的效果
元素大小取值方法、
- 最后公式:页面元素的rem值 = 页面元素值 px / (屏幕宽度 / 划分的份数)也就是HTML字体大小
- 屏幕宽度 / 划分的份数 就是 html font-size的大小
- 或者:页面元素的rem值 = 页面元素值px / html font-size 的大小
方法
rem + 媒体查询 实现元素动态大小变化 * { margin: 0px; padding: 0px; } @media screen and (min-width: 320px) { <!-- <= --> html { font-size: 50px; } } @media screen and (min-width: 640px) { <!-- <= --> html { font-size: 100px; } } .top { height: 1rem; font-size: 0.5rem; color: #fff; text-align: center; line-height: 1rem; background-color: pink; }
js+rem
- 比较简单(因为用了js)
- 我们只用设置 页面元素的px值 / 75 就行 (因为js算好了 HTML的字体大小 但是他是除10的)
js代码
(function flexible (window, document) { var docEl = document.documentElement var dpr = window.devicePixelRatio || 1 // adjust body font size function setBodyFontSize () { if (document.body) { document.body.style.fontSize = (12 * dpr) + 'px' } else { document.addEventListener('DOMContentLoaded', setBodyFontSize) } } setBodyFontSize(); // set 1rem = viewWidth / 10 function setRemUnit () { var rem = docEl.clientWidth / 10 docEl.style.fontSize = rem + 'px' } setRemUnit() // reset rem unit on page resize window.addEventListener('resize', setRemUnit) window.addEventListener('pageshow', function (e) { if (e.persisted) { setRemUnit() } }) // detect 0.5px supports if (dpr >= 2) { var fakeBody = document.createElement('body') var testElement = document.createElement('div') testElement.style.border = '.5px solid transparent' fakeBody.appendChild(testElement) docEl.appendChild(fakeBody) if (testElement.offsetHeight === 1) { docEl.classList.add('hairlines') } docEl.removeChild(fakeBody) } }(window, document))
小推荐
vscode cssrem插件 px转换rem 就不用算了 但要改一下vscode编辑器的字体大小 改为页面的字体大小就行
更多相关内容 -
rem布局原理解析
2020-12-14 03:35:17rem是现在主流的移动端自适应布局方案,本文主要介绍了rem布局的原理和通用方案 原理 首先说一下,我们想要达到的自适应效果是什么。很简单:元素、字体大小能随着屏幕大小(一般相对于宽度来说)变化而变化,在大... -
vue 实现 rem 布局或vw 布局的方法
2020-10-16 00:18:40主要介绍了vue 实现 rem 布局的 或者 vw 布局的方法,本文给提供多种方法,需要的朋友可以参考下 -
移动端REM布局与ViewportVW布局的实例运用
2019-08-10 08:08:40移动端 REM布局 与 Viewport (VW) 布局的实例运用 -
vue中使用rem布局代码详解
2020-12-13 12:53:521、npm i amfe-flexible 2、import ‘amfe-flexible‘ 然后再,安装postcss-px2rem...rem布局由于其根据屏幕宽度的改变修改相应的rem与px的转换比例,这样非常适合移动端的项目。 在不同的分辨率下,都会有较好的显示 -
JavaScript中rem布局在react中的应用
2021-01-19 15:24:19REM布局实例代码 var fontSizeInit = function() { var doc = document.documentElement, cli = doc.clientWidth; cli&&(cli/=320,2<cli&&(cli=2),doc.style.fontSize=16*cli+px); } font -
rem 布局
2021-06-20 09:00:01rem布局 rem单位 rem(root em)是一个相对单位,基准是相对html元素字体大小,类似em(父元素字体大小) 比如,根元素(html)设置font-size=12px,非根元素设置width:2rem;,转换成px就是24px。 rem的优势:父元素...rem布局
rem单位
- rem(root em)是一个相对单位,基准是相对html元素字体大小,类似em(父元素字体大小)
- 比如,根元素(html)设置font-size=12px,非根元素设置width:2rem;,转换成px就是24px。
- rem的优势:父元素文字大小可能不一致,但是整个页面只有一个html,可以很好的来控制整个页面的元素大小比例。
媒体查询
媒体查询(Media Query)是CSS3新语法。
- 使用@media 查询,可以针对不同的媒体类型定义不同的样式
- @media 可以针对不同的屏幕尺寸设置不同的样式
- 当重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面
- 目前针对很多苹果手机、Android、平板等设备都用得到多媒体查询
媒体查询语法规范
- 用@media 开头,注意@ 符号
- mediatype媒体类型
- 关键字 and not only
- media feature 媒体特性,必须有小括号包含
@media mediatype and|not|only(media feature) {CSS-Code;}
mediatype 媒体类型
将不同的终端设备划分成不同的类型,称为媒体类型
值 解释说明 all 用于所有设备 print 用于打印机和打印预览 screen 用于电脑屏幕、平板电脑、智能手机等 关键字
关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。
- and:可以将多个媒体特性连接到一起,相当于“且”的意思
- not:排除某个媒体类型,相当于“非”的意思,可以省略
- or:可以测试多个媒体查询的条件,主要有一个条件成立,就执行,“或”的意思。
- only:指定某个特定的媒体类型,可以省略。
媒体特性
每种媒体类型都有具体个字不同的特性,根据不用媒体类型的媒体特性设置不同的展示风格。媒体特性要加小括号进行包含。
值 解释说明 width 定义输出设备中页面可见区域的宽度 min-width 定义输出设备中页面最小可见区域的宽度 max-width 定义输出设备中页面最大可见区域宽度 在屏幕设备中,判断屏幕尺寸大于等于800px的时候 @media screen and (min-width: 800px) { body { background-color: pink; } } 在屏幕设备中,判断屏幕尺寸最大为600px的时候屏幕为绿色 @media screen and (max-width: 600px) { body { background-color: green; } }
案例
屏幕小于等于539px时,背景为蓝色;屏幕大于等于540px并且小于969px时,屏幕为绿色;当屏幕大于等于970px 时,屏幕为红色。
@media screen and (max-width: 539px) { body { background-color: blue; } } @media screen and (min-width: 540px)and (max-width: 969px) { body { background-color: green; } } @media screen and (min-width: 970px) { body { background-color: red; } }
媒体查询+rem实现元素动态大小变化
- rem单位是跟着html来走的,有了rem 页面元素可以设置不同大小尺寸
- 媒体查询可以根据不同设备宽度来修改样式
- 媒体查询+rem就可以实现不同设备宽度,实现页面元素的动态大小
媒体查询第二种引入方式
引入资源
-
当样式比较繁多的时候,我们可以针对不用的媒体使用不同stylesheets(样式表)。
-
原理,就是直接在link中判断设备的尺寸,然后引用不同的css文件。
-
语法规范
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
- 示例
<link rel="stylesheet" href="styleA.css" media="screen and (min-width:400px)">
维护css弊端
css是一门非程序式语言,没有变量、函数、SCOPE(作用域)等概念
- css需要书写大量看似没有逻辑的代码,css冗余度是比较高的。
- 不方便维护及扩展,不利于复用
- css没有很好的计算能力
- 非前端开发工程师来讲,往往会因为缺少css编写经验而很难写出组织良好且易于维护的css代码项目
Less
less介绍
- Less(Leaner Style Sheets)是一门css扩展语言,也称为css预处理器
- 作为css的一种形式的扩展,它并没有减少css的功能,而是在现有的css语法上,为css加入程序式语言的特性
- 它在css的语法基础之上,引入了变量、Mixin(混入)、运算以及函数等功能,大大简化了css的编写,并且降低了css的维护成本,就像它的名称所说的那样,Less可以让我们用更少的代码做更多的事
Less中文网址: http://Lesscss.cn/
常见的css预处理器:Sass、Less、Stylus
总结:Less是一门css预处理语言,它扩展了css的动态特性。Less使用
新建一个后缀名为.less的文件,在这个.less文件里书写less语句
- Less 变量
- Less 编译
- Less 嵌套
- Less 运算
Less变量
- 变量是指没有固定的值,可以动态改变的。因为css中的一些颜色和数值等经常使用
- @变量名:值;
- 变量命名规范
- 必须有@为前缀
- 不能包含特殊字符
- 不能以数字开头
- 大小写敏感
例如:
@pink:pink; div { background-color: @pink; }
- 变量使用规范
Less编译
- 本质上,Less包含一套自定义的语法以及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的css文件。
- 所以,我们需要把我们的.less文件,编译生成为.css文件,这样我们的html页面才能使用它
- 推荐方法(nodejs):在当前文件夹,使用cmd命令“lessc style.less>style.css"
- 使用Vscode插件可直接转换
Less嵌套
- 后代选择器
div { width: 500px; height: 400px; background-color: yellow; .box { height: 200px; background-color: green; } }
- 在前面加上&符号,表示两个选择器交集或伪类。
- a 里面加上&.box,就表示选中的是有box类名的a标签。
- :hover前加&符,表示a的hover,不加则是a内元素的hover。
.nav { width: 200px; height: 200px; background-color: #fff; a { display: block; width: 100px; height: 100px; background-color: blue; &.box { background-color: pink; } &:hover { color: yellow; } } }
Less运算
- 任何数字、颜色或者变量都可以参与运算。Less提供了加(+)减(-)乘(*)除(/) 算数运算。
- 除法运算时需要()括起来或者./这么写,不然系统会默认我们写的是两个值,将不会生效。(推荐使用小括号,./是强制除法,可能会出现错误)
- 当有两个单位时候,取值第一个单位,200rem ./ 50px 结果是4rem(后面的数字不写单位也可以),如果只有一个值有单位,就取该单位。
- 运算符号左右需要加空格
div { width: 100px + 20px; height: (200px / 2); height: 200rem ./ 50px; height: 200rem ./ 50; background-color: orange; }
rem适配方案
- 让一些不能等比自适应的元素,达到当设备尺寸发生改变的时候,等比例适配当前设备。
- 使用媒体查询根据不同设备按比例设置html的字体大小,然后页面元素使用rem做尺寸单位,当html字体大小变化元素尺寸也会发生变化,从而达到等比缩放的适配。
rem适配方案技术使用(市场主流)
-
技术方案一
- less
- 媒体查询
- rem
-
二
- flexible.js
- rem
总结
- 两种方案现在都存在
- 方案二更简单
rem实际开发适配方案1
rem+媒体查询+less技术
设计稿常见尺寸宽度
设备 常见宽度 iphone4、5 640px iphone678 750px Android 常见320px、480px、540px 600px 720px 768px 800px 1080px (目前市场主流设备 尺寸按照1080px设计) 一般情况下,我们一一套或两套效果图适应大部分 的屏幕,放弃极端屏或对其优雅降级,牺牲一些效 果,现在基本以750为准。
动态设置html标签font-size大小
- 假设设计稿是750px
- 假设我们把屏幕划分为15等份(划分标准不一定,可以是20份也可以是10等份)
- 每一份作为html字体大小,这里就是50px
- 那么在320px设备的时候,字体大小就是320/15 就是21.33px
- 用我们页面元素的大小除以不同的html字体大小会发现他们比例还是相同的
以750标准设计稿为例:
- 一个100*100像素的页面元素在750屏幕下,就是100/50,转换为rem是2rem*2rem ,比例是1比1
- 320屏幕下,html字体大小为21.33则2rem=42.66px,此时宽和高都是40.66,但是宽和高的比例还是1比1
- 但是已经能实现不同屏幕下页面元素盒子等比例缩放的效果
公式
- 页面元素的rem值=页面元素值(px)/(屏幕宽度/划分的份数)
- 屏幕宽度/划分的份数 就是html font-size字体大小
- 页面元素的rem值=页面元素值(px)/html font-size字体大小
-
SuNing(rem布局).zip
2021-04-18 11:51:16rem布局实现苏宁移动端(仿写) -
rem:移动端rem布局
2021-05-09 16:13:18移动端rem布局rem:相对长度单位。相对于根元素(即html元素)font-size计算值的倍数 ./js/rem.js中 默认设计稿宽度为640 1rem =100px 可自行修改HOW TO USE设置移动端网页专用的viewport meta,至少需要包含width=... -
rem布局案例
2019-03-29 19:43:13使用了less和rem结合的仿照京东手机端的一个小案例demo -
Rem布局
2020-03-08 18:45:34Rem布局?什么东西???Rem布局又称等比缩放布局,是移动端布局中常用的一种布局方式。Rem布局可以通过两种方式实现,一种通过JavaScript实现;还有一种通过vw实现。在这里小编主要讲述第二种方式。 下面小编先简单...Rem布局?什么东西???Rem布局又称等比缩放布局,是移动端布局中常用的一种布局方式。Rem布局可以通过两种方式实现,一种通过JavaScript实现;还有一种通过vw实现。在这里小编主要讲述第二种方式。
下面小编先简单的说一下rem布局的优缺点:
优点:在不同的设备下看起来比较协调,内容会随着设备屏幕的大小进行等比缩放。
缺点: 随着屏幕的变大或缩小不会展现更多的内容。
它的优缺点小编就说的这里,下面进入重点rem布局原理:正所谓敌不动我不动,rem布局就是采用这样的战术手法。使页面元素动态化,在不同的设备上显示的元素比例也是一样的。就比如,现在拥有一台横向屏幕分辨率为375px的设备,在其中放上一张100100px的图片,使用Rem布局过后,在另外一台横向屏幕分辨率为414px的设备,这张照片的大小就变成了110px110px。这样就可以适配在不同的设备中进行等比缩放。
小编说了那么多还不如实例来的痛快,下面进入编程状态:
小伙伴们是否会对图中的vw、rem这些单位疑惑,小编将细解这些单位:
Rem:是一个相对单位,1rem等于根元素的font-size值,1rem == 1个根元素的font-size大小 就是 1个html标签的font-size大小。
vw: view width,也是一个相对单位。但是它表示为把屏幕自动分成了100vw宽。
vh : view height,表示为把屏幕自动分成了100vh高。
100vw就等于屏幕宽的100%,如图:
那么1vw就等于屏幕宽的1%。
假设屏幕是375px那么就等于100vw 所以 1vw = 3.75px。那么100px=26.66667vw。图1中1rem=26.66667vw=100px。
假设屏幕是414px那么就等于100vw 所以 1vw = 4.14px。那么110px=26.66667vw(100px=24.154589)。图2中1rem=26.66667vw=110px。
小编今天的分享就结束了。逆战班加油! -
cube-rem-demo:具有cube-ui和rem布局的演示
2021-05-02 15:03:40cube-rem-demo a cube-ui demo with rem layout Build Setup # install dependencies(安装依赖) npm install # serve with hot reload at localhost:8080(开发环境) npm run dev # build for production with ... -
rem布局实现不同分辨率移动终端的自适应、整体缩放
2020-03-04 09:10:27rem布局实现不同分辨率移动终端的自适应、整体缩放。另外界面UI也很不错哦! 本附件相关博文地址:http://blog.csdn.net/irokay/article/details/78935838 -
网页布局之 - rem布局
2022-04-21 17:44:21一、rem布局是什么? 相对单位,相对于HTML标签字号计算尺寸 1rem = 1HTML标签字号 给HTML标签添加字号 设置元素尺寸为rem单位 效果展示: 代码如下: <head> <meta charset="UTF-8"> ...实现在不同宽度的设备中,网页元素尺寸等比缩放效果
目录
一、rem布局是什么?
相对单位,相对于HTML标签字号计算尺寸
1rem = 1HTML标签字号
-
给HTML标签添加字号
-
设置元素尺寸为rem单位
效果展示:
代码如下:
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>rem基本使用</title> <style> * { margin: 0; padding: 0; } /* 1rem=1根字号的大小 */ /* 1.html有字号 */ /* 2.盒子添加尺寸,单位是rem */ html { font-size: 20px; } .box { width: 5rem; height: 3rem; background-color: #ccc; } </style> </head> <body> <div class="box"></div> </body>
二、媒体查询基本使用
@media (视口宽度) {
差异化CSS样式
}
效果展示:
代码如下:
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 设备宽度不同,根字号不同 */ /* 如果检测到 设备的宽度是320的时候 大括号的css才生效 */ @media (width :320px) { html { font-size: 32px; } body { background-color: #ccc; } } @media (width :375.2px) { html { font-size: 40px; } body { background-color: pink; } } </style> </head> <body> </body>
三、rem布局流程
1.媒体查询添加根字号
@media (视口宽度) {
html {
font-size: 37.5px;
}
}
效果及代码展示:
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>rem适配</title> <style> * { margin: 0; padding: 0; } /* 原则:rem:根字号=视口的宽度1/10 */ /* 320,375,414 */ @media (width: 320px) { html { font-size: 32px; } } @media (width: 375.2px) { html { font-size: 37.5px; } } @media (width: 414.4px) { html { font-size: 41.4px; } } .box { width: 5rem; height: 3rem; background-color: #ccc; } </style> </head> <body> <div class="box"></div> </body>
2.flexible添加根字号
<script src="flexible.js"></script
效果展示:
html代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>rem开发流程</title> <link rel="stylesheet" href="./demo.css"> </head> <body> <div class="box"></div> <script src="../js/flexible.js"></script> </body> </html>
css代码段:
/* box 68*29 */ /* 1.媒体查询,设置不同设备的根字号 */ /* @media (width: 320px) { html { font-size: 32px; } } @media (width: 375.2px) { html { font-size: 37.5px; } } @media (width: 414.4px) { html { font-size: 41.4px; } } */ /* 2.写box的盒子模型,单位rem */ .box { width: 1.813rem; height: 0.773rem; background-color: #ccc; }
-
-
rem布局原理,rem自适应布局,rem布局快速方案
2021-06-10 08:19:02rem原理和简介(1).字体单位单位的值是根据html根元素大小而定,同样可以作为宽度高度单位(2).适配原理将px替换为rem,动态修改html的font-size适配(3).单位1rem=16px,why? F12中1rem在computed中font-size属性中会显示... -
Rem布局的原理解析
2020-01-13 15:51:21Rem布局的原理解析 tobAlier关注 22017.10.25 11:27:32字数 2,630阅读 12,367 什么是Rem rem和em很容易混淆,其实两个都是css的单位,并且也都是相对单位,现有的em,css3才引入的rem,在介绍rem之前,我们先... -
移动端Web开发 流式布局、flex布局、rem布局
2021-09-26 20:30:50文章目录移动端Web开发流式布局flex布局布局原理常用属性rem布局rem基础媒体查询less 移动端Web开发 流式布局 在PC端进行网页制作时,经常使用固定像素的网页布局,但这种布局方式对小屏幕的设备不友好。为了适应小... -
使用Rem布局实现自适应
2020-11-21 19:40:06我们希望在任何一个设备中的呈现比例都与视觉稿中一样,根据布局视口宽度等比缩放。 在移动端我们一般会设置布局视口宽度=设备宽度,即内容呈现的区域在设备屏幕内。 <meta name="viewport" content="width=... -
移动端rem布局的两种实现方法
2020-12-03 13:28:22据了解,现在有两种rem布局的样式控制,其中一种是通过css的媒体查询,另外一种是通过引入js来控制,这两种方法各有各的优点,但是我还是喜欢用引入js的方法来实现rem布局,尽管现在市面上大多数都在使用css媒体查询... -
简述弹性盒子 flex 布局及 rem 布局
2022-05-27 14:01:29rem简介: rem 是 CSS3 新增的一个相对单位,相对于根节点(html)字体大小的值,r 就是 root html{font-size:10px} 则 2rem=20px 通过它就可以做到只修改根元素的大小,就能成比例地调整所有的字体大小,只依赖 html... -
移动端常见布局总结(三)——rem布局
2021-02-24 12:53:53思考一下问题,有便于下面学习rem布局。 页面布局文字能否岁屏幕的大小变化而变化? 流式布局和flex布局主要针对于宽度布局,那高度如何设置?(之前都是写死的高度) 怎样让屏幕发生变化的时候元素高度和宽度等... -
Vue 使用 rem布局
2021-10-14 17:59:32Vue 使用 rem布局 1、rem布局需要安装两个插件 npm i lib-flexible -S npm i postcss-pxtorem -D lib-flexible: 根据移动端屏幕大小而对应改变html的fontSize postcss-pxtorem: 根据html的fontSize将px单位改变... -
面试常问:rem布局,flex布局等
2022-06-06 14:29:42目录 1、rem布局 2、flex布局 3、媒体查询-响应式布局 4、event loop 5、宏任务/微任务 6、async/await 8、Promise.all 9、dataset 10、事件代理 1、rem布局 html{font-size: 16px} div{font-size: 1rem} 这里的... -
JavaScript-rem布局
2021-11-23 19:35:41JavaScript-rem布局 一、什么是Rem rem和em很容易混淆,其实两个都是css的单位,并且也都是相对单位,现有的em,css3才引入的rem,在介绍rem之前,我们先来了解下em: em作为font-size的单位时,其代表父元素的字体...