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


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之ESC(第二类混淆)
May 06 Javascript
Jquery 表单取值赋值的一些基本操作
Oct 11 Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
Mar 25 Javascript
Extjs NumberField后面加单位实现思路
Jul 30 Javascript
JQuery中DOM事件绑定用法详解
Jun 13 Javascript
完善的jquery处理机制
Feb 21 Javascript
Move.js入门
Feb 08 Javascript
vue 文件目录结构详解
Nov 24 Javascript
详解如何为你的angular app构建一个第三方库
Dec 07 Javascript
Js代码中的span拼接问题解决
Nov 22 Javascript
Javascript幻灯片播放功能实现过程解析
May 07 Javascript
详细分析React 表单与事件
Jul 08 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
星际RPG字典
2020/03/04 星际争霸
php采用session实现防止页面重复刷新
2015/12/24 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
PHP封装的非对称加密RSA算法示例
2018/05/28 PHP
漂亮的thinkphp 跳转页封装示例
2019/10/16 PHP
js控制不同的时间段显示不同的css样式的实例代码
2013/11/04 Javascript
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
javascript几个易错点记录
2014/11/26 Javascript
轻松创建nodejs服务器(6):作出响应
2014/12/18 NodeJs
jQuery动态背景图片效果实现方法
2015/07/03 Javascript
js验证身份证号有效性并提示对应信息
2015/10/19 Javascript
DIV+CSS+jQ实现省市联动可扩展
2016/06/22 Javascript
jQuery  ready方法实现原理详解
2016/10/19 Javascript
ES6新增的math,Number方法
2017/08/06 Javascript
浅谈es6中export和export default的作用及区别
2018/02/07 Javascript
详解react native页面间传递数据的几种方式
2018/11/07 Javascript
微信小程序—setTimeOut定时器的问题及解决
2019/07/26 Javascript
js实现坦克移动小游戏
2019/10/28 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
vue实现移动端拖动排序
2020/08/21 Javascript
Python3访问并下载网页内容的方法
2015/07/28 Python
python 计算数据偏差和峰度的方法
2019/06/29 Python
python 下载m3u8视频的示例代码
2020/11/11 Python
CSS3实现swap交换动画
2016/01/19 HTML / CSS
兰蔻美国官网:Lancome美国
2017/04/25 全球购物
以下为Windows NT 下的32 位C++程序,请计算sizeof 的值
2016/12/07 面试题
石油大学毕业生自荐信
2014/01/28 职场文书
《世界多美呀》教学反思
2014/03/02 职场文书
开学典礼演讲稿
2014/05/23 职场文书
会计演讲稿范文
2014/05/23 职场文书
求职信模板
2014/05/23 职场文书
2015年春节标语口号
2014/12/09 职场文书
消费者投诉书范文
2015/07/02 职场文书
小学生暑假生活总结
2015/07/13 职场文书
《我是什么》教学反思
2016/02/16 职场文书
使用golang编写一个并发工作队列
2021/05/08 Golang