前端pc版的简单适配
我们都知道对于前端pc版本的适配是一个难题,大部分都是做的媒体查询。但是有时间公司不要媒体查询 就是需要不管多大的屏幕都是满屏显示。我就在考虑为啥不用rem给pc端做个适配。
我是基于设计图是1920的做的简单的js适配。
<script type="text/javascript">
var winWidth = document.documentElement.offsetWidth ||
document.body.offsetWidth
winWidth = winWidth < 1366 ? 1366 : winWidth
var oHtml = document.getElementsByTagName('html')[0]
oHtml.style.fontSize = 100 * winWidth / 1920 + 'px' window.addEventListener('resize', function () {
var winWidth = document.documentElement.offsetWidth || document.body.offsetWidth
winWidth = winWidth < 1400 ? 1400 : winWidth
var oHtml = document.getElementsByTagName('html')[0]
oHtml.style.fontSize = 100 * winWidth / 1920 + 'px'
})
</script>
把这个js脚本放到根目录下,也就是index.html中。我们所测的尺寸去除以100就可以转化位rem。
顺便说一句,我的项目是vue所搭建的。当然现在是vue-cli3的话,就放在public文件下的index文件中。
这样就完成了简单的pc端适配
前端pc版的简单适配的更多相关文章
- Pygame制作微信打飞机游戏PC版
使用Pygame制作微信打飞机游戏PC版 转至:http://www.cnblogs.com/dukeleo/p/3339780.html 前一阵子看了一篇文章:青少年如何使用Python开始游戏 ...
- 仿PC版微信的练手项目(可实时通讯)
仿PC版微信的DEMO 本项目是由一个仿PC版微信的vue前端项目,和一个使用leancloud进行数据存储的.提供WebSocket的node后端项目构成. 本项目使用的技术栈:vue + vue- ...
- 使用Pygame制作微信打飞机游戏PC版
前一阵子看了一篇文章:青少年如何使用Python开始游戏开发 .看完照葫芦画瓢写了一个,觉得挺好玩儿,相当于简单学了下Pygame库.这篇文章是个12岁小孩儿写的,国外小孩儿真心NB,想我12岁的时候 ...
- 前端PC页面,移动端页面问题笔记~~
<!DOCTYPE html> <html> <head> <meta charset="gbk"/> <meta name= ...
- 微信小程序支持windows PC版了
微信 PC 版新版本中,支持打开聊天中分享的小程序,开发者可下载安装微信 PC 版内测版本进行体验和适配.最新版微信开发者工具新增支持在微信 PC 版中预览小程序 查看详情 微信 PC 版内测版下载地 ...
- 基于 HTML + WebGL 结合 23D 的疫情地图实时大屏 PC 版
前言 2019年12月以来,湖北省武汉市陆续发现了多例肺炎病例,现已证实为一种新型冠状病毒感染引起的急性呼吸道传染病并蔓延全国,肺炎疫情牵动人心,人们每天起来第一件事变成了关注疫情进展,期望这场天灾早 ...
- 基于 HTML + WebGL 结合 23D 的疫情地图实时大屏 PC 版【转载】
前言 2019年12月以来,湖北省武汉市陆续发现了多例肺炎病例,现已证实为一种新型冠状病毒感染引起的急性呼吸道传染病并蔓延全国,肺炎疫情牵动人心,人们每天起来第一件事变成了关注疫情进展,期望这场天灾早 ...
- wifi万能钥pc版提示手机未连接
关于PC版万能钥匙的用法 大部分人都是在“未连接到手机”再不知道怎么搞了 怎么连接到手机呢? 首先要把你的手机变成路由器 让电脑连上 这个都知道怎么搞吧 手机版万能钥匙有个一键让手机变成热点 再用电 ...
- 全能直播王PC版-0707-full_codecs
全能直播王是一款高清流畅的全平台的电视直播应用,让您随时随地看高清电视直播. [全能特色] 1. 收录全国1400多个直播频道,包括湖南卫视.江苏卫视.浙江卫视等热门频道. 2. 频道多线路自动选择, ...
随机推荐
- 模仿ecshop建立木瓜商城数据库(MySQL)
1. 安装ecshop(打开gd扩展) 2. 使用图形化界面工具,如phpmyadmin查看数据.(以前用命令行,主要锻炼代码熟练度!) # 建木瓜库 create database mugua ch ...
- Eclipse Equinox DS(Declarative Service)
Equinox DS's METE-INF/MANIFEST.MF Manifest-Version: 1.0 Lazy-ManifestFilter: (Service-Component=*) B ...
- <meta name="viewport" content="width=device-width, initial-scale=1.0">理解
ViewPort <meta>标记用于指定用户是否可以缩放Web页面,如果可以,那么缩放到的最大和最小缩放比例是什么.使用ViewPort <meta>标记还表示文档针对移动设 ...
- XP无法访问SharePoint 2010的问题
最近用户反馈XP系统的电脑无法访问SharePoint 2010系统,换成了火狐浏览器后可以正常访问,但是在上传附件时出现异常,支持人员给的解决方案是换操作系统,要换成win7. 但是因为工作原因,不 ...
- Servlet 2.5为cookie配置HTTPOnly属性
cookie的HTTPOnly属性,主要是用来防止JavaScript来读取cookie,默认情况下,JavaScript可以通过document.cookie来读取cookie,这样是很不安全的.通 ...
- Struts2学习-拦截器
1.新建项目user4,建立好和user3一样的目录,与之相比只是添加几个类,主要是struts.xml和action类的改变,其结果没有太大的变化 struts,xml <?xml versi ...
- Android(java)学习笔记5:线程的生命周期
1. 我们学习线程本质就是学习如何开始线程和终止线程.下面这个关于线程的生命周期图,要牢记: 新建状态:当程序使用new关键字创建了一个线程之后,该线程就处于新建状态.此时和其他Java对象一样,它仅 ...
- NYOJ298 点的变换 【矩阵乘法经典】
任意门:http://acm.nyist.edu.cn/JudgeOnline/problem.php?pid=298 点的变换 时间限制:2000 ms | 内存限制:65535 KB 难度:5 ...
- stixel-net绘制指标图
需解决问题: 1.离散点进行平滑曲线画法 https://blog.csdn.net/cdqn10086/article/details/70143616 def draw_curve(x,y,img ...
- Android学习笔记_20_访问应用权限汇总
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com. ...