Rem

什么是Remrem和em很容易混同，其实两个都是css的单位，并且也都是绝对单位，现有的em，css3才引入的rem，在介绍rem之前，咱们先来理解下em。 em作为font-size的单位时，其代表父元素的字体大小，em作为其余属性单位时，代表本身字体大小——MDN 我在面试时常常问会一道和em无关的题，来看一下面试者对css细节的理解水平，如下，问s1、s2、s5、s6的font-size和line-height别离是多少px，先来想一想，结尾处有答案和解释。<div class="p1"> <div class="s1">1</div> <div class="s2">1</div></div><div class="p2"> <div class="s5">1</div> <div class="s6">1</div></div> .p1 {font-size: 16px; line-height: 32px;}.s1 {font-size: 2em;}.s1 {font-size: 2em; line-height: 2em;} .p2 {font-size: 16px; line-height: 2;}.s5 {font-size: 2em;}.s5 {font-size: 2em; line-height: 2em;} em能够让咱们的页面更灵便，更强壮，比起到处写死的px值，em仿佛更有张力，改变父元素的字体大小，子元素会等比例变动，这一变动仿佛预示了有限可能。有些人提出用em来做弹性布局页面，但其简单的计算让人诟病，甚至有人专门做了个px和em的计算器，不同节点像素值对应的em值，o(╯□╰)o。 em做弹性布局的毛病还在于牵一发而动全身，一旦某个节点的字体大小发生变化，那么其后辈元素都得从新计算，X﹏X。 rem作用于非根元素时，绝对于根元素字体大小；rem作用于根元素字体大小时，绝对于其出初始字体大小——MDN rem取值分为两种状况，设置在根元素时和非根元素时，举个例子：/ 作用于根元素，绝对于原始大小（16px），所以html的font-size为32px/html {font-size: 2rem} / 作用于非根元素，绝对于根元素字体大小，所以为64px /p {font-size: 2rem} rem有rem的长处，em有em的长处，尺有所短，寸有所长，我始终不感觉技术没有什么对错，只有适宜不适宜，有对错的是应用技术的人，卓越与优良的区别就在于是否抉择适合的技术，并让其发挥优势。我始终感觉em就是为字体和行高而生的，有些时候子元素字体就应该绝对于父元素，元素行高就应该绝对于字体大小；而rem的有点在于对立的参考系。Rem布局原理rem布局的实质是什么？这是我问过很多人的一个问题，但失去的答复都差强人意。其实rem布局的实质是等比缩放，个别是基于宽度，试想一下如果UE图可能等比缩放，那该如许美妙啊。假如咱们将屏幕宽度均匀分成100份，每一份的宽度用x示意，x = 屏幕宽度 / 100，如果将x作为单位，x后面的数值就代表屏幕宽度的百分比。p {width: 50x} / 屏幕宽度的50% / 如果想要页面元素随着屏幕宽度等比变动，咱们须要下面的x单位，可怜的是css中并没有这样的单位，侥幸的是在css中有rem，通过rem这个桥梁，能够实现神奇的x通过上面对rem的介绍，能够发现，如果子元素设置rem单位的属性，通过更改html元素的字体大小，就能够让子元素理论大小发生变化html {font-size: 16px}p {width: 2rem} / 32px/ html {font-size: 32px}p {width: 2rem} /64px/ 如果让html元素字体的大小，恒等于屏幕宽度的1/100，那1rem和1x就等价了html {fons-size: width / 100}p {width: 50rem} / 50rem = 50x = 屏幕宽度的50% / ...

说起挪动端适配，经常会想到rem,在这里写两种rem适配计划： 一、自定义配置在rem.scss文件中定义： /**设计稿的宽：$design_width设计稿的高：$design_height需本人定义**/@function px2rem($px) { @return $px / ($design_width / 10) * 1rem;}@function rem2px($rem) { @return $rem * ($design_width / 10) * 1px;}@function px2vh($px) { @return $px / $design_height * 100vh;}@function px2vw($px) { @return $px / $design_width * 100vw;}应用：引入rem.scss @import "./rem.scss";.table { width:px2rem(300); height: px2rem(180); margin: 0 px2rem(16);}二、flexible.js操作步骤： 1.装置lib-flexible.js npm install lib-flexible --save 2.在我的项目入口文件main.js 中引入lib-flexible import 'lib-flexible/flexible' 3.在VScode中装置cssrem插件 4.批改默认字体的大小 在设置中，搜寻框外面输出 cssroot 会显示用户和工作区，如果效果图是750，那这里就改成75，如果是375这里就改成37.5，要让rem单位换算正确； 5.而后就能够应用了

一般来说，做PC端的页面并不像挪动端那样对分辨率及屏幕大小有的特地强的要求，然而针对数据大屏这种展现型的页面来说，就须要思考适配的计划了，毕竟要尽可能的保障大部分的支流显示器都能失常展现。 市面上大部分的显示器简直都是16：9的尺寸，也就是1920 * 1080的分辨率。 现实中的成果当屏幕的尺寸比例刚好是16：9时，页面能刚好全屏展现，内容占满显示器 当屏幕的尺寸比例小于16：9时，页面高低留白，左右占满并高低居中，显示比例放弃16：9 当屏幕尺寸比例大于16：9时，页面左右留白，高低占满并居中，显示比例放弃16：9 当屏幕大小扭转时，动静计算两头内容的显示比例大小，保障内容始终放弃16：9 解决方案remrem(font size of the root element),是 css3 中新增的一个大小单位，即绝对于根元素 font-size 值的大小。 思路就是动静的计算出页面的fontsize从而扭转rem的大小。 思路首先拿 1920 * 1080 的规范屏幕大小为例。将屏幕分为10份，先计算rem的基准值: 1920 / 10 = 192 ,而后把所有元素的长，宽，地位，字体大小等原来的 px 单位全副转换成 rem, 网页加载后，用 js 去计算以后浏览器的宽度，并设置 html 的 font-size 为 (以后浏览器窗口宽度 / 10),这样的话10rem就刚好等于浏览器窗口的宽度。也就能够保障100%宽度，等比例缩放设计稿的页面了。 两件事： 取得 rem 的基准值。这边默认设置容器宽度为1920 * 1080，而后用1920 / 192 来计算rem的值页面内写一段js代码，动静的计算html根元素的font-size实现站在伟人的肩膀上，咱们不须要去从0到1去实现两个需要。 针对第一点： 首先装置 @njleonzhang/postcss-px-to-rem 这个包npm i @njleonzhang/postcss-px-to-rem -D复制代码新建.postcssrc.js配置文件module.exports = { plugins: { autoprefixer: {},"@njleonzhang/postcss-px-to-rem": { unitToConvert: 'px', // (String) 要转换的单位，默认是px。 widthOfDesignLayout: 1920, // (Number) 设计布局的宽度。对于pc仪表盘，个别是1920. unitPrecision: 3, // (Number) 容许 REM 单位增长到的十进制数字. selectorBlackList: ['.ignore', '.hairlines'], // (Array) 要疏忽并保留为 px 的选择器. minPixelValue: 1, // (Number) 设置要替换的最小像素值. mediaQuery: false // (Boolean) 容许在媒体查问中转换 px.}}}复制代码配置实现后，页面内的px就会被转换成rem了针对第二点： ...

1.开发环境 vue2.电脑系统 windows10专业版3.在应用vue开发挪动端的过程中,咱们会因为兼容性而头疼,上面我来分享分享上面vue应用rem自适配,心愿对你有所帮忙。4.废话不多说,间接上操作: //装置 postcss-pxtoremnpm i postcss-pxtorem -S5.在src目录新建rem文件夹,上面新建rem.js,增加如下代码: //基准大小const baseSize = 37.5// 设置 rem 函数function setRem() { const salepro = document.documentElement.clientWidth / 750 // 以后页面宽度绝对于 750 宽的缩放比例，可依据本人须要批改. // 设置页面根节点字体大小 document.documentElement.style.fontSize = (baseSize * Math.min(salepro, 2)) + 'px'}// 初始化setRem()// 扭转窗口大小时从新设置 remwindow.onresize = function () { setRem()}6.在我的项目根目录新建 .postcssrc.js,增加代码如下: module.exports = { "plugins": { "postcss-pxtorem": { "rootValue": 37.5, "propList": ["*"] } }}留神:我在配置中,比例是1:1,也就是设计图宽是750px,你在css中间接写width:750px;就能够啦,不必进行换算,是不是很棒。7.在main.js中引入 import '@/rem/rem.js'8.在vue模板中应用,css中增加如下代码: <style lang="scss" scoped>.about { width: 750px; height: 100vh; box-sizing: border-box; background-color: blue !important; .kk { width: 350px; height: 350px; background-color: red; }}</style>9.效果图如下:10.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。 ...

技术选型计划：采纳独自制作挪动端页面技术选型：rem适配布局（less+ rem+ 媒体查问） 采纳750px设计尺寸 步骤1.搭建相干文件夹构造 2设置视口标签及引进css初始化款式 <!-- 设置视口标签 --> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <!-- 引进css初始化款式 --> <link rel="stylesheet" href="./css/normalize.css">3.新建common.less文件新建commem.less文件，设置好常见的尺寸，利用媒体查问设置不同的html字体大小关怀的尺寸有320px,360px,375px,384px,400px,414px,424px,480px,540px,720px,750px划分的分数设置为15等份pc端设置的html字体为50px(写在最下面)4.新建index.less文件新建index.less文件 指的是首页的款式将方才设置好的common.less文件导入index.less外面。最初把index.css文件引入html文件中@import 'common';