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


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中的sortable排序之后的保存状态的解决方法
Jan 28 Javascript
js 创建书签小工具之理论
Feb 25 Javascript
href下载文件根据id取url并下载
May 28 Javascript
jQuery视差滚动效果网页实现方法经验总结
Sep 29 Javascript
webpack3+React 的配置全解
Aug 21 Javascript
基于vue-resource jsonp跨域问题的解决方法
Feb 03 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
Mar 08 Javascript
Vue项目History模式404问题解决方法
Oct 31 Javascript
vuex页面刷新后数据丢失的方法
Jan 17 Javascript
Vue Element UI + OSS实现上传文件功能
Jul 31 Javascript
Vuex,iView UI面包屑导航使用扩展详解
Nov 04 Javascript
vue表单数据交互提交演示教程
Nov 13 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中执行系统外部命令
2006/10/09 PHP
全世界最小的php网页木马一枚 附PHP木马的防范方法
2009/10/09 PHP
php正则过滤html标签、空格、换行符的代码(附说明)
2010/10/25 PHP
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
PHP弱类型的安全问题详细总结
2016/09/25 PHP
php微信公众号开发之快递查询
2018/10/20 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
php根据地址获取百度地图经纬度的实例方法
2019/09/03 PHP
seaJs的模块定义和模块加载浅析
2014/06/06 Javascript
jQuery弹出遮罩层效果完整示例
2016/09/13 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
2016/11/30 Javascript
Bootstrap CSS布局之表格
2016/12/17 Javascript
微信小程序 ecshop地址三级联动实现实例代码
2017/02/28 Javascript
关于webpack代码拆分的解析
2017/07/20 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
2019/10/30 Javascript
JavaScript实现简单计算器
2020/03/19 Javascript
简单了解前端渐进式框架VUE
2020/07/20 Javascript
python sort、sorted高级排序技巧
2014/11/21 Python
python使用socket进行简单网络连接的方法
2015/04/29 Python
在pandas中一次性删除dataframe的多个列方法
2018/04/10 Python
Python多进程与服务器并发原理及用法实例分析
2018/08/21 Python
Python代码太长换行的实现
2019/07/05 Python
Python3.8安装Pygame教程步骤详解
2020/08/14 Python
如何快速一次性卸载所有python包(第三方库)呢
2020/10/20 Python
标签和贴纸印刷:Lightning Labels
2018/03/22 全球购物
加拿大在线旅游公司:Flighthub
2019/03/11 全球购物
成语的广告词
2014/03/19 职场文书
财务部副经理岗位职责范本
2014/06/17 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
2014年宣传思想工作总结
2014/12/10 职场文书
离婚协议书怎么写的
2014/12/14 职场文书
2015年企业团支部工作总结
2015/05/21 职场文书
欠条样本
2015/07/03 职场文书
2016春季幼儿园大班开学寄语
2015/12/03 职场文书
《颐和园》教学反思
2016/02/19 职场文书
MySql分区类型及创建分区的方法
2022/04/13 MySQL