方案及原理:使用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. 【2016常州一中夏令营Day3】

    小 W 摆石子[问题描述]小 W 得到了一堆石子,要放在 N 条水平线与 M 条竖直线构成的网格的交点上.因为小 M 最喜欢矩形了,小 W 希望知道用 K 个石子最多能找到多少四边平行于坐标轴的长方形 ...

  2. 特殊字符,如Emoji表情Base64存储到数据库

    有些特殊字符,如Emoji,存储到oracle数据库就会变成乱码,解决方案就是Base64转码后存储到数据库,取出后再解码传输,经过验证是可以的. 编码存储,接收参数转json再.ToString() ...

  3. Qt串行化的输入和输出(使用QDataStream读写QByteArray,对QIODevice直接起作用)

    参考https://lug.ustc.edu.cn/sites/qtguide/ 今天看了一个介绍Qt串行化的介绍,感觉很受益,就记录了下来. 串行化(Serialization)是计算机科学中的一个 ...

  4. C++Review4_代码的组织

    当一个项目越来越大,代码该如何组织?C++组织程序的策略是什么?遇到类.变量.函数的重名问题该如何解决? =============================================== ...

  5. spring MVC 核心配置

    <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...

  6. slim中返回结果加密的

    //返回结果不加密 $this->get("/open]",function (Request $request, Response $response, $args) {  ...

  7. 第二阶段:2.商业需求分析及BRD:6.商业需求文档2

    BRD的三个诉求:1.项目很重要,支持.2.有价值,获得重视,纳入战略规划中.3.需要资源,横向的协调资源.   方法:知道决策层是哪些组成,同时找到合适的决策层. BRD决策分类:1.找资本类(CF ...

  8. 玩转MQTT-阿里云之MQTT使用(下)

    玩转MQTT-阿里云之MQTT使用(下) 摘要 为使物联网项目在正式使用时,能顺利切换到具有高并发高负载能力的服务平台,对阿里云提供的MQTT服务进行使用验证. 引言 之前写“MQTT之阿里云使用-玩 ...

  9. 曹工杂谈--使用mybatis的同学,进来看看怎么在日志打印完整sql吧,在数据库可执行那种

    前言 今天新年第一天,给大家拜个年,祝大家新的一年里,技术突突突,头发长长长! 咱们搞技术的,比较直接,那就开始吧.我给大家看看我demo工程的效果(代码下边会给大家的): 技术栈是mybatis/m ...

  10. C# event 事件

    事件第二篇:https://www.cnblogs.com/FavoriteMango/p/11731485.html 曾经面试碰到一道设计题: 现有一个人,一群鸟,人有一把手枪,当人开枪时,所有的鸟 ...