方案及原理:使用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. 使用IDEA创建基于Maven SpringMvc项目

    使用IDEA创建基于Maven SpringMvc项目 1.通过程序启动——create project,或者file--New-projec打开New project 2.自定义groupid等信息 ...

  2. Android1_运行第一个AS项目HelloWorld

    一.开发安卓程序需要具备一些开发工具,这里简单罗列一下: JDK :这是Java语言的开发工具包,包含了Java的运行环境.工具集合.基础类库等内容. Android Studio:目前主流的安卓开发 ...

  3. 浅析 Nginx 网络事件

    Nginx 是一个事件驱动的框架,所谓事件主要指的是网络事件,Nginx 每个网络连接会对应两个网络事件,一个读事件一个写事件.在深入了解 Nginx 各种原理及在极端场景下的一些错误场景处理时,需要 ...

  4. 使用element的upload组件实现一个完整的文件上传功能(上)

    说到标题就有点心塞了,前段时间项目上需要实现一个文件上传的功能,然后就咔咔的去用了element的upload组件,不用不知道一用吓一跳哇. 在使用的过程中遇到了很多让意想不到的问题,后来也因为时间问 ...

  5. 使用spring框架创建最简单的java web程序(IDEA商业版)

    项目目录如下(IDEA社区版好像无法识别webapp目录?原因见https://www.cnblogs.com/bityinjd/p/9284378.html): 工具:  IDEA 1.首先使用ma ...

  6. spring cloud Gateway简单使用

    一.引子 2年前有幸使用过一次Spring Cloud (1.5.9),那次用的是ZUUL做网关,没有使用Gateway做网关,一直是个小遗憾.终于在2年后的19年底再次使用Spring Cloud, ...

  7. 洛谷$P$2048 超级钢琴 $[NOI2010]$ $rmq$/主席树

    正解:$rmq$/主席树 解题报告: 传送门! 好像看过这题挺多次辣,,,$QwQ$ 之前$NOIp$的时候$cjk$学长讲课讲了这题(虽然那时候的$gql$太菜辣并麻油落实这道_(:з」∠)_,然后 ...

  8. $HDU1846\ Brave\ Game$ 博弈论

    正解:博弈论 解题报告: 传送门! 巴什博奕板子题鸭$QwQ$ 就有个结论,是说当$(m+1)\mid n$时先手必败,否则必胜 这个瞎证明一下就能出来 就考虑当$(m+1)\mid 1$时,若先手取 ...

  9. 2020面试还搞不懂MyBatis?快看看这27道面试题!(含答案和思维导图)

    前言 MyBatis是一个优秀的持久层ORM框架,它对jdbc的操作数据库的过程进行封装,使开发者只需要关注SQL 本身,而不需要花费精力去处理例如注册驱动.创建connection.创建statem ...

  10. .net core3.1项目在centos7.6上部署经验

    0x00环境搭建 1)使用PuTTY远程登录你的centos 2)yum -y update 更新系统 3)安装宝塔面板: yum install -y wget && wget -O ...