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; 页面在各个手机适配个别会 ...
随机推荐
- EBS Webservice Timeout,HTTP Server Return "500 Internal Server Error"
http://blog.itpub.net/26687597/viewspace-1207571/ 基于Oracle EBS R12,开发了一个Webservice用于返回某项主数据,当请求的数据量非 ...
- LinqToHubble介绍及简单使用步骤——LinqToHubble是对HubbleDotnet的封装
或许你还你知道HubbleDotnet,下面简单对HubbleDotnet坐下介绍. HubbleDotNet是由盘古分词作者——eaglet 开发的一个基于.net framework 的开源免费的 ...
- 手写数字识别---demo
数据准备 课程中获取数据的方法是从库中直接load_data from keras.datasets import mnist (x_train, y_train), (x_test, y_test) ...
- Mac OS 10.12 - 如何关闭Rootless机制?
一,进入恢复模式(Recovery):具体操作方法参见下面这篇博客: http://www.cnblogs.com/sunylat/p/6414697.html 二,关闭Rootless机制 1,选择 ...
- 使用python进行短信轰炸
本文作者:i春秋作家——Hacker1ee 大家好,我是1ee(因为在作家群,就不加Hacker这个前缀了,怕被大佬打..) 刚加入i春秋作家组希望大家多多关照,也欢迎大家找我交流 今天我来讲讲我最近 ...
- Windows 内核漏洞学习—空指针解引用
原标题:Windows Kernel Exploitation – NullPointer Dereference 原文地址:https://osandamalith.com/2017/06/22/w ...
- Xshell连接不上Linux
用Xshell连接Linux的时候报错了: Connecting to 192.168.79.147:22...Could not connect to '192.168.79.147' (port ...
- 删除 Win10 更新后的 Z 盘符(已验证)
如果你有一些不希望被访客看见的文件.照片或者视频,希望将它隐藏在一个只有自己知道的地方,那么今天的这篇教程非常适合你.我们要实现的最终效果是这样的:在Win10的"此电脑"中,有这 ...
- C#里面BLL、Model、DAL、UI层
C# 三层架构分为:表现层(UI).业务逻辑层(BLL).数据访问层(DAL)再加上实体类库(Model) 1.实体类库(Model),主要存放数据库中的表字段. 操作: (1)先建立实体类库Mode ...
- KBEngine 安装
其实这篇的内容官方文档都有, 但是既然打算记录一下学习笔记, 也就先从安装开始了. 一 下载源代码 进入github下载最新release的源码压缩包. windows选择zip, 下载完成之后右键解 ...