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


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中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
Nov 30 Javascript
jQuery中读取json文件示例代码
May 10 Javascript
js怎么终止程序return不行换jfslk
May 30 Javascript
jQuery 滑动方法slideDown向下滑动元素
Jan 16 Javascript
JS实现随机乱撞彩色圆球特效的方法
May 05 Javascript
AngularJS身份验证的方法
Feb 17 Javascript
基于javascript实现文字无缝滚动效果
Mar 22 Javascript
JavaScript定时器制作弹窗小广告
Feb 05 Javascript
Angular.JS中的this指向详解
May 17 Javascript
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
Vue.js结合Ueditor富文本编辑器的实例代码
Jul 11 Javascript
JavaScript前端面试扁平数据转tree与tree数据扁平化
Jun 14 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
一个MYSQL操作类
2006/11/16 PHP
谈谈新手如何学习PHP
2006/12/14 PHP
基于PHP CURL获取邮箱地址的详解
2013/06/03 PHP
浅谈php自定义错误日志
2015/02/13 PHP
tp5(thinkPHP5框架)captcha验证码配置及验证操作示例
2019/05/28 PHP
php字符串截取函数mb_substr用法实例分析
2019/06/25 PHP
Javascript之旅 对象的原型链之由来
2010/08/25 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
2011/11/14 Javascript
javascript window.confirm确认 取消对话框实现代码小结
2012/10/21 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
2014/09/22 Javascript
微信分享的标题、缩略图、连接及描述设置方法
2014/10/14 Javascript
使用coffeescript编写node.js项目的方法汇总
2015/08/05 Javascript
快速掌握Node.js模块封装及使用
2016/03/21 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
2017/05/08 Javascript
JavaScript中最常用的10种代码简写技巧总结
2017/06/28 Javascript
详解使用VueJS开发项目中的兼容问题
2018/08/02 Javascript
Vue项目中最新用到的一些实用小技巧
2018/11/06 Javascript
Python实现简单状态框架的方法
2015/03/19 Python
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
python获取当前日期和时间的方法
2015/04/30 Python
基于Python中numpy数组的合并实例讲解
2018/04/04 Python
Pandas 同元素多列去重的实例
2018/07/03 Python
python中的常量和变量代码详解
2018/07/25 Python
Python地图绘制实操详解
2019/03/04 Python
python 实现绘制整齐的表格
2019/11/18 Python
浅谈keras中的Merge层(实现层的相加、相减、相乘实例)
2020/05/23 Python
Python unittest如何生成HTMLTestRunner模块
2020/09/08 Python
通过实例解析python subprocess模块原理及用法
2020/10/10 Python
Html5 new XMLHttpRequest()监听附件上传进度
2021/01/14 HTML / CSS
GIVENCHY纪梵希官方旗舰店:高定彩妆与贵族护肤品
2018/04/16 全球购物
意大利火车票和铁路通行证专家:ItaliaRail
2019/01/22 全球购物
有影响力的人、名人和艺术家的官方商品:Represent
2019/11/26 全球购物
Envie de Fraise意大利:法国网上推出的孕妇装品牌
2020/10/18 全球购物
学院书画协会部门岗位职责
2013/12/01 职场文书
Go语言切片前或中间插入项与内置copy()函数详解
2021/04/27 Golang
MySQL的表级锁,行级锁,排它锁和共享锁
2022/07/15 MySQL