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对象 # @ ...
随机推荐
- 2018-4-12-win10-uwp-使用油墨输入
title author date CreateTime categories win10 uwp 使用油墨输入 lindexi 2018-04-12 14:19:58 +0800 2018-2-13 ...
- Java 学习笔记(14)—— 文件操作
java文件操作主要封装在Java.io.File中,而文件读写一般采用的是流的方式,Java流封装在 java.io 包中.Java中流可以理解为一个有序的字符序列,从一端导向到另一端.建立了一个流 ...
- jdbc链接Oracle数据库的封装
在src下创建properties文件 driver=oracle.jdbc.driver.OracleDriverurl=jdbc:oracle:thin:@//127.0.0.1:1521/XEu ...
- 缓存一致性协议(MESI)
在目前主流的计算机中,cpu执行计算的主要流程如图所示: 数据加载的流程如下: 1.将程序和数据从硬盘加载到内存中 2.将程序和数据从内存加载到缓存中(目前多三级缓存,数据加载顺序:L3->L2 ...
- Rust入坑指南:亡羊补牢
如果你已经开始学习Rust,相信你已经体会过Rust编译器的强大.它可以帮助你避免程序中的大部分错误,但是编译器也不是万能的,如果程序写的不恰当,还是会发生错误,让程序崩溃.所以今天我们就来聊一聊Ru ...
- mysql主从之LVS+keepalived+双主MySQL 负载均衡
LVS(Linux Virtual Server)即Linux 虚拟服务器,是一个的开源负载均衡项目,目前LVS 已经被集成到Linux 内核模块中.LVS 是四层负载均衡,也就是说建立在OSI 模型 ...
- javascript DOM 编程艺术 札记1
一个重要观点 DOM 是指 文档对象模型,它对应浏览器实际认知的东西.html 文本本身和 html 加载到浏览器中显示的东西并不是完全一致的,后者就是 DOM 节点树,它是浏览器实际认知的东西.一个 ...
- 百度DMA+小度App的蓝牙语音解决方案展示
前记 跟着百度也有一段时间了,经过一年多的努力,我们也做出了一些基于百度的语音助手的产品方案.下面就给大家秀一下我们做的产品.有类似需求的朋友可以多多交流.我们的合作方式十分灵活,可以卖芯片你自己 ...
- Markdown破解及汉化
首先,附上用到的资源链接: 链接:https://pan.baidu.com/s/1ULvvCPcCv_P3KyD9ajXUjQ 提取码:5fkb 第一步 直接解压就可以,解压后运行该程序,会出现下图 ...
- 「UVA1328」「POJ1961」 Period 解题报告
UVA1328 Period 其他链接:luogu UVA1328 POJ1961 For each prefix of a given string S with N characters (eac ...