一行css代码实现rem，不再使用js实现rem

最新推荐文章于 2024-04-13 19:57:22 发布
最新推荐文章于 2024-04-13 19:57:22 发布
阅读量2.6k 收藏 7
点赞数 3
分类专栏： web前端 文章标签： rem 前端 适配 rem.js css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31659129/article/details/93898384
版权

一直以为rem的实现是靠JS实现，网上的rem.js五花八门，少的10多行代码，多的甚至上百行，其中一个在使用过程中在安卓和苹果中的大小居然不一样，苹果被缩小了二倍。。。。
最近发现只要一行css代码就与五花八门的rem.js作用一样：
html{
font-size: calc(100vw/6.5)
}
拿到650px设计稿以后，这样算下来按照设计稿实际大小除以100就是rem的大小了，简单实用，抛弃rem.js，从我做起!!!

外号蓝大胖
关注
  • 3
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
CSS使用 REM布局
晴天有点孤单
07-08 267
在入口文件新增自执行函数 _initFontSize:function (){ document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px'; }, 监听窗口变化 window.addEventListener('resize',_initFontSize,false);})(); UI配置 100px == 1rem 页面使用 header { .
一行css代码轻松实现前端响应式布局（vw+rem）
weixin_34318956的博客
12-08 391
大家知道rem可以用来做响应式布局，只是html元素上的font-size样式需要根据屏幕宽度来指定。 之前有用@media媒体查询，根据各种屏幕宽度写html的样式，也用过类似lib-flexible这样的js库动态改变html样式，总觉得挺麻烦的。 今天突然想到vw这个单位，发现用它来做响应式布局实在太方便了。 只需一行css： ht...
了解和使用CSS中的rem单位
2401_84091468的博客
04-13 643
将模块保留在rem单位中，将元素保留在模块中，将它们保留为em。这种方法使操作全局大小变得更容易，它可以缩放模块中的类型，而模块内容是根据模块字体大小本身来缩放的。当时，较旧版本的IE仍占有较大的市场份额，因此无法缩放带有像素大小的文本。代码能力一定要注重，尤其是很多原理性的代码（之前两次让我写过Node中间件，Promise.all，双向绑定原理，被虐的怀疑人生）！但是，关于rem和em单位用作媒体查询单位时，有一个有趣的细节：它们始终保持相同的值1rem = 1em =浏览器设置的字体大小。
利用CSS3新单位rem实现响应
廿四桥明月夜的博客
01-05 237
做移动端的响应方法有很多，但是我喜欢用CSS3的新单位rem，这个单位非常好用（有个比它还好用的单位vh，不过兼容性太差，不考虑了），根据不同屏幕，设置不同的基准值，从而实现适配各个屏幕尺寸的移动设备。慕课网有一套非常不错的讲关于rem的视频，这里推荐给大家http://www.imooc.com/learn/494。 rem—-CSS3中新增的单位，兼容性还不错，常用于移动端实现字体的响应，与
实现rem的核心代码
负数
06-13 673
(function (doc, win, image_width) { var docEl = doc.documentElement, //获取html标签 //orientationchange方向改变事件 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize...
css-rem布局
pyhui的技术博客
07-05 677
全适配，手机与平板与电脑，使用同一个布局 比较 em单位是相对于自身的文字大小为单位的，有最小的识别字体，12象素 把宽高，设置为em单位 rem参照html标签的style中font-size 明确em与rem的功效 rem与布局的例子 期望的效果，是等比放缩 修改一下 当宽度变化时，让字体变化就好 ...
Html5+CSS3+JS代码实现元旦倒计时界面
10-30
本文将详细介绍如何使用Html5、CSS3和JS来实现一个元旦倒计时界面的代码实现。通过本文，读者将了解如何使用Html5、CSS3和JS来设计和实现一个倒计时界面，并了解相关的编程技术和实现细节。 一、前言 元旦是每年...
移动web开发，rem适配方案
10-31
通过`, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">`这行代码，我们可以设定布局视口宽度等于设备宽度，禁止用户缩放，保证页面按比例缩放，从而达到良好的适配效果。 接下来，...
rem转换脚本
09-08
在写移动端web项目时，经常会用到REM这个单位。但是不同REM和PX的相对基准值是不同的（像我们在IPhone6下，使用的是1REM = 50px...但是一个CSS文件大多都几百行，手动改起来非常的麻烦，所以自己写了一个JS脚本来解决。
layout-demo：CSS的各种布局
02-04
在IT领域，尤其是在网页设计和开发中，CSS（Cascading Style Sheets）是不可或缺的一部分，它用于控制网页元素的样式、布局和结构。本压缩包文件"layout-demo"聚焦于CSS的各种布局技术，包括传统的布局方式以及现代...
ember-tableish：基于CSS网格的表实现
02-04
兼容性Ember.js v3.4或更高版本Ember CLI v2.13或更高版本Node.js v8或更高版本安装ember install ember-tableish用法渲染简单内容： < EmberTableish> < table> < headers width = ' 10rem '> First Name <...
自适应rem的css文件
05-23
常用于手机pc自适应 只需要使用rem作为单位直接写就好
不用js代码直接用rem适配屏幕大小
bingnan2347的博客
09-14 461
@CHARSET "UTF-8"; /***************************************设置html字体大小**************************/ @media ( max-width : 767px) { html{ font-size: 50px; } } @media ( min-width : 768px ) a...
CSS -- 10. 移动WEB开发之rem布局
Qlz的博客
12-21 828
移动WEB开发之rem布局 1 rem基础 2 媒体查询 2.1 什么是媒体查询 2.2 语法规范 2.3 mediatype 查询类型 2.4 关键字 2.5 媒体特性 2.6 案例：根据页面宽度改变背景颜色 2.7 媒体查询+rem实现元素动态大小变化 2.8 针对不同的屏幕尺寸引入不同的样式文件 3 Less基础 3.1 维护css的弊端 3.2 Less介绍 3.3 Less的变量 3.4 Less的编译 3.5 Less的嵌套 3.6 Less的运算 4 rem适配方案 4.1 rem实际开发适配
html 如何设置rem,CSS3中REM使用详解
weixin_28338005的博客
06-11 1098
在页面中设置字体，我们知道有常见的两种，px 和 em.px在Web页面制作中，我们一般使用“px”来设置我们的文本，因为他比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的Web页面时，他改变了浏览器的字体大小(虽然一般人不会去改变浏览器字体大小)，这时会使用我们的Web页面布局被打破，这时就提出了使用“em”来定义Web页面的字体。em一般都是body的font-size...
020day（支付宝页面制作【利用js插件除100就是rem的】，CSS3的grid布局）
w296932099的博客
08-05 398
一、grid（网格）布局 1、网格布局（Grid）它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局 2、grid布局相关概念 1⃣.采用网格布局的区域，称为"容器"（container）。 2⃣.容器内部采用网格定位的子元素，称为"项目"（item）。 3⃣.注意：项目只能是容器的顶层子元素，不包含项目的子元素。Grid 布局只对项目生效。 3、grid布局中的行和列 1⃣.容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。 4、
了解和使用CSS中的rem单位，web前端开发资料
2401_84091993的博客
04-05 1009
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是附赠给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等详细大厂面试题答案、学习笔记、学习视频等资料领取，点击资料领取直通车免费领取！.jpg" />
HTML-CSS （五十九） rem单位以及rem布局原理
weixin_44730244的博客
05-09 126
em:是一个相对单位，1em等于当前或父元素的font-size值 rem：是一个相对单位，1rem等于根元素的font-size值 vw/vh:把屏幕分为100份，1vw等于屏幕宽的1%，1vh等于屏幕高的1%
css rem无效 解决方法
热门推荐
柚子烧酒
04-29 1万+
问题描述 当使用 rem 作为单位时，页面在自己浏览器上查看样式正常显示，到了别的浏览器显示就不对了。 原因 首先需要明白 rem 的实质，博客千千万，就不赘述了，随便贴一个：CSS 动态REM rem 是相对于页面根字体的单位，根据 <html> 的 font-size 进行计算得到实际长度。一些浏览器对于 字体小于12px 的情况统统处理成 12px，所以如果根字体大小被设为小于1...
如何使用postcss-pxtorem实现响应式布局？
最新发布
05-30
postcss-pxtorem是一个PostCSS插件，可以将像素单位转换为rem单位，实现响应式布局。使用postcss-pxtorem的步骤如下： 1. 安装postcss-pxtorem插件 ``` npm install postcss-pxtorem --save-dev ``` 2. 配置postcss.config.js文件 在项目根目录下新建postcss.config.js文件，并进行配置。 ``` module.exports = { plugins: [ require('postcss-pxtorem')({ rootValue: 16, // 1rem等于16px propList: ['*'] }) ] } ``` 其中，rootValue表示1rem等于的像素值，propList表示需要转换的属性。 3. 在项目中使用 在需要进行单位转换的样式文件中引入postcss即可。例如，在vue项目中，可以在vue.config.js文件中配置： ``` module.exports = { css: { loaderOptions: { postcss: { plugins: [ require('postcss-pxtorem')({ rootValue: 16, // 1rem等于16px propList: ['*'] }) ] } } } } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值