用rem做各个浏览器的宽高兼容。

最新推荐文章于 2023-08-16 15:14:06 发布

咿口薄荷糖

最新推荐文章于 2023-08-16 15:14:06 发布

阅读量390

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_43936040/article/details/122411363

版权

本文介绍了如何通过创建rem.js文件实现不同浏览器及屏幕尺寸的兼容性。在项目公共目录下创建rem.js，并在index.html中引入，确保vue.config.js的publicPath配置正确。1px等于0.1rem，字体大小可以设置为0.14rem以适应屏幕变化，确保在各种环境下良好显示。

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

创建一个rem.js文件

(function (doc, win) {
   
  var docEl = document.documentElement || document.body;
  //设备重置
  resizeEvt = 'orientationchange' in window ? 'orientationchange'

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

咿口薄荷糖

关注关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue项目里rem的使用

qq_37635012的博客

12-21

637

为了我们方便直接使用rem作为单位，我们需要安装一个插件到vscode编辑器上,这个插件叫cssrem。因为UI给我们的设计稿尺寸单位用的是px，这个插件可以在我们写代码输入多少px后帮我们直接算出px转成rem的话rem值是多少，我们直接点击选中即可，如下图。在App.vue里引入rem.js。

002-浏览器兼容性处理

loveEveryWeb的博客

05-07

456

浏览器兼容性处理1. 分辨率兼容当前市场上流通的有各种分辨率的电子设备，要兼容所有设备成本太高或者无法实现，根据项目需求，针对性的兼容部分常用分辨率&部分厂商才是上上之选，同时也节约开发成本。 1. 分辨率兼容谷歌浏览器分辨率调试扩展插件： https://chromecj.com/web-development/2018-05/989/download.html，亲测有效，尺寸大小...

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

rem屏幕自适应

weixin_30583563的博客

08-01

170

(function (doc, win) { let docEl = doc.documentElement let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize' let recalc = function () { var clientWidth = docEl.clien...

vue中使用rem布局解析+大屏自适应

热门推荐

Cassie's blog

10-18

6万+

公司内部一直有大屏的需求，也一直再做，中途也踩了一些坑，但是没有认真的来总结下。首先项目中，做过移动端的适配，也有现在的大屏需求，中间都离不开不一个单位rem，自适应看起来就很麻烦，不过无惧困难，困难才会看到你说，哟，厉害了，我闪~，下面慢慢聊来。浅析rem 首先rem是css单位，相比于px固定的像素单位，rem更加的灵活，还有现在也比较好的vm。如果从未了解过，可以先过过眼 rem...

vue使用rem

weixin_45776308的博客

09-16

(12条消息) vue+vant 实现 rem的转换_itwangyang520的博客-CSDN博客

vue中使用rem

DXL131795的博客

03-29

467

js文件rem.js !(function(n) { var e = n.document, t = e.documentElement, i = 1920, d = i / 100, o = ‘orientationchange’ in n ? ‘orientationchange’ : ‘resize’, a = function() { var n = t.clientWidth || 19...

CSS3前缀与rem详解：李炎恢讲师解读浏览器兼容策略

随着CSS3的发展，许多新属性在初期由于尚处实验阶段，各个浏览器厂商为了实现这些特性，采用了临时的浏览器前缀机制。这些前缀包括： 1. `-webkit-`：主要应用于Chrome和Safari浏览器。 2. `-moz-`：适用于Firefox...

浏览器兼容性问题

msy_msy的博客

06-13

1016

最近面试有几家公司问到了兼容性问题，还有移动端的兼容问题，所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。 浏览器兼容问题一：不同浏览器的标签默认的外补丁和

前端开发中常见的浏览器兼容性问题及解决方案

在前端开发中，浏览器兼容性问题是至关重要的。不同浏览器对HTML、CSS和JavaScript的解释和渲染方式存在差异，如果不考虑兼容性，就有可能导致页面在某些浏览器上出现错位、样式错乱甚至功能无法正常运行的情况。这...

rem 前端字体_响应式网页设计:rem设置网页字体大小自适应

weixin_42400074的博客

12-23

1056

首先简单科普一下什么是响应式网页。响应式网页是指会根据输出设备的分辨率不同，而自动调整布局的网页。同时，在输出设备分辨率改变时，也能及时自动调整。说穿了，就是三个字：自适应。响应式网页不仅仅是响应不同类型的设备，而且需要响应不同的用户需求。响应式的初衷是为了让信息更好的传递交流，让所有人无障碍的获取信息，同时这也是 Web 的初衷。当我们每天面对缤纷的互联网世界的时候，文字不仅仅传递给我们众多的信...

rem适配的浏览器_rem.js的用法及在浏览器端的适配

weixin_32000561的博客

02-11

535

首先介绍下自己，我是从后端转前端，对于前端的见识还不深望各位全当一个新手自述.......随着移动设配的更新换代，市场上涌现了大量的非主流设备分辨率，比如华为手机......更新换代快的大前提下自然又涌现出了适配问题，主流解决方案有很多，如响应式布局、cover布局、container布局这几种布局在大多数情况下不限制高度的页面下还是相当有用的，但如果被元素塞满的设计稿并且客户要求设计稿的每一个...

vue3.0 rem适配

乐YB的博客

03-02

1653

1.安装两个插件 npm i postcss-pxtorem -S npm i amfe-flexible -S 2.根据vue3提供的新配置方法，在vue-config.js中对CSS做配置： const autoprefixer = require('autoprefixer'); const pxtorem = require('postcss-pxtorem'); module.exports = { css:{ sourceMap:false, loaderOpt

vue中rem的使用

u010208165的博客

09-23

1590

vue中的rem如何做？首先项目中，新建一个目录config，并且在新建一个js文件rem.js 在rem.js里面使用闭包写进如下代码 // 设置基准 const BASE = 15; (function (doc, win) { let docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',//去..

rem在vue中的使用

lwx931449660的博客

08-12

6043

rem是什么？它是一个相对单位，像px，vh，vw等一样，可以用来表示尺寸单位。 rem之所以可以用于自适应布局，是因为rem是一个相对尺寸，它只相对于html根元素来进行计算所以，在不同的页面大小中，只要改变html根元素的大小，其他所有元素便会跟着改变首先要知道，浏览器的默认字体高都是16px，所以可以这样理解，1rem 就等于 16px (1rem = 16px) 因为其他元素要相对于跟元素的大小来进行计算，所以为了方便使用就有了如下操作： html{ ...

[转载]兼容性--rem兼容适配解决方案

Datura_Elena的博客

10-29

2124

转载于https://www.w3cschool.cn/weflow/weflow-rem.html REM 兼容适配解决方案什么是 REM REM（Font size of the root element）是指相对于根元素的字体大小的单位。范例：若根节点font-size设置为 10px，则使用 3rem 时，计算后得 3*10 = 30px如果根节点设置为 20px，侧计

移动端rem布局 demo，可以作为简单参考

06-13

开发者应确保在编写CSS3动画时考虑兼容性和性能问题，使用前缀和适当的浏览器检测。总的来说，这个"移动端rem布局 demo"是一个学习和实践REM布局的好起点，可以帮助开发者了解如何创建响应式的移动端界面，同时...

webapp之设计尺寸转css-rem尺寸

05-09

为了确保兼容性，可以使用polyfill库如`REM units for IE`，或者在这些浏览器中使用em单位作为备选。 7. **实例分析**：在`webapp_demo`这个压缩包文件中，可能包含了实现这个过程的示例代码和资源。解压后，可以...

Vue第 16 篇，Vue使用rem实现移动端适配，移动端rem适配（rem移动端适配，vue移动端适配）

weixin_65793170的博客

12-08

2183

⭐在移动端使用 REM（Root EM）适配是一种常见的响应式布局方案，它可以根据屏幕尺寸动态调整元素的大小，以适应不同的设备和分辨率。这里来记录一下

vue中如何使用rem