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. QObject 源代码阅读

    我们进入 qt/src 文件夹.你可能对这里的目录名时曾相识,因为几乎这里的所有文件夹名都对应着 Qt 的模块的名字:gui,network,multimedia等等.我们从最核心的 QtCore 开 ...

  2. RHEL/Centos下VSFTPD服务器搭建

    目的 Linux下安装配置vsfptd服务器,并通过客户端验证. 环境 Centos 6 局域网 内容 配置Vsftpd服务器:实现匿名用户.本地用户和虚拟用户登录的配置.匿名用户可以上载文件,上载后 ...

  3. 多线程同步与并发访问共享资源工具—Lock、Monitor、Mutex、Semaphore

    “线程同步”的含义   当一个进程启动了多个线程时,如果需要控制这些线程的推进顺序(比如A线程必须等待B和C线程执行完毕之后才能继续执行),则称这些线程需要进行“线程同步(thread synchro ...

  4. 【Python】使用python操作mysql数据库

    这是我之前使用mysql时用到的一些库及开发的工具,这里记录下,也方便我查阅. python版本: 2.7.13 mysql版本: 5.5.36 几个python库 1.mysql-connector ...

  5. xsl 文件如何定义 Javascript 函数并且调用

    <?xml version='1.0'?><xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3. ...

  6. MT【131】$a_{n+1}\cdot a_n=\dfrac 1n$

    已知数列\(\{a_n\}\)满足\(a_1=1\),\(a_{n+1}\cdot a_n=\dfrac 1n\)(\(n\in\mathbb N^*\))． (1) 求证:\(\dfrac{a_{n ...

  7. 洛谷 P1685 游览 解题报告

    P1685 游览 题目描述 顺利通过了黄药师的考验,下面就可以尽情游览桃花岛了! 你要从桃花岛的西头开始一直玩到东头,然后在东头的码头离开.可是当你游玩了一次后,发现桃花岛的景色实在是非常的美丽!!! ...

  8. Mac上安装python3并设置SublimeREPL插件默认运行python3

    1.安装python3 $ brew search python $ brew install python3 这里安装完后不需要单独添加环境变量,程序已经处理好,可以直接运行python3命令. $ ...

  9. bzoj 1539: [POI2005]Dwu-Double-row

    假设一列交换表示为1,不换表示为0. 身高相同的两个人相当于给其中两列了一个限制条件,要么是两个必须相等,要么一个为零一个为一. 有了关系后我们就可以把每列当成一个点建边,边权为0表示必须相同,1为必 ...

  10. 【最大流/二分图匹配】【网络流24题】【P3254】 圆桌问题

    Description 假设有来自m 个不同单位的代表参加一次国际会议.每个单位的代表数分别为ri (i =1,2,--,m). 会议餐厅共有n 张餐桌,每张餐桌可容纳ci (i =1,2,--,n) ...