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


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 相关文章推荐
jQuery温习篇 强大的JQuery选择器
Apr 24 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
Dec 01 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
May 17 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
Dec 14 Javascript
javascript HTML5文件上传FileReader API
Mar 27 Javascript
深入理解js promise chain
May 05 Javascript
全面了解addEventListener和on的区别
Jul 14 Javascript
微信小程序 闭包写法详细介绍
Dec 14 Javascript
Vue.extend构造器的详解
Jul 17 Javascript
vue配置请求本地json数据的方法
Apr 11 Javascript
详解react内联样式使用webpack将px转rem
Sep 13 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
Sep 11 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启用sphinx全文搜索的实现方法
2014/12/24 PHP
PHP中使用array函数新建一个数组
2015/11/19 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
js身份证验证超强脚本
2008/10/26 Javascript
jQuery 使用手册(五)
2009/09/23 Javascript
关于JavaScript与HTML的交互事件
2013/04/12 Javascript
Javascript无参数和有参数类继承问题解决方法
2015/03/02 Javascript
AngularJS模块管理问题的非常规处理方法
2015/04/29 Javascript
JS特效实现图片自动播放并可控的效果
2015/07/31 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
2016/05/19 Javascript
JQuery点击事件回到页面顶部效果的实现代码
2016/05/24 Javascript
JS实现简单的右下角弹出提示窗口完整实例
2016/06/21 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
2017/04/13 Javascript
详解Vuex下Store的模块化拆分实践
2019/07/31 Javascript
jquery 插件重新绑定的处理方法分析
2019/11/23 jQuery
Vue项目前后端联调(使用proxyTable实现跨域方式)
2020/07/18 Javascript
python实现马耳可夫链算法实例分析
2015/05/20 Python
python3中dict(字典)的使用方法示例
2017/03/22 Python
Django数据库操作的实例(增删改查)
2017/09/04 Python
python实现定时提取实时日志程序
2018/06/22 Python
Python 查看list中是否含有某元素的方法
2018/06/27 Python
数组保存为txt, npy, csv 文件, 数组遍历enumerate的方法
2018/07/09 Python
强悍的Python读取大文件的解决方案
2019/02/16 Python
python实践项目之监控当前联网状态详情
2019/05/23 Python
使用Python实现分别输出每个数组
2019/12/06 Python
python redis存入字典序列化存储教程
2020/07/16 Python
百思买加拿大:Best Buy Canada
2018/03/20 全球购物
水果连锁超市创业计划书
2014/01/24 职场文书
室内拓展活动方案
2014/02/13 职场文书
护士上岗前培训自我鉴定
2014/04/20 职场文书
公司联欢会策划方案
2014/05/19 职场文书
高三励志标语
2014/06/05 职场文书
2014年幼儿园国庆主题活动方案
2014/09/16 职场文书
个人职业及收入证明
2014/10/13 职场文书
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis
千万级用户系统SQL调优实战分享
2022/03/03 MySQL