公司内部一直有大屏的需求，也一直再做，中途也踩了一些坑，但是没有认真的来总结下。首先项目中，做过移动端的适配，也有现在的大屏需求，中间都离不开不一个单位rem，自适应看起来就很麻烦，不过无惧困难，困难才会看到你说，哟，厉害了，我闪~，下面慢慢聊来。浅析rem首先rem是css单位，相比于px固定的像素单位，rem更加的灵活，还有现在也比较好的vm。如果从未了解过，可以先过过眼rem自适应。CSS3
1.src下新建rem.js(function(window, document) { // 给hotcss开辟个命名空间，别问我为什么，我要给你准备你会用到的方法，免得用到的时候还要自己写。 const hotcss = {};(function() { // 根据devicePixelRatio自定计算scale // 可以有效解决移动端...
原创
2023-01-03 14:58:05
379阅读
vue.js开发移动端项目时，使用rem布局做页面自适应
原创
2018-01-04 16:48:14
10000+阅读
rem布局的概念，用途，用法和扩展内容
rem布局1.rem布局是什么？font size of the root element.rem就是相对于根元素<html>的font-size来做计算2.为什么要使用rem布局？ 使用 rem 单位能够控制元素整体等比放大缩小，而不是固定大小。 使用这种灵活性，在开发期间，能更加快速灵活的调整，允许
为什么需要rem布局？移动端设备很多，每个尺寸不一样，前端写的页面要在不同设备上进行展示，为了使页面在不同的移动设备上展示时不走样，需要一种布局，能在不同设备上进行缩放，以达到上述要求。为什么rem布局是用html标签的font-size呢？（这个问题很蠢，但是还是记录下来吧） 因为html标签的font-size的大小就是1rem，1rem指的是html标签的font-size大小。所以不用其他
移动web开发之rem布局rem基础rem单位rem (root em)是一个相对单位，类似于em，em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。/* 根html 为 12px */
html {
font-size: 12px;
}
/*
rem布局em和rem的认识在布局中，除了px之外，还有两个常见的单位，em和remem： 相对于当前元素的字体大小→ 1em = 当前标签的font-sizerem： 相对于根元素（html）的字体大小→ 1rem = html标签的font-size浏览器默认的font-size的大小为16pxrem布局的效果：屏幕越大，标签就越大屏幕越小，标签就越小rem布局的原理：通过媒体查询的方式动态改
2021/3/25
vue的基本
使用 <head>
<!-- 1.先引入
vue核心文件-->
<script src="
vue.js"></script>
</head>
<body>
<!--在el属性对象的标签中 填写正确的
vue语法展示或者控制数据-->
<div id="app">
移动web开发之rem布局rem 单位 rem (root em) 是一个相对单位,类似于em, em 是父元素字体大小不同的是rem的基准是相对于html元素的字体大小rem使用:比如,根元素(html)设置font-sizi=12px ,非根元素设置width:2rem,则换成px表示就是24px./* 根html 为 12px */html { font-size: 12px;}/*
转载
2021-05-07 11:47:16
251阅读
2评论
Vue中如何进行移动端适配与响应式布局？如今，移动端适配与响应式布局已经成为Web开发中不可或缺的一部分。Vue.js作为一款流行的JavaScript框架，也提供了许多有用的工具和技术来实现移动端适配和响应式布局。在这篇文章中，我们将讨论如何在Vue.js中进行移动端适配与响应式布局，包括媒体查询、flexbox布局和第三方库等技术。移动端适配移动端适配是指将网页适配到不同尺寸的移动设备上，以提
em单位 em是相对于父元素的字体大小来说的 小demo div { font-size: 12px; } div p { width: 10em; height: 10em; background: pink; } <div> <p>dd</p> </div> p的大小是基于父盒子的字体大小来说的
转载
2021-02-05 22:25:00
137阅读
2评论
1，rem的原理rem：是css的一个相对单位 相对于html根元素，
可以通过监测屏幕大小改变html的字体大小从而实现自适应大小的效果，相对于根元素(即 html 元素)font-size 计算值的倍数。先按定高宽设计出来页面，然后转换为rem单位，实现完美自适应。例： a 标签的 font-size 值为 0.5rem，实际就是 100px*0.5 = 50px。2，什么是动态布局就是移动端
在页面引入这段js代码(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' :
原创
2021-06-29 10:17:13
247阅读
在页面引入这段js代码(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () {
原创
2021-06-29 10:17:13
84阅读
优点： 在屏幕分辨率千差万别的时代，只要将rem与屏幕分辨率关联起来就可以实现页面的整体缩放，使得在设备上的展现都统一起来了。 而且现在浏览器基本都已经支持rem了，兼容性也非常的好。缺点： （1）在奇葩的dpr设备上表现效果不太好，比如一些华为的高端机型用rem布局会出现错乱。 （2）使用iframe引用也会出现问题。 （3）rem在多屏幕尺寸适配上与当前两大平台的设计哲学不一致。即大屏的出现到
原创
2022-03-25 10:32:05
799阅读
安装 amfe-flexible、postcss-px2rem-exclude
cnpm i amfe-flexible postcss-px2rem-exclude --save
安装完毕，会在 package.json 文件的 dependencies 属性中看到如下：
2、在main.js文件中引入
import 'amfe-flexible'
3、配置postcss
转载
2021-08-13 09:29:23
226阅读
1. 什么是rem rem是CSS3新增的一个相对单位（root em，根em） 类似于em，em是相对父元素字体大小 不同的是rem的基准是相对于html元素的字体大小 /* 根html 为 12px */ html { font-size: 12px; } /* 此时 div 的字体大小就是 2 ...
转载
2021-07-27 17:55:00
111阅读
2评论
主要
布局：<!--盒子-->
<div class="box">
<!--内容-->
<div class="content">11111</div>
<div class="content">22222</div>
<div class="content
rem：相对于根元素(即 html 元素)font-size 计算值的倍数。通俗的说，1rem = html 的 font-size 值这段代码。a 标签的 font-size 值为 0.5rem，实际就是 100px*0.5=50px。html{font-size:100px;} a{font-size:.5rem;}如何使用 rem 进行布局？1.标签的 rem 单位的值怎么计算通过使用 rem + js 改变 html 标签的 font-size（整体缩放）实现兼容性更高的页面.
原创
2021-07-14 17:40:15
817阅读
本文简单介绍一下vue项目移动端的rem适配准备。首先移动端肯定用的是vant组件库，在开发移动端之前，通常要做好rem适配，当然也可以的vw适配，这里简单介绍一下rem适配。首先看一下vant官网上的介绍需要这两个插件：步骤一：安装 npm i amfe-flexible步骤二：引用 （在main.js里面引用一下下）import 'amfe-flexible'步骤三：看效
