使用rem实例

最新推荐文章于 2022-05-07 09:35:14 发布
最新推荐文章于 2022-05-07 09:35:14 发布
阅读量2k 收藏 2
点赞数 
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>rem phone test</title>
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <style>
        html {
            height: 100%;
            width: 100%;
            font-family: 'Heiti SC', 'Microsoft YaHei';
            font-size: 20px;
            overflow: hidden;
            outline: 0;
            -webkit-text-size-adjust:none;
        }
        body {
            height: 100%;
            margin: 0;
            overflow: hidden;
            -webkit-user-select: none;
            position: relative;
        }
        header,
        footer {
            width: 100%;
            line-height: 1.5rem;
            font-size: 1rem;
            color: #000;
            border: 1px solid #ccc;
            text-align: center;
            background-color: #ccc;
        }
        .bd {
            margin-top: 1rem;
            margin-bottom: .5rem;
            margin-right: -.5rem;
            font-size: 0;
        }
        .box {
            width: 5rem;
            height: 5rem;
            display: inline-block;
            margin-right:.5rem;
            margin-bottom: .5rem;
        }
        .blue-box {
            background-color: #06c;
        }
        .org-box {
            background-color: #1fc195;
        }
    </style>
    
</head>

<body>

    <header>我是头部</header>


    <div class="bd">
        <div class="box blue-box"></div>
        <div class="box org-box"></div>
        <div class="box blue-box"></div>
        <div class="box org-box"></div>
        <div class="box blue-box"></div>
        <div class="box org-box"></div>
    </div>


    <footer>我是页脚</footer>
    
    <script>
        (function (doc, win) {
          var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
              var clientWidth = docEl.clientWidth;
              if (!clientWidth) return;
              docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
            };

          if (!doc.addEventListener) return;
          win.addEventListener(resizeEvt, recalc, false);
          doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    </script>
</body>

</html>

Bling_Bling_
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
rem详细使用案例
10-23
这是一个前端开发项目的移动案例，一看就懂，最基本的
rem案例展示
02-11
rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。
rem原理及使用
A_seeker的博客
05-12 1万+
rem原理及使用 rem的定义： rem是相对长度单位。是根元素（html）的font-size值的的一个css单位（适配单位rem）。 如：一个页面html中设置了font-size的值，使用rem即为这个已设置值的倍数。 eg: html设置font-size: 20px; 可知1rem=20px,使用时即可计算转化为rem的倍数。 html{ font-size: 20px; } <div style="font-size:
rem一句话说明白+亲测实例
weixin_34342207的博客
03-14 138
2019独角兽企业重金招聘Python工程师标准>>> ...
前端学习（294）：rem小实例
歌谣的博客
01-02 213
alt+z转换为rem <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...
rem适配 - 简单讲解和案例
更新前端相关内容
05-07 297
rem适配
移动前端自适应适配布局解决方案和比较
嘿嘿
03-18 282
互联网上的自适应方案到底有几种呢？就我个人实践所知，有这么几种方案： 固定一个某些宽度，使用一个模式，加上少许的媒体查询方案 使用flexbox解决方案 使用百分比加媒体查询 使用rem 淘宝最近开源的一个框架和网易的框架有同工之异。都是采用rem实现一稿解决所有设置自适应。在没出来这种方案之前，第一种做法的人数也不少。类似以下说到的拉钩网。看一下流云诸葛的文章。 以下摘自：从网易与淘宝的font-size思考前端设计稿与工作流 1. 简单问题简单解决 我觉得有些web app并一定很复杂，比如
谈一谈rem的应用场景及其如何使用
u010227042的博客
06-09 1851
rem rem是什么 相信大多数同学都写过移动端，那么对rem就很熟悉了，它是相对长度单位。相对于根元素(即html元素)font-size计算值的倍数的一个css单位，也就是我们 前端常说的适配单位rem。 认识rem 当浏览器解析HTML文档时，创建了一个用来代表页面元素的集合，叫做DOM（文档对象模型，Document Object Model）。树状结构，每一个节点代表一个元素。<html>就是顶层节点（根节点），在下面的是它的子节点<head>和<body..
html中rem的理解&简单运用示例
热门推荐
Jacoh的专栏
11-21 2万+
作为一名前端开发工程师，很有必要梳理并记录下自己成长过程中的问题，以温故知新。 尽量做到： 把前端开发成长中遇到的概念，原子性的拆分开，单独的去理解学习； 不添加太多个人情感化语言，以知识为中心； 会运用，不等于理解，文章侧重于理解； ？rem是什么 rem是css中的单位。 类同举例: height: 1px 表示height的值为1个css像素； vertial-align: 50...
rem移动端布局方案解析+案例
qq_40463625的博客
02-25 1346
rem移动端布局方案解析+案例
移动端rem布局 demo，可以作为简单参考
06-13
其中有一些不足，还有由于时间原因部分css3动画没有加载完全js方面也稍差了些，但我觉得给rem布局换算比较懵的同学能有个好的参考了
vue使用rem实现 移动端屏幕适配
10-17
主要介绍了vue使用rem实现 移动端屏幕适配的相关知识，通过实例代码介绍了vue用rem布局的实现代码,需要的朋友可以参考下
移动端REM布局与ViewportVW布局的实例运用
08-10
移动端 REM布局 与 Viewport (VW) 布局的实例运用
手机端转换rem适应
08-30
本文主要介绍了手机端转换rem适应的方法实例。具有很好的参考价值。下面跟着小编一起来看下吧
JavaScript中rem布局在react中的应用
01-19
REM布局实例代码 var fontSizeInit = function() { var doc = document.documentElement, cli = doc.clientWidth; cli&&(cli/=320,2<cli&&(cli=2),doc.style.fontSize=16*cli+px); } font
jQuery中removeProp()方法用法实例
01-19
本文实例讲述了jQuery中removeProp()方法用法。分享给大家供大家参考。具体分析如下： 此方法可以删除由prop()方法设置的属性。 语法: 代码如下:$(“selector”).removeProp(name) 参数列表: 参数 描述 name ...
node-v9.6.0-x86.msi
04-29
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
Python基于机器学习的分布式系统故障诊断系统源代码，分布式系统的故障数据进行分析，设计故障诊断模型，高效地分析并识别故障类别
04-29
基于技术手段（包括但不限于机器学习、深度学习等技术）对分布式系统的故障数据进行分析，设计故障诊断模型，高效地分析并识别故障类别，实现分布式系统故障运维的智能化，快速恢复故障的同时大大降低分布式系统运维工作的难度，减少运维对人力资源的消耗。在分布式系统中某个节点发生故障时，故障会沿着分布式系统的拓扑结构进行传播，造成自身节点及其邻接节点相关的KPI指标和发生大量日志异常
JavaScript前端开发的核心语言前端开发的核心语言
最新发布
04-29
javascript 当今互联网时代，JavaScript已经成为了前端开发的核心语言它是一种高级程序设计语言，通常用于网页的交互和动态效果的实现。JavaScript的灵活性以及广泛的使用使得它变得异常重要，能够为用户带来更好的用户体验。 JavaScript的特点之一是它的轻量级，它可以在网页中运行无需单独的编译或下载。这意味着网页可以更快地加载并且用户无需安装额外的软件才能运行网页上的JavaScript代码。此外，与HTML和CSS紧密结合，可以直接在HTML文档中嵌入，使得网页的开发变得非常便捷。 JavaScript具有动态性，它可以在浏览器中实时修改页面内容和样。它可以通过操作DOM（文档对象模型来动态地修改网页的结构和布局，并且可以根据用户的行为实时地响应各种事件，如点击、标悬停、滚动等。这使得开发者可以轻松地为网页添加交互性和动态效果，提供更好的用户体验。 JavaScript也是一种面向对象的语言。它支持对象、类、继承、多态等面向对象编程的概念，使得代码结构更加清晰和可维护。开发者可以创建自定义的对象和方法，对功能进行封装和复用，提高代码的可读性和可维护性。
vue3创建移动端项目使用rem
10-12
3. 在main.js中引入rem.js文件，并在Vue实例中添加以下代码： ``` import rem from './utils/rem' rem(document, window) new Vue({ render: h => h(App), }).$mount('#app') ``` 4. 在utils文件夹下创建rem.js...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值