方案及原理:使用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. attr(),prop()二者区别和最佳实践

    attr(),prop()二者区别和最佳实践 最近使用到attr()来获取自定义属性值,我印象中是有一个方法可以获取到自定义属性值,进而我又想到了另一个方法prop().  查看了手册发现并没有对二者 ...

  2. Openstack生产环境部署(一)

  3. sql查询分类和所有子类

    select * from [JianDu].[dbo].[ZuZhiJiGou] where id = 64 --查询节点 union allSELECT TOP 1000 a.* FROM [Ji ...

  4. jsp中获取页面的相对路径

    1.在jsp页面的上方加上这段java代码 <%//        request.getContextPath() 返回当前页面所在的应用的名字://        request.getSc ...

  5. ELK学习实验013:ELK的一个完整的配置操作

    前面做了关于ELK组件的各个实验,但是并没有真正的把各个组件结合起来做一个实验,现在使用一个脚本简单的生成日志,模拟生产不断产生日志的效果 一 流程说明 使用脚本产生日志,模拟用户的操作 日志的格式 ...

  6. 【游记】THUWC2019-2 Bystander

    [游记]THUWC2019-2 Bystander Day0/-1 感觉自己怎么样都去不了PKUWC(没错)了,差点放弃模拟面试,在老妈的要求下勉强面试,自我介绍没怎么准备,然后就说 我喜欢唱跳Rap ...

  7. linux 双Redis + keepalived 主从复制+宕机自主切换

    主要核心思想,如果master 和 salve 全部存活的情况,VIP就漂移到 master.读写都从master操作,如果master宕机,VIP就会漂移到salve,并将之前的salve切换为ma ...

  8. spinor/spinand flash之高频通信延迟采样

    SPI协议 对于spinor和spinand flash,其通信总线为SPI总线. SPI有四种工作模式,对应不同的极性和相位组合 极性,一般表示为CPOL(Clock POLarity),即SPI空 ...

  9. 【记录】.bin文件 到 .vdi文件的转换教程

    .bin文件 到 .vdi文件的转换教程 1. 背景 想体验一下 Chrome OS 系统,于是准备在 虚拟机VirtualBox(Mac版) 中安装一下,网上教程非常少,找到如下教程 原贴地址:ht ...

  10. linux入门系列3--常见的linux远程登陆管理工具

    服务器一般是云服务器或者放置在机房,我们日常工作中通过远程连接工具连接到服务器进行操作,这类工具很多(如SecureCRT.XShell.Putty.FinallShell.TeamViewer以及w ...