pc端的弹性布局适配方案
方案及原理:使用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端的弹性布局适配方案的更多相关文章
- 30行js让你的rem弹性布局适配所有分辨率(含竖屏适配)(转载)
用rem来实现移动端的弹性布局是个好主意!用法如下: CSS @media only screen and (max-width: 320px), only screen and (max-devic ...
- 30行js让你的rem弹性布局适配所有分辨率(含竖屏适配)
用rem来实现移动端的弹性布局是个好主意!用法如下: CSS @media only screen and (max-width: 320px), only screen and (max-devic ...
- PC 端响应式布局
前言:PC端 电脑显示器的尺寸种类还是很多的,台式电脑和笔记本电脑尺寸相差就更明显,所以响应式布局还是很重要的,甚至是必须要考虑的. 响应式的页面好不好,在后管平台上很明显.因为后管平台,一般是全屏显 ...
- 探讨兼容IE低版本的PC端响应式布局
http://www.jiangweishan.com/article/lowIeResposive.html 响应式布局,oh my god!!有点醉了,感觉是老生常谈的话题了.虽然已经谈过很多了, ...
- 最佳移动端h5自适应rem适配方案
一.利用lib-flexible.postcss-plugin-px2rem插件 进行移动端rem适配. 1.第一 引入lib-flexible . 安装lib-flexible: npm i lib ...
- 微信小程序填坑之路(三):布局适配方案(rpx、px、vw、vh)
因为小程序是以微信为平台运行的,可以同时运行在android与ios的设备上,所以不可避免的会遇到布局适配问题,特别是在iphone5上,因为屏幕尺寸小的缘故,也是适配问题最多的机型,下面就简单介绍几 ...
- 手淘lib-flexible布局适配方案
前置知识:什么是rem CSS3新增的一个相对单位rem(root em,根em).rem是相对于根节点(或者是html节点).如果根节点设置了font-size:10px;那么font-size:1 ...
- 移动端 移动web屏幕适配方案 随不同宽度的屏幕而改变
链接地址1:http://www.cnblogs.com/zjzhome/p/4802157.html 链接地址2:http://www.html-js.com/article/Mobile-term ...
- 30行js rem弹性布局适配所有分辨率
<script> /* # 按照宽高比例设定html字体, width=device-width initial-scale=1版 # @pargam win 窗口window对象 # @ ...
随机推荐
- 游戏《Minecraft》或其他应用程序 实现 自动更新 客户端版本
本渣又来写(水)博客了. 先说一下,我这个解决方案的安全性并不是企业级的,咱们就是一群穷开服的Minecraft玩家. 如果你要投入到企业级应用(容易被黑客攻击的场景),请自己写,思路凑合看看.不然安 ...
- Linux普通用户执行特定的命令配置
最近处理了一个二级CASE,驻场运维的初级工程师安装软件的时候执行了yum update,导致用户生产系统的glibc也升级了,使得用户的生产调度软件无法使用.研究了两三天,最靠谱的做法如下: Ste ...
- IDE介绍之——CLion
CLion是JetBrains公司旗下发布的一款跨平台C/C++IDE开发工具. 使用CLion上最好要会手写CMake.要先安装编译器套件(一般安装MinGW就行). 对C++标准的支持:基本上Cl ...
- Python 实现栈与队列
#基于Python2.7 #基于顺序表实现 #发现用Python写题时,没有像写C++时方便的STL可用,不过查阅资料之后发现用class实现也很简洁,不过效率应该不是很高 Python实现栈并使用: ...
- JVM系列(二):JVM的内存模型
深入理解JVM内存模型 Java虚拟机在执行Java程序的过程中,把它所管理里的内存划分了不同的数据类型区域,作为一名开发者,我们需要了解jvm的内存分配机制以及这些不同的数据区域各自的作用. ...
- 7.13 Python基础语法
Python基础语法 编码: 默认情况下,Python 3 源码文件以 UTF-8 编码,所有字符串都是 unicode 字符串. 当然你也可以为源码文件指定不同的编码 python2.7中有两个函数 ...
- MementoPattern(备忘录模式)-----Java/.Net
备忘录模式(Memento Pattern)保存一个对象的某个状态,以便在适当的时候恢复对象.备忘录模式属于行为型模式.
- ECShop二次开发指南-文件结构(二)
ecshop文件架构说明 注意:因各版权不一,大概参考/* ECShop 2.5.1 的结构图及各文件相应功能介绍 ECShop2.5.1_Beta upload 的目录 ┣ activity.p ...
- 「洛谷P1343」地震逃生 解题报告
P1343 地震逃生 题目描述 汶川地震发生时,四川XX中学正在上课,一看地震发生,老师们立刻带领x名学生逃跑,整个学校可以抽象地看成一个有向图,图中有n个点,m条边.1号点为教室,n号点为安全地带, ...
- 1032 挖掘机技术哪家强 (20 分)C语言
题目描述 为了用事实说明挖掘机技术到底哪家强,PAT组织了一场挖掘机技能大赛.现请你根据比赛结果统计出技术最强的那个学校. 输入描述: 输入在第1行给出不超过105的正整数N,即参赛人数.随后N行,每 ...