angular2里引入flexible.js(rem的布局)_angular 使用rem-程序员宅基地

技术标签: angular  JavaScript  

今天想实现页面的自适应,本来用的是栅格,但效果不理想,就想起了rem布局。
以前使用rem布局,都是在原生html里,还没在框架里使用过,百度没百度出来,就自己琢磨,不知道方法规范不规范,反正成功了,操作如下:

1、下载flexible.js

这里放了flexible文件,粘贴就好
这里默认是10等份,手动改为24,此时1rem=1920/24px即80px。(设计稿是1920px的)

(function flexible(window, document) {
    var docEl = document.documentElement;
    var dpr = window.devicePixelRatio || 1;

    // adjust body font size
    function setBodyFontSize() {
        if (document.body) {
            document.body.style.fontSize = 12 * dpr + "px";
        } else {
            document.addEventListener("DOMContentLoaded", setBodyFontSize);
        }
    }
    setBodyFontSize();

    // set 1rem = viewWidth / 10
    function setRemUnit() {
        // 这里默认是10等份,手动改为24,此时1rem=1920/24px即80px。(设计稿是1920px的)
        var
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_45158253/article/details/105777096

智能推荐

BZOJ 4245: [ONTAK2015]OR-XOR-程序员宅基地

文章浏览阅读81次。要求or的值最大,从高位到低位贪心,高位尽量为0,所以要求优先满足高位每段的xor和都相等转化为前缀和就是选出0的个数能否>=m#include<cstdio>using namespace std;int vis[1000005];long long a[1000005],Sum[1000005];int main(){ int n,m; s..._[ontak2015] or-xor

蜂群算法与多目标优化的结合:实践经验与效果-程序员宅基地

文章浏览阅读864次,点赞21次,收藏21次。1.背景介绍蜂群算法(Particle Swarm Optimization, PSO)是一种基于自然界蜂群行为的优化算法,由阿德利·迪亚斯(Adelia Diana)和伊瑟尔·阿迪亚德(Eckhardt Adia)于2001年提出。蜂群算法是一种简单、高效的全局优化算法,主要应用于解决连续优化问题。然而,随着现实世界中的优化问题变得越来越复杂,单目标优化算法已经无法满足需求。多目标优化问题是..._多蜂群优化算法

Notepad的安装_nodepaad-程序员宅基地

文章浏览阅读452次。1、下载Notepad++软件 Notepad++非常好用,想要安装首先我们要下载 百度搜索“Notepad++”直接就可以找到主页;主页有中文版的,其实也就那么几个字,然后选择红色框了的下载;跳转到下载界面,下载最新版本就行了,好多种格式的直接安装的,还有压缩包;..._nodepaad

深度学习——循环神经网络RNN(一)_反向传播算法_elman就是rnn吗?-程序员宅基地

文章浏览阅读5.2k次。RNN网络结构Elman神经网络是最早的循环神经网络,由Elman于1990年提出,又称为SRN(Simple Recurrent Network, 简单循环网络)。RNN考虑了时序信息,当前时刻的输出不仅和当前时刻的输入有关,还和前面所有时刻的输入有关。RNN的结构图(引用[2]中的图)如下: xtx_t表示t时刻的输入向量;hth_t表示t时刻的隐藏层向量: 隐层计算公式为 ht=f(Wh_elman就是rnn吗?

dji osdk开发(3)osdk3.9.0 demo简单示例代码_osdk 示例结果-程序员宅基地

文章浏览阅读1.2k次。在上一篇demo编译测试中,使用的代码代码包含了dji_linux_environment和dhi_linux_helpers两个模块代码、UserConfig.txt配置文件。且对官方代码做了修改,略显复杂。本章给出一个极简的代码,仅包含main.cpp代码。使用一个函数替代osdk配置创建Vehicle *对象的代码。原代码为 LinuxSetup linuxEnvironment("UserConfig.txt"); Vehicle *vehicle = linuxEnvironment._osdk 示例结果

常见编程语言_常见的编程语言-程序员宅基地

文章浏览阅读1.7w次,点赞4次,收藏9次。编程语言排行榜TIOBE排行榜是根据互联网上有经验的程序员、课程和第三方厂商的数量,并使用搜索引擎(如Google、Bing、Yahoo!)以及Wikipedia、Amazon、YouTube统计出排名数据,只是反映某个编程语言的热门程度,并不能说明一门编程语言好不好,或者一门语言所编写的代码数量多少。链接:https://www.tiobe.com/tiobe-index/2019年3月排..._常见的编程语言

随便推点

我所理解的Android模块化(一)——模块化概念和路由_安卓模块那个是子模块和父模块-程序员宅基地

文章浏览阅读1.2w次,点赞13次,收藏84次。笔者在公司的项目中使用模块化的方式开发APP已经快一年的时间,其中经历过以模块化的方式来重构项目中一些相对来说业务比较独立的模块。遇到了一些问题,也积累了一些经验,所以想谈一谈我对Android模块化的理解,也希望能帮助到大家。_安卓模块那个是子模块和父模块

深度学习实战14(进阶版)-手写文字OCR识别,手写笔记也可以识别了_ocr.recognize_text-程序员宅基地

文章浏览阅读3.2k次,点赞2次,收藏20次。大家好,我是微学AI,今天给大家带来手写OCR识别的项目。手写的文稿在日常生活中较为常见,比如笔记、会议记录,合同签名、手写书信等,手写体的文字到处都有,所以针对手写体识别也是有较大的需求。_ocr.recognize_text

存储器的层次结构-程序员宅基地

文章浏览阅读1.5w次,点赞5次,收藏66次。文章目录存储器的层次结构1.存储器的多层结构2.多层结构的存储器系统3.程序的装入和链接(1) 程序的装入(2)程序的链接存储器的层次结构1.存储器的多层结构对于通用计算机而言,存储层次至少应具有三级:最高层为CPU寄存器,中间为主存,最底层是辅存。在较高档的计算机中,还可以根据具体的功能细分为寄存器、高速缓存、主存储器、磁盘缓存、固定磁盘、可移动存储介质等6层。如下图所示。2.多层结构..._存储器的层次结构

AJAX请求 状态pending_http请求 pending-程序员宅基地

文章浏览阅读4.3k次。一、pending 是什么意思?定义:信号产生和传递之间的时间间隔内,称此信号是未决的;简单的说就是:一个已经产生的信号,但是还没有传递给任何进程,此时该信号的状态就称为未决状态。二、HTTP Status pending 相关状态还包括哪些?1、待定状态;2、未决状态;3、等待状态;4、检验状态三、出现“pending”如何解决?通过上面讲了“pending 是什么意思?”你应该能明白一个大概的意思了吧,也有了一个大概的解决思路了吧。绝大多数情况都是因为..._http请求 pending

Golang | Leetcode Golang题解之第52题N皇后II-程序员宅基地

文章浏览阅读652次。Golang | Leetcode Golang题解之第52题N皇后II

Uncaught SyntaxError: Invalid left-hand side in assignment (at Un-程序员宅基地

文章浏览阅读4.2k次。/奇数 报错位置i%2。2.console记得在最外面的括号里面。关于该问题:应该是i的值不能确定吧,因为a1已经用了i。console.log("偶数和"+a1);console.log("奇数和"+a2);内容翻译:即左边的参数引用报错。求1-1001奇数+偶数之和。错误:1.a1,a2没初始化。_uncaught syntaxerror: invalid left-hand side in assignment