js响应式

　　rem辅助响应式布局：其实就是指在HTML页面的大小不断变化的时候，里面的宽、高、字体等等也随之变化，主要是通过获取window.innerwidth的值来进行判断，7.5rem===100%===750px。

　　js响应式：就是通过navigator.userAgent.indexOf('Android')来获取不同的客户端版本，例如‘Android’,然后使用 window.resize()=function(){} 返回不同样式给客户端.

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <style type="text/css">

            *{

                margin: 0;

                padding: 0;

                box-sizing: border-box;

            }

            #div1{

                /*7.5rem===100%*/

                width: 3.75rem;

                height: 1rem;

                background: skyblue;

                font-size: .7rem;

            }

        </style>

    </head>

    <body>

        <div id="div1">

            helloworld

        </div>

        <script>

//        window.innerWidth === 768 === 7.5

//        ?1rem === 768/7.5 === 1.x

//

            //html字体大小最小是10px,再小就不行。

            var html = document.querySelector('html')

            html.style.fontSize = window.innerWidth/7.5 + 'px'

            window.onresize = function(e){

                console.log(e)

                console.log(window)

                html.style.fontSize = window.innerWidth/7.5 + 'px'

            }

        </script>

    </body>

</html>

rem辅助响应式布局

<!DOCTYPE html>

<html class="mobile">

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .mobile #div1{

                background: skyblue;

            }

            .pc #div1{

                background: pink;

            }

            .pad #div1{

                background: salmon;

            }

            #div1{

                height: 100px;

            }

            .iphone #div1{

                background: yellow;

            }

            .android #div1{

                background: seagreen;

            }

        </style>

    </head>

    <body>

        <div id="div1" >

        </div>

        <script type="text/javascript">

            var html = document.querySelector('html')

            function resize(){

                var screneLength = window.innerWidth;

                html.style.fontSize = window.innerWidth/7.5 + 'px'

                if(screneLength>640&&screneLength<960){

                    html.className = 'pad'

                }else if(screneLength>=960){

                    html.className = 'pc'

                }else{

                    html.className = 'mobile'

                }

                if(navigator.userAgent.indexOf('Android')!==-1){

                    html.className = html.className + ' android'

                }else if(navigator.userAgent.indexOf('iPhone')!==-1){

                    html.className = html.className + ' iphone'

                }else if(navigator.userAgent.indexOf('iPad')!==-1){

                    html.className = html.className + ' ipad'

                }

            }

            resize()

            window.onresize = function(e){

                resize()

            }

        </script>

    </body>

</html>

js响应式

JavaScript辅助响应式的更多相关文章

  1. 由浅入深，带你用JavaScript实现响应式原理（Vue2、Vue3响应式原理）

    由浅入深,带你用JavaScript实现响应式原理 前言 为什么前端框架Vue能够做到响应式?当依赖数据发生变化时,会对页面进行自动更新,其原理还是在于对响应式数据的获取和设置进行了监听,一旦监听到数 ...

  2. Javascript之响应式相册

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  3. amaze ui响应式辅助

    amaze ui响应式辅助 响应式辅助 就是不同的显示屏幕,或者手机的横竖屏,你可以控制栏目的显影,还是挺有帮助的 视口大小 .am-[show|hide]-[sm|md|lg][-up|-down| ...

  4. 什么是响应式Web设计？怎样进行？

    http://beforweb.com/node/6/page/0/3 开始第一篇.老规矩,先无聊的谈论天气一类的话题.十一长假,天气也终于开始有些秋天的味道,坐在屋里甚至觉得需要热咖啡.话说两年前也 ...

  5. 使用 jQuery Deferred 和 Promise 创建响应式应用程序

    这篇文章,我们一起探索一下 JavaScript 中的 Deferred 和 Promise 的概念,它们是 JavaScript 工具包(如Dojo和MochiKit)中非常重要的一个功能,最近也首 ...

  6. CSS3之响应式布局

    在没有C3的时候,响应式布局是通过js来实现的. 开始研究响应式web设计,CSS3 Media Queries是入门. Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以 ...

  7. 【响应式编程的思维艺术】 （1）Rxjs专题学习计划

    目录 一. 响应式编程 二. 学习路径规划 一. 响应式编程 响应式编程,也称为流式编程,对于非前端工程师来说,可能并不是一个陌生的名词,它是函数式编程在软件开发中应用的延伸,如果你对函数式编程还没有 ...

  8. RxJS入门之函数响应式编程

    一.函数式编程 1.声明式(Declarativ) 和声明式相对应的编程⽅式叫做命令式编程(ImperativeProgramming),命令式编程也是最常见的⼀种编程⽅式. //命令式编程: fun ...

  9. 如何实现广告响应式滚动 OwlCarousel2

    githu    https://github.com/OwlCarousel2/OwlCarousel2 OwlCarousel2 官方网址    http://owlcarousel2.githu ...

随机推荐

  1. PHP ini_set

    PHP ini_set用来设置php.ini的值,在函数执行的时候生效,对于虚拟空间来说,很方便,下面为大家介绍下此方法的使用   PHP ini_set用来设置php.ini的值,在函数执行的时候生 ...

  2. 笔记之分布式文件系统（DFS）

    不知何故,老外都挺喜欢使用DFS,但是国内公司用这个的不多.一个具体的需求就是,备份服务器在国外,所以启用DFS把国内的数据同步一份到国外进行备份.最近有机会接触DFS,把一些心得体会记录一下. 1. ...

  3. [转帖]22个必须学习的Linux安全命令

    22个必须学习的Linux安全命令 http://os.51cto.com/art/201808/581401.htm Linux系统的安全性涉及很多方面,从设置帐户到确保用户合法,限制比完成工作所需 ...

  4. 七类网线 支持10gb/s的速度的计算方法

    0. 说明 我是数学白痴, 只是套了下公式... 1. 七类网线的参数: 七类线 ISO/IEC 7类/F级标准 中最新的一种双绞线,它主要为了适应万兆位以太网技术的应用和发展.但它不再是一种非屏蔽双 ...

  5. Qt宏Q_OBJECT展开记录

    c++中的宏 #define A 3.14 展开后把A替换为B #define A(a) #a 展开后用a的字符串替换A(a) #define A(a) a##B 展开后把a和B的字符串连接起来后替换 ...

  6. Java 文件下载功能 解决中文乱码

    Html部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...

  7. hibernate关联关系

    hibernate是一个强大的ORM框架,为了使用面向对象的方式管理数据库,hibernate提供了4中关系设置: 1.一对一 (one-to-one) 2.一对多 (one-to-many) 3.多 ...

  8. idea建立web项目servlet映射的地址/jsp访问不到

    用IntelliJ IDEA 2017新建了一个web项目,成功运行后servlet mapping的地址一直访问不到 原因:在配置tomcat的时候Server中Open browser选项勾选之后 ...

  9. 【BZOJ4035】数组游戏（博弈论）

    [BZOJ4035]数组游戏(博弈论) 题面 BZOJ 洛谷 题解 很明显是一个翻硬币游戏的变形,因此当前局面的\(SG\)函数值就是所有白格子单独存在的\(SG\)函数的异或和. 那么,对于每一个位 ...

  10. Alpha 冲刺 —— 十分之四

    队名 火箭少男100 组长博客 林燊大哥 作业博客 Alpha 冲鸭鸭鸭鸭! 成员冲刺阶段情况 林燊(组长) 过去两天完成了哪些任务 协调各成员之间的工作 协助前后端接口的开发 测试项目运行的服务器环 ...