移动适配的几种方案(三种方案)


Posted in Javascript onNovember 25, 2016

1.直接利用js适配

(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

例如:100px=1rem;10px=0.1rem;1px=0.01rem;

2.利用js+less适配

(function (win) {
function setUnitA() {
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + "px";
}
var h = null;
window.addEventListener("resize", function () { clearTimeout(h); h = setTimeout(setUnitA, 300); }, false);
setUnitA();
})(window);

less:文件顶部定义@unit: 750/10rem,然后css全文件的单位直接用@unit。

例如:100px=100/@unit;10px=10/@unit;1px=1/@unit;

3.利用less适配。

html {
font-size: 20px;
}
@media only screen and (min-width: 401px) {
html {
font-size: 25px !important;
}
}
@media only screen and (min-width: 428px) {
html {
font-size: 26.75px !important;
}
}
@media only screen and (min-width: 481px) {
html {
font-size: 30px !important;
}
}
@media only screen and (min-width: 569px) {
html {
font-size: 35px !important;
}
}
@media only screen and (min-width: 641px) {
html {
font-size: 40px !important;
}
}
@unit: 40rem;

例如:100px=100/@unit;10px=10/@unit;1px=1/@unit;

以上所述是小编给大家介绍的移动适配的几种方案(三种方案),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
Aug 12 Javascript
xss文件页面内容读取(解决)
Nov 28 Javascript
关于图片的预加载过程中隐藏未知的
Dec 19 Javascript
瀑布流布局代码一例
Apr 11 Javascript
jQuery中noconflict函数的实现原理分解
Feb 03 Javascript
浅谈jQuery构造函数分析
May 11 Javascript
js过滤HTML标签完整实例
Nov 26 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
Jan 05 Javascript
基于jQuery倒计时插件实现团购秒杀效果
May 13 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 Javascript
限时抢购-倒计时的完整实例(分享)
Sep 17 Javascript
vue实现的多页面项目如何优化打包的步骤详解
Jul 19 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
Nov 25 #Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
Nov 25 #Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
Nov 25 #Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
Nov 25 #Javascript
Bootstrap文件上传组件之bootstrap fileinput
Nov 25 #Javascript
Bootstrap基本布局实现方法详解
Nov 25 #Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
Nov 25 #Javascript
You might like
php之CodeIgniter学习笔记
2013/06/17 PHP
使用PHP Socket写的POP3类
2013/10/30 PHP
PHP访问Google Search API的方法
2015/03/05 PHP
php数字每三位加逗号的功能函数
2015/10/22 PHP
php实现zip文件解压操作
2015/11/03 PHP
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
thinkphp表单上传文件并将文件路径保存到数据库中
2016/07/28 PHP
解决PHP程序运行时:Fatal error: Maximum execution time of 30 seconds exceeded in的错误提示
2016/11/25 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
使用javascript实现页面定时跳转总结篇
2013/09/21 Javascript
AngularJS过滤器filter用法实例分析
2016/11/04 Javascript
js字符串与Unicode编码互相转换
2017/05/17 Javascript
详解Vue-cli 创建的项目如何跨域请求
2017/05/18 Javascript
nodejs使用http模块发送get与post请求的方法示例
2018/01/08 NodeJs
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
2019/04/14 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
2020/08/10 Javascript
Python里隐藏的“禅”
2014/06/16 Python
Python 字符串大小写转换的简单实例
2017/01/21 Python
Python 隐藏输入密码时屏幕回显的实例
2019/02/19 Python
Django后台管理系统的图文使用教学
2020/01/20 Python
浅析Python 抽象工厂模式的优缺点
2020/07/13 Python
Selenium Webdriver元素定位的八种常用方式(小结)
2021/01/13 Python
HTML5拖拉上传文件的简单实例
2017/01/11 HTML / CSS
SCDKey德国:全球领先的数字游戏市场
2019/04/09 全球购物
生态学毕业生自荐信
2013/10/27 职场文书
商务英语大学生职业生涯规划书范文
2014/01/01 职场文书
党支部承诺书范文
2014/03/28 职场文书
四年级学生评语大全
2014/04/21 职场文书
化学工程专业求职信
2014/08/10 职场文书
2015年女职工工作总结
2015/05/15 职场文书
宣传委员竞选稿
2015/11/19 职场文书
《圆的周长》教学反思
2016/02/17 职场文书
详解Java实践之建造者模式
2021/06/18 Java/Android
Java 超详细讲解ThreadLocal类的使用
2022/04/07 Java/Android