方案及原理:使用rem单位,通过window.onresize来监听浏览器窗口,获取窗口宽度,并改变跟字体大小来达到弹性适配效果。

function adaptor(){
//为了便于计算,这里以1920px为基准
let width = document.body.clientWidth
let fontSize = document.getElementsByTagName('html')[0].style.fontSize = width / 19.2 + "px";
}
adaptor();
window.onresize = function() {
adaptor()
}

实际效果如下:

pc端的弹性布局适配方案的更多相关文章

  1. 30行js让你的rem弹性布局适配所有分辨率(含竖屏适配)(转载)

    用rem来实现移动端的弹性布局是个好主意!用法如下: CSS @media only screen and (max-width: 320px), only screen and (max-devic ...

  2. 30行js让你的rem弹性布局适配所有分辨率(含竖屏适配)

    用rem来实现移动端的弹性布局是个好主意!用法如下: CSS @media only screen and (max-width: 320px), only screen and (max-devic ...

  3. PC 端响应式布局

    前言:PC端 电脑显示器的尺寸种类还是很多的,台式电脑和笔记本电脑尺寸相差就更明显,所以响应式布局还是很重要的,甚至是必须要考虑的. 响应式的页面好不好,在后管平台上很明显.因为后管平台,一般是全屏显 ...

  4. 探讨兼容IE低版本的PC端响应式布局

    http://www.jiangweishan.com/article/lowIeResposive.html 响应式布局,oh my god!!有点醉了,感觉是老生常谈的话题了.虽然已经谈过很多了, ...

  5. 最佳移动端h5自适应rem适配方案

    一.利用lib-flexible.postcss-plugin-px2rem插件 进行移动端rem适配. 1.第一 引入lib-flexible . 安装lib-flexible: npm i lib ...

  6. 微信小程序填坑之路(三):布局适配方案(rpx、px、vw、vh)

    因为小程序是以微信为平台运行的,可以同时运行在android与ios的设备上,所以不可避免的会遇到布局适配问题,特别是在iphone5上,因为屏幕尺寸小的缘故,也是适配问题最多的机型,下面就简单介绍几 ...

  7. 手淘lib-flexible布局适配方案

    前置知识:什么是rem CSS3新增的一个相对单位rem(root em,根em).rem是相对于根节点(或者是html节点).如果根节点设置了font-size:10px;那么font-size:1 ...

  8. 移动端 移动web屏幕适配方案 随不同宽度的屏幕而改变

    链接地址1:http://www.cnblogs.com/zjzhome/p/4802157.html 链接地址2:http://www.html-js.com/article/Mobile-term ...

  9. 30行js rem弹性布局适配所有分辨率

    <script> /* # 按照宽高比例设定html字体, width=device-width initial-scale=1版 # @pargam win 窗口window对象 # @ ...

随机推荐

  1. vue 数据监听原理

    Vue.prototype.listenDatas = function(){ for(var attr in this.$data){ this.listenData(this,attr,this. ...

  2. SPOJ VLATTICE (莫比乌斯反演)

    传送门:https://www.spoj.com/problems/VLATTICE/en/ 题意: 在三维坐标系下,你在点(0,0,0),看的范围是(n,n,n)以内,求你可以看见多少个点没有被遮挡 ...

  3. 一目了然 | 数据库实例性能调优利器:Performance Insights

    Performance Insights是什么 阿里云RDS Performance Insights是RDS CloudDBA产品一项专注于用户数据库实例性能调优.负载监控和关联分析的利器,以简单直 ...

  4. CentOS 7防火墙

    CentOS 7.0默认使用的是firewall作为防火墙,这里改为iptables防火墙步骤. 1.关闭firewall: systemctl stop firewalld.service #停止f ...

  5. Excel单元格的日常操作

    通过右键选择插入来移动单元格 灵活的运用"整行" 与 "整列" 选中区域之后 通过点击区域边框进行移动 按住shift之后框会变成线 更容易拖动 按住ctrl拖 ...

  6. 0015 行高那些事:line-height

    目标 理解 能说出 行高 和 高度 三种关系 能简单理解为什么行高等于高度单行文字会垂直居中 应用 使用行高实现单行文字垂直居中 能会测量行高 3.1 行高测量 行高的测量方法: 3.2 单行文本垂直 ...

  7. $Noip2018/Luogu5021$ 赛道修建 二分+树形

    $Luogu$ $Sol$ 一直以为是每个点只能经过一次没想到居然是每条边只能经过一次$....$ 首先其实这题$55$分的部分分真的很好写啊,分别是链,数的直径和菊花图,这里就不详细说了. 使得修建 ...

  8. 爬虫 -- JS调试

    开发者工具(F12) 其中常用的有Elements(元素面板).Console(控制台面板).Sources(源代码面板).Network(网络面板) 找 JS 文件的几种方法 1.找发起地址 2.设 ...

  9. 原生js获取下拉框下标

    // 获取下拉框所选下标 传入下拉框的id function getselectscheckitemindex (idStr) { let o = document.getElementById(id ...

  10. 二、Spring Cloud之注册中心 Eureka

    前言 算是正式开始学习 spring cloud 的项目知识了,大概的知道Springcloud 是由众多的微服务组成的,所以我们现在一个一个的来学习吧. 注册中心,在微服务中算是核心了.所有的服务都 ...