rem手机端适配
<script>
document.documentElement.style.fontSize=document.documentElement.clientWidth*100/750+"px";
window.addEventListener("resize",function(){
document.documentElement.style.fontSize=document.documentElement.clientWidth*100/750+"px";
},false)
</script> <script>
//因绝对定位+margin百分比定位在UC中有BUG,翻屏页面建议使用rem单位
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (clientWidth < 375) {
docEl.style.fontSize = 50 + 'px'
} else if (clientWidth > 750) {
docEl.style.fontSize = 100 + 'px'
} else {
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
}
};
recalc();
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
})(document, window);
</script>
rem手机端适配的更多相关文章
- 关于手机端适配的问题(rem,页面缩放)
关于手机端适配的问题(rem,页面缩放) 96 进击的小前端 关注 2018.02.02 13:57 字数 320 阅读 19评论 0喜欢 0 相信很多和会和我碰到一样的情况,就是你用rem去写移动端 ...
- rem手机端页面自适应完美解决方案(最新)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- h5 手机端适配问题汇总
1.uc手机浏览器竟然没有 sessionstorage 醉了 2.opera 浏览器 能识别 a标签中href的 javascript:; 为网址 , 55555 3.safari 的弹框如 ...
- 手机端适配rem代码片段
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 手机端适配方案 媒体查询和flexbale
方法一 flexible 一.npm 包安装 lib-flexible 淘宝适配方案 px2rem px自动转rem npm install lib-flexible --save npm insta ...
- 移动端适配,h5网页,手机端适配兼容方案.可以显示真实的1px边框和12px字体大小,dpr浅析
以前写移动端都是用这段JS解决. (function (doc, win) { // 分辨率Resolution适配 var docEl = doc.documentElement, resizeEv ...
- 手机端适配iPhoneX
iPhoneX取消了物理按键,改成底部小黑条,这一改动导致网页出现比较尴尬的屏幕适配问题.对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可(即常 ...
- rem手机端页面自适应布局(待修正下一篇完美布局)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 手机端使用rem适配
最近一直在做手机端的东西,各种型号的手机适配很是无解.经过同事及百度找到了这么一个方法 html font-size默认100px 将rem进行换算1px==0.01rem; 页面在各个手机适配个别会 ...
随机推荐
- 解决vs2015引用时没有Report Viewer的问题
1.选择“工具”>“Nuget包管理器”>“程序包管理器控制台” 执行命令:Install-Package Microsoft.ReportingServices.ReportViewer ...
- WPF点滴(2) 创建单实例应用程序
最近有同事问道在应用程序启动之后,再次双击应用程序,如何保证不再启动新的应用程序,而是弹出之前已经启动的进程,本质上这就是创建一个单实例的WPF应用程序.在VS的工程树中有一个App.xaml和App ...
- c# 合并重叠时间段的算法
c# 合并重叠时间段的算法 一.采用非排序: 方案一: 使用递归算法,如不喜欢递归的伙伴们,可以使用whie代替. 1.文件:Extract_Chao.cs(核心) using System; usi ...
- BigData – Join中竟然也有谓词下推!?
本文由 网易云发布. 在之前的文章中简要介绍了Join在大数据领域中的使用背景以及常用的几种算法-broadcast hash join .shuffle hash join以及 sort merg ...
- map函数和reduce函数、filter函数的区别
①从参数方面来讲:map()函数: map()包含两个参数,第一个是参数是一个函数,第二个是序列(列表或元组).其中,函数(即map的第一个参数位置的函数)可以接收一个或多个参数.reduce()函数 ...
- day 59 pymysql
PyMySQL介绍 PyMySQL 是在 Python3.x 版本中用于连接 MySQL 服务器的一个库,Python2中则使用mysqldb. PYmysql安装 pip install pymys ...
- 设置jade高亮
来自:https://segmentfault.com/a/1190000002896247 打开sublime3,再打开 view > show console,把下列代码复制到console ...
- (转)C# Enum,Int,String的互相转换 枚举转换--非常实用
Enum为枚举提供基类,其基础类型可以是除 Char 外的任何整型.如果没有显式声明基础类型,则使用 Int32.编程语言通常提供语法来声明由一组已命名的常数和它们的值组成的枚举. 注意:枚举类型的基 ...
- 非常好用的@ResponseBody注解
AJAX的写法: ajax接收json格式: ①如果ajax接收的是text dataType:"text", var json = eval("(" + da ...
- 读/写锁的实现和应用(高并发状态下的map实现)
程序中涉及到对一些共享资源的读和写操作,且写操作没有读操作那么频繁.在没有写操作的时候,两个线程同时读一个资源没有任何问题,所以应该允许多个线程能在同时读取共享资源.但是如果有一个线程想去写这些共享资 ...