<!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;

}

.iphone #div1{

background: yellow;

}

.android #div1{

background: seagreen;

}

#div1{

height: 100px;

}

</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响应式布局的更多相关文章

  1. rem+js响应式布局的设置

    直接调用代码即可,不过不同屏幕宽度要求会不同,相应修改一下就ok了 // rem响应式布局 (function(){ var html=document.querySelector('html') h ...

  2. JS 响应式布局

    1.media 效果为屏幕宽度变化时,背景颜色也变化 <!DOCTYPE html> <html lang="en"> <head> <m ...

  3. HTML5 respond.js 解决IE6~8的响应式布局问题

    HTML5 respond.js 解决IE6~8的响应式布局问题   响 应式布局,理想状态是,对PC/移动各种终端进行响应.媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然 ...

  4. 理解rem实现响应式布局原理及js动态计算rem

    前言 移动端布局中,童鞋们会使用到rem作为css单位进行不同手机屏幕大小上的适配.那么来讲讲rem在其中起的作用和如何动态设置rem的值. 1.什么是rem rem是相对于根元素(html标签)的字 ...

  5. 利用JS去做响应式布局

    利用JS去做响应式布局 js动态改变布局方式 // 取浏览器可视区高宽 var lw = $(window).width(); var lh = $(window).height();// 页面加载完 ...

  6. 另外一款超棒的响应式布局jQuery插件 – Freetile.js

    在线演示 我们曾经介绍过俩款知名的响应式布局插:isotope和masonary,今天我们这里再介绍一款相当不错的响应式布局插件 – Freetile.js,使用它同样可以生成超酷的动态布局效果.相信 ...

  7. 用JS更好的实现响应式布局

    响应式布局更加高效的方法: 代码实现 <script> $(function() { (function(){ var $html = $('html'); var $window = $ ...

  8. CSS3移动端vw+rem不依赖JS实现响应式布局

    1.前言 (1)vw/vh介绍 在使用之前,我们先简单了解一下什么是vw和rem以及它们的作用,vw是css3出现的一个新单位,它是"view width"缩写,定义为把当前屏幕分 ...

  9. 一步步开发自己的博客 .NET版 剧终篇（6、响应式布局 和 自定义样式）

    前言 这次开发的博客主要功能或特点:    第一:可以兼容各终端,特别是手机端.    第二:到时会用到大量html5,炫啊.    第三:导入博客园的精华文章,并做分类.(不要封我)    第四:做 ...

随机推荐

  1. 记一次jmeter从txt文本获取数值并给测试计划的变量赋值，jmeter永久性修改变量。

    前言: 需要永久性的改变变量. 其实这个办法并不是最好的,但是是最容易实现的.后期可做成从数据库里直接取值. 赋值BeanShell import java.io.File; import java. ...

  2. 阿里云短信服务开发报错Java.lang.NoClassDefFoundError:com/aliyuncs/exceptions/ClientException

    手机app获取短信验证码功能时候,遇到的问题.使用的是阿里云的短信服务,下载平台demo时运行不报错,但是在service层调用的时候报错 Java.lang.NoClassDefFoundError ...

  3. 杭州蓝松科技---短视频SDK介绍

    蓝松短视频的口号和 更新周期: 我们的口号是:  蓝松短视频  任意个性化. 我们是杭州蓝松科技,  专业做视频短视频SDK的技术团队. 我们提供 Android/IOS平台上的 短视频编辑SDK,  ...

  4. MongoDB 学习笔记之 mongo-connector安装

    mongo-connector安装: https://github.com/mongodb-labs/mongo-connector 1. yum -y install openssl* 2.编译安装 ...

  5. for循环用腻了，试试列表生成式。

    在编写程序或者查看别人的程序时,经常会遇到列表生成式,这个使用起来并不复杂,但是非常有用,使我们的代码更加简洁灵活.很多python使用者并不太会使用它.今天,就给大家详细讲解列表生成式和生成器表达式 ...

  6. Ionic2优于Ionic1的6个理由

    经历了一个从0到有的app的开发,我已经很熟悉Ionic1了,在此期间我曾发现过Ionic1的一些bug,和一些不合理的地方(根基版本 不同,后续我会陆续发表这些文章),我甚至在此期间对Ionic1进 ...

  7. C++set 和 multiset的使用

    最后一个自由支配的暑假,学一些自己感兴趣的部分,也算为大三作准备. C++中set集合的使用 定义一个int类型的集合 set<int> s: set<int>::iterat ...

  8. 做高逼格程序员之说走就走的「Linux To Go 」

    简介:想拥有一个Linux,在自己的电脑上安装双系统太麻烦.想和WTG一样,随插随用. 使用LTG的好处 安装.修复系统:配置好后的Linux系统极其强大. 工作中我们同样可以使用这个系统,回到家里插 ...

  9. C语言--最大公约数

    //辗转相除法 int main() { int a,b; int t; scanf("%d %d", &a,&b); ) { t = a%b; a = b; b ...

  10. 【RocketMQ源码学习】- 1. 入门

    为什么读RocketMQ 消息队列在互联网应用中使用较为广泛,学习她可以让我门更加了解使用技术的工作原理 透过学习她的源码,拓宽认知 RocketMQ经历了阿里双十一 有哪些名词 Producer 消 ...