关于手机端适配的问题(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

123

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,页面缩放)的更多相关文章

  1. 70.JS---利用原生js做手机端网页自适应解决方案rem布局

    利用原生js做手机端网页自适应解决方案rem布局 刚开始我用的是下面这段代码,然后js通过外部链接引入,最后每次用手机刷新网页的时候都会出现缩略图 function getRem(pwidth, pr ...

  2. 【学习】如何制作手机端html模板(REM的实际应用)

    以前制作手机页面时,总是很迷茫,不知从何着手,页面也不知如何处理.会用一些百分比啊,媒体查询啊,还有就是目测了,但是各种手机端的屏幕适配是个老大难的问题,没有做到百分百兼容的.自从发现了rem这个好东 ...

  3. PHP项目实现手机端和PC端的页面切换

    目前访问页面的要切换成手机端和PC端,原理是通过对设备作出判断,显示不同的功能和页面. 如果手机端和PC端的功能结构不相同,一般会写两套系统,一套适用于PC端,一套适用于手机端. 如果功能相同,则只需 ...

  4. 移动端适配,h5网页,手机端适配兼容方案.可以显示真实的1px边框和12px字体大小,dpr浅析

    以前写移动端都是用这段JS解决. (function (doc, win) { // 分辨率Resolution适配 var docEl = doc.documentElement, resizeEv ...

  5. h5 手机端适配问题汇总

    1.uc手机浏览器竟然没有 sessionstorage 醉了 2.opera 浏览器  能识别 a标签中href的  javascript:; 为网址  ,  55555 3.safari 的弹框如 ...

  6. rem手机端适配

    <script> document.documentElement.style.fontSize=document.documentElement.clientWidth*100/750+ ...

  7. 手机端适配rem代码片段

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 手机端适配iPhoneX

    iPhoneX取消了物理按键,改成底部小黑条,这一改动导致网页出现比较尴尬的屏幕适配问题.对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可(即常 ...

  9. 手机端适配方案 媒体查询和flexbale

    方法一 flexible 一.npm 包安装 lib-flexible 淘宝适配方案 px2rem px自动转rem npm install lib-flexible --save npm insta ...

随机推荐

  1. 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 ...

  2. 转://如何增加linux根目录的磁盘空间(基于LVM)?

    问题引出: 在测试过程中替换so文件,报磁盘空间不足的错误. ▲问题分析: 由于当时系统部署架构的考虑,把软件和数据库部署在了同一台机器上,并且给了30G的磁盘空间.系统上占用磁盘空间的有2部分,一是 ...

  3. day 07 字符编码

    一:字符编码 1.字符编码 什么是字符编码:将人能识别的字符转换为计算机能识别的01二进制的过程就是字符编码,转换的规则就是字符编码表 常用的编码表:ASCII.GBK.Unicode.UTF-8 了 ...

  4. Kali-linux使用Metasploit基础

    Metasploit是一款开源的安全漏洞检测工具.它可以帮助用户识别安全问题,验证漏洞的缓解措施,并对某些软件进行安全性评估,提供真正的安全风险情报.当用户第一次接触Metasploit渗透测试框架软 ...

  5. Spring Security(二十五):7. Sample Applications

    There are several sample web applications that are available with the project. To avoid an overly la ...

  6. LCA--倍增法

    一般来求LCA有3种方法 1.倍增 2.RMQ+欧拉序 3.tarjan(离线) 本文将倍增求lca 这个算法是很常见很常见的 也是较好理解的 (我也不明白假期学长讲的时候我为什么死活都不明白 自闭q ...

  7. poj-1330(暴力写的lca)

    传送门 一看就是lca的板子题 然而 (写这个的时候我忘了怎么写lca) 于是我就试着写暴力了 本以为会tle结果e了一次后居然a掉了 开心到起飞.嘿嘿嘿 但还是格式输出错误了一次而且在ce之前也de ...

  8. 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 -----删除忽略 ...

  9. Python学习总结 10 自动化测试Selenium2

    一, 配置 Selenium2 1 Selenium是什么? Selenium是一个用于Web应用程序测试的工具.Selenium 测试直接运行在浏览器中,就像真正的用户在操作一样.支持的浏览器包括I ...

  10. RichTextbox下Hyperlink的Click无效

    原文:RichTextbox下Hyperlink的Click无效 两种方式解决: 1.<RichTextBox IsReadOnly="True" IsDocumentEna ...