(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
var clientHeight = docEl.clientHeight;
//console.log(clientHeight);
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientHeight / 1080) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
//监控页面分辨率变化,修改对应的字体大小
(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 = * (clientWidth / ) + 'px'
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

1920*1080pc端适配的更多相关文章

  1. 手淘H5移动端适配方案flexible源码分析

    移动端适配一直是一个值得探讨的问题,在业余时间我找了一些页面,查看了一些厂商对于移动端H5页面的适配方案,看到了几个典型的例子,今天就来记录一下我看到的第一个典型的例子,也是我们公司目前普通H5项目正 ...

  2. viewport移动端适配,读文笔记

    文章地址: viewport移动端适配 笔记: 移动端适配目的: 希望在屏幕尺寸大小不同的手机上进行访问页面时,页面显示的效果能合理的展示,我们期望的是在手机屏幕较大时显示的内容比较大一些,手机屏幕小 ...

  3. 超详细讲解H5移动端适配

    前言 移动互联网发展至今,各种移动设备应运而生,但它们的物理分辨率可以说是五花八门,一般情况UI会为我们提供375尺寸的设计稿,所以为了让H5页面能够在这些不同的设备上尽量表现的一致,前端工程师就不得 ...

  4. 从flexible.js引入高德地图谈起的移动端适配

    曾几何时,前端还仅仅是PC端的.随着移动时代的兴起,h5及css3的推陈出新.前端的领域慢慢的由传统的pc端转入了移动端,这也导致了前端这一职业在风口的一段时间出尽了风头. 从开始的惶恐和无从下手,慢 ...

  5. Web移动端适配总结

    移动端适配的相关概念以及几种方案总结 适配相关概念 布局视口(layout viewport):html元素的上一级容器即顶级容器,用于解决页面在手机上显示的问题.大部分移动设备都将这个视口分辨率设置 ...

  6. 小tips:使用rem+vw实现简单的移动端适配

    首先设置meta属性,如下代码: <meta name="viewport" content="width=device-width, initial-scale= ...

  7. 移动端适配单位rem

    0 写在前面 本周惊喜地发现,其他各个老师的软工班(罗杰老师班和欧阳老师班)的软工项目的alpha版本都已经发布了!(然而我们软工项目还没开始写代码…逃…) 十分好奇的我第一时间下载了一些他们的产品进 ...

  8. 移动端适配--flexible.js

    引言: H5适配一直是一个比较普遍的问题,很多文章都会讲,最近开发了一个H5的项目使用了一下淘宝的 flexible.js,写一篇文章自己总结一下. 一.背景介绍: Flexible.js是淘宝公开的 ...

  9. rem移动端适配方案

    一. rem vs em 单位 定义 特点 rem font size of the root element 以根元素字体大小为基准 em font size of the element 以父元素 ...

随机推荐

  1. .net core 程序退出事件

    平滑关闭,关闭事件 //捕获Ctrl+C事件 Console.CancelKeyPress += Console_CancelKeyPress; //进程退出事件 AppDomain.CurrentD ...

  2. 【学习笔记Part 1 ● Linux】

    本章目标 Linux简介 Linux发展 Linux界面熟悉 Linux常用命令 Linux简介 经常看到的或者熟悉的操作系统: Windows操作系统:Window 10或者Window 7 Mac ...

  3. UiPath如何实现暂停功能?

    照理说一个无人值守的机器人原本是不应该有人工操作介入的,也就不会提供暂停功能.但客户可能出于业务需要,或者风险管控的考虑,会需要机器人具备暂停功能.通常,会希望在机器人运行时,用户摁下快捷键,机器人就 ...

  4. TOTP 介绍及基于C#的简单实现

    TOTP 介绍及基于C#的简单实现 Intro TOTP 是基于时间的一次性密码生成算法,它由 RFC 6238 定义.和基于事件的一次性密码生成算法不同 HOTP,TOTP 是基于时间的,它和 HO ...

  5. DataPipeline加入Linux基金会下OpenMessaging社区

    近日,国内领先的“iPaaS+AI”一站式大数据融合服务提供商DataPipeline宣布加入Linux基金会旗下OpenMessaging开源社区,将与OpenMessaging开源社区其他成员阿里 ...

  6. Hive的原理

    阅读目录 一.Hive内部表和外部表 1.Hive的create创建表的时候,选择的创建方式: - create table - create external table 2.特点: ● 在导入数据 ...

  7. Winform自定义无边框窗体

    目的: 1.将窗体设置成无边框,如下面效果图 2.该无边框窗体添加了窗体放大.缩小(可以根据需要只能横向放大缩小  或者  竖向放大缩小)的功能 Point vPoint = new Point((i ...

  8. 将HTML字符转换为DOM节点并动态添加到文档中

    将HTML字符转换为DOM节点并动态添加到文档中 将字符串动态转换为DOM节点,在开发中经常遇到,尤其在模板引擎中更是不可或缺的技术. 字符串转换为DOM节点本身并不难,本篇文章主要涉及两个主题: 1 ...

  9. oracle 常用索引分析,使用原则和注意事项

    本文参考: https://www.cnblogs.com/wishyouhappy/p/3681771.html https://blog.csdn.net/weivi001/article/det ...

  10. gcc链接,去掉不用的函数和data

    编译代码的时候,没有用到的函数经常会被编译,该怎么才能去掉呢? 解决方法: CFLAGS 加上 -ffunction-sections -fdata-sections LDFLAGS 加上 --gc- ...