关于手机端适配的问题(rem,页面缩放)
关于手机端适配的问题(rem,页面缩放)
96 进击的小前端 关注
2018.02.02 13:57 字数 320 阅读 19评论 0喜欢 0
相信很多和会和我碰到一样的情况,就是你用rem去写移动端的时候,如果想引用别的UI库的时候,自己页面写的是rem单位,而ui库的css里面写的是px,大家都知道,rem是在html上设置font-size 字体大小。然后,,然后ui库的里面的px 会和 rem冲突,很麻烦,搜了很多办法都没找到好的解决办法!!!
rem的做法
(function() {
var doc = document,
win = window;
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if(!clientWidth) return;
//如果屏幕大于750(750是根据我效果图设置的,具体数值参考效果图),就设置clientWidth=750,防止font-size会超过100px
if(clientWidth > 750) { clientWidth = 750 }
//设置根元素font-size大小
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
};
//屏幕大小改变,或者横竖屏切换时,触发函数
win.addEventListener(resizeEvt, recalc, false);
//文档加载完成时,触发函数
doc.addEventListener('DOMContentLoaded', recalc, false);
})();
本人在看帖子的时候,看到一个淘宝缩放页面的方法,亲测,效果不错,直接用px单位写,根据meta标签进行缩放。这样如果想引用ui库的css 就不会冲突了,嗯不错不错。
附上缩放代码
但是。。。但是。如果做app套浏览器壳的话,是不允许你使用meta标签缩放的。
网易的做法是用css进行缩放。具体做法如下:
html
css
/* css reset from normalize*/
html {
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
body {
margin: 0;
}
/* 上下拉动滚动条时卡顿、慢 */
body {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
/* ios和android下触摸元素时出现半透明灰色遮罩 */
a {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
#getHeight {
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
z-index: -10;
}
#content {
width: 750px;
transform-origin: 0 0;
font-size: 36px;
}
#content {
height: 100%;
}
js
这样方法的好处就是用css进行缩放,在做app的时候也是没有问题的,缺点,就是代码比较多。
不喜勿喷。谢谢!!!
关于手机端适配的问题(rem,页面缩放)的更多相关文章
- 70.JS---利用原生js做手机端网页自适应解决方案rem布局
利用原生js做手机端网页自适应解决方案rem布局 刚开始我用的是下面这段代码,然后js通过外部链接引入,最后每次用手机刷新网页的时候都会出现缩略图 function getRem(pwidth, pr ...
- 【学习】如何制作手机端html模板(REM的实际应用)
以前制作手机页面时,总是很迷茫,不知从何着手,页面也不知如何处理.会用一些百分比啊,媒体查询啊,还有就是目测了,但是各种手机端的屏幕适配是个老大难的问题,没有做到百分百兼容的.自从发现了rem这个好东 ...
- PHP项目实现手机端和PC端的页面切换
目前访问页面的要切换成手机端和PC端,原理是通过对设备作出判断,显示不同的功能和页面. 如果手机端和PC端的功能结构不相同,一般会写两套系统,一套适用于PC端,一套适用于手机端. 如果功能相同,则只需 ...
- 移动端适配,h5网页,手机端适配兼容方案.可以显示真实的1px边框和12px字体大小,dpr浅析
以前写移动端都是用这段JS解决. (function (doc, win) { // 分辨率Resolution适配 var docEl = doc.documentElement, resizeEv ...
- h5 手机端适配问题汇总
1.uc手机浏览器竟然没有 sessionstorage 醉了 2.opera 浏览器 能识别 a标签中href的 javascript:; 为网址 , 55555 3.safari 的弹框如 ...
- rem手机端适配
<script> document.documentElement.style.fontSize=document.documentElement.clientWidth*100/750+ ...
- 手机端适配rem代码片段
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 手机端适配iPhoneX
iPhoneX取消了物理按键,改成底部小黑条,这一改动导致网页出现比较尴尬的屏幕适配问题.对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可(即常 ...
- 手机端适配方案 媒体查询和flexbale
方法一 flexible 一.npm 包安装 lib-flexible 淘宝适配方案 px2rem px自动转rem npm install lib-flexible --save npm insta ...
随机推荐
- BZOJ3237:[AHOI2013]连通图(线段树分治,并查集)
Description Input Output Sample Input 4 5 1 2 2 3 3 4 4 1 2 4 3 1 5 2 2 3 2 1 2 Sample Output Connec ...
- 转://如何增加linux根目录的磁盘空间(基于LVM)?
问题引出: 在测试过程中替换so文件,报磁盘空间不足的错误. ▲问题分析: 由于当时系统部署架构的考虑,把软件和数据库部署在了同一台机器上,并且给了30G的磁盘空间.系统上占用磁盘空间的有2部分,一是 ...
- day 07 字符编码
一:字符编码 1.字符编码 什么是字符编码:将人能识别的字符转换为计算机能识别的01二进制的过程就是字符编码,转换的规则就是字符编码表 常用的编码表:ASCII.GBK.Unicode.UTF-8 了 ...
- Kali-linux使用Metasploit基础
Metasploit是一款开源的安全漏洞检测工具.它可以帮助用户识别安全问题,验证漏洞的缓解措施,并对某些软件进行安全性评估,提供真正的安全风险情报.当用户第一次接触Metasploit渗透测试框架软 ...
- Spring Security(二十五):7. Sample Applications
There are several sample web applications that are available with the project. To avoid an overly la ...
- LCA--倍增法
一般来求LCA有3种方法 1.倍增 2.RMQ+欧拉序 3.tarjan(离线) 本文将倍增求lca 这个算法是很常见很常见的 也是较好理解的 (我也不明白假期学长讲的时候我为什么死活都不明白 自闭q ...
- poj-1330(暴力写的lca)
传送门 一看就是lca的板子题 然而 (写这个的时候我忘了怎么写lca) 于是我就试着写暴力了 本以为会tle结果e了一次后居然a掉了 开心到起飞.嘿嘿嘿 但还是格式输出错误了一次而且在ce之前也de ...
- git冲突Please move or remove them before you can merge
解决Git冲突造成的Please move or remove them before you can merge git clean -d -fx ""其中x -----删除忽略 ...
- Python学习总结 10 自动化测试Selenium2
一, 配置 Selenium2 1 Selenium是什么? Selenium是一个用于Web应用程序测试的工具.Selenium 测试直接运行在浏览器中,就像真正的用户在操作一样.支持的浏览器包括I ...
- RichTextbox下Hyperlink的Click无效
原文:RichTextbox下Hyperlink的Click无效 两种方式解决: 1.<RichTextBox IsReadOnly="True" IsDocumentEna ...