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-2-13-wpf-GifBitmapDecoder-解析-gif-格式
title author date CreateTime categories wpf GifBitmapDecoder 解析 gif 格式 lindexi 2018-2-13 17:23:3 +08 ...
- LDO
1.出现原因:便携式设备的发展,使得人们对电源的要求越来越高,而以前一直使用的三段稳压电源无法满足需求. 2.特点:内部的PNP管导通压降很小,自耗很低. 3.应用场合: (1)不同电压输出级别的应用 ...
- 16.MindManager整理交互思路
点住主题同时按ins键可以插入一个支节点 右键主题选择下方的排列图表 可以选择排列方式 按住主题同时ctr+v就会粘帖成一个子主题 文本也可以复制黏贴 主题内容可以直接选择拖动更改结构 选择主题框上的 ...
- 超简单!pytorch入门教程(四):准备图片数据集
在训练神经网络之前,我们必须有数据,作为资深伸手党,必须知道以下几个数据提供源: 一.CIFAR-10 CIFAR-10图片样本截图 CIFAR-10是多伦多大学提供的图片数据库,图片分辨率压缩至32 ...
- php strcmp函数漏洞
strcmp函数漏洞 适用5.3版本以前的php 函数作用:字符串比较 要求传入字符串.如果传入非字符串呢? 结果函数报错!但是函数返回“0” . 虽然报错了但函数的判断却是“相等” 如何传入非字符 ...
- 机器学习之路--Pandas
Pandas 是对numpy的封装 Pandas 核心结构DataFrame 近似看出矩阵结构panda字符型叫object dataframe其中一行或者一列叫series dataframe 里面 ...
- Java和JavaScript之间的区别
1.简介 通过优锐课核心java学习笔记中,我们可以看到,Java和JavaScript之间的区别.我们将在本文中比较Java语言和JavaScript语言.JavaScript由Netscape开发 ...
- es6种for循环中let和var区别
let和var区别: for(var i=0;i<5;i++){ setTimeout(()=>{ console.log(i);//5个5 },100) } console.log(i) ...
- cc协议(知识共享,Creative Commons),程序员的基础守则之一
知识共享 我在浏览git开源代码的时候,浏览到一句话: 版权声明:本文为CSDN博主「...」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明. 原文链接:http ...
- Keystone V3 API Examples
There are few things more useful than a set of examples when starting to work with a new API. Here a ...