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

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;

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

赞 (0)

相关推荐

  • 手机平板等移动端适配跳转URL的js代码

    复制代码 代码如下: <script type="text/javascript">if(/AppleWebKit.*mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.

  • H5移动端适配 Flexible方案

    H5移动端适配 Flexible方案

    一.移动端一些概念 视觉稿 (选取一款手机的屏幕宽高作为基准) 在前端开发之前,视觉 MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1)首先,选取一款手机的屏幕宽高作为基准(以前是iPhone4 的320×480,现在更多的是iphone6的 375×667). 2)对于retina 屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2 倍,也就是说像素点个数是原来的 4倍(对 iphone6而言:原

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

    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

  • Android中去掉标题栏的几种方法(三种)

    Android中去掉标题栏的几种方法(三种)

    1.在java代码中 (SplashActivity继承AppCompatActivity时无效) 2.在manifest.xml中改Theme 3.先在style.xml中自定义style <?xml version="1.0" encoding="UTF-8" ?> <resources> <style name="notitle"> <item name="android:windowNo

  • vue中(el-button的五种类型,三种css格式)

    vue中(el-button的五种类型,三种css格式)

    目录 vue(el-button五种类型,三种css格式) vue中的样式 实例一 实例二 实例三 vue(el-button五种类型,三种css格式) 在写一个系统的css文件的时候,发现了不同类型的button的初始颜色不同,为了完美的使button的颜色和背景的颜色相映照,就去搜了一下,小做总结,为以后的使用做准备. <div> <el-button><span>默认按钮</span></el-button> <el-button t

  • Nginx实现404页面的几种方法(三种)

    一个网站项目,肯定是避免不了404页面的,通常使用Nginx作为Web服务器时,有以下集中配置方式,一起来看看. 第一种:Nginx自己的错误页面 Nginx访问一个静态的html 页面,当这个页面没有的时候,Nginx抛出404,那么如何返回给客户端404呢? 看下面的配置,这种情况下不需要修改任何参数,就能实现这个功能. server { listen 80; server_name www.test.com; root /var/www/test; index index.html ind

  • MongoDB中优雅删除大量数据的三种方式

    MongoDB中优雅删除大量数据的三种方式

    目录 为什么要"瘦身"呢? MongoDB中删除数据的三种方式 三种方式的执行效率对比 1. remove 2. deleteMany 3. bulkWrite 通过 Write Concern 规避主从延迟 删除过程中遇到的Bug 总结 删除大量数据,无论是在哪种数据库中,都是一个普遍性的需求.除了正常的业务需求,我们需要通过这种方式来为数据库"瘦身". 为什么要"瘦身"呢? 1.表的数据量到达一定量级后,数据量越大,表的查询性能会越差. 毕竟

  • java的三种随机数生成方式

    目录 第一种 第二种 第三种 随机数的产生在一些代码中很常用,也是我们必须要掌握的.而java中产生随机数的方法主要有三种: 第一种:new Random() 第二种:Math.random() 第三种:currentTimeMillis() 第一种 第一种需要借助java.util.Random类来产生一个随机数发生器,也是最常用的一种,构造函数有两个,Random()和Random(long seed).第一个就是以当前时间为默认种子,第二个是以指定的种子值进行.产生之后,借助不同的语句产生

  • 详解Java实现JSONArray转Map的三种实现方式

    目录 第一种 第二种 第三种 本文只是自己常用的三种,自己总结一下,不是只有这三种,杠精走开: JSONArray数据 [ { "flagType": 1, "flagIcon": "1.jpg" }, { "flagType": 2, "flagIcon": "2.jpg" }, { "flagType": 3, "flagIcon": &quo

  • Java分布式锁的三种实现方案

    方案一:数据库乐观锁 乐观锁通常实现基于数据版本(version)的记录机制实现的,比如有一张红包表(t_bonus),有一个字段(left_count)记录礼物的剩余个数,用户每领取一个奖品,对应的left_count减1,在并发的情况下如何要保证left_count不为负数,乐观锁的实现方式为在红包表上添加一个版本号字段(version),默认为0. 异常实现流程 -- 可能会发生的异常情况 -- 线程1查询,当前left_count为1,则有记录 select * from t_bonus

  • SpringBoot操作Redis三种方案全解析

    使用 Java 操作 Redis 的方案很多,Jedis 是目前较为流行的一种方案,除了 Jedis ,还有很多其他解决方案,如下: 除了这些方案之外,还有一个使用也相当多的方案,就是 Spring Data Redis. 在传统的 SSM 中,需要开发者自己来配置 Spring Data Redis ,这个配置比较繁琐,主要配置 3 个东西:连接池.连接器信息以及 key 和 value 的序列化方案. 在 Spring Boot 中,默认集成的 Redis 就是 Spring Data Re

  • 在 Ubuntu 和 Debian 上启用双因子身份验证的三种备选方案

    在 Ubuntu 和 Debian 上启用双因子身份验证的三种备选方案

    如何为你的 SSH 服务器安装三种不同的双因子身份验证方案. 如今,安全比以往更加重要,保护 SSH 服务器是作为系统管理员可以做的最为重要的事情之一.传统地,这意味着禁用密码身份验证而改用 SSH 密钥.无疑这是你首先应该做的,但这并不意味着 SSH 无法变得更加安全. 双因子身份验证就是指需要两种身份验证才能登录.可以是密码和 SSH 密钥,也可以是密钥和第三方服务,比如 Google.这意味着单个验证方法的泄露不会危及服务器. 以下指南是为 SSH 启用双因子验证的三种方式. 当你修改 S

随机推荐