<!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. chsime.exe cpu占用高

    打开管理员的命令提示符,运行 if exist "%SystemRoot%\System32\InputMethod\CHS\ChsIME.exe" (takeown /f &qu ...

  2. Dropout原理与实现

    Dropout是深度学习中的一种防止过拟合手段,在面试中也经常会被问到,因此有必要搞懂其原理. 1 Dropout的运作方式 在神经网络的训练过程中,对于一次迭代中的某一层神经网络,先随机选择中的一些 ...

  3. Java 学习笔记之 Suspend和Resume

    Suspend和Resume: Suspend和Resume使用方法: 以下例子证明了线程确实被暂停了,而且还可以恢复成运行状态. public class SuspendResumeThread e ...

  4. ELK 学习笔记之 Logstash之codec配置

    Logstash之codec: Logstash处理流程: input=>decode=>filter=>encode=>output 分类: Plain编码: input{ ...

  5. Scala 学习笔记之集合(2)

    class StudentTT extends StudentT{ def sayBye(name: String, age: Int)(address: String){ println(" ...

  6. C++代码注入

    一.C++代码注入原则: 在注入代码中不允许使用API. 在注入代码中不允许使用全局变量. 在注入代码中不允许使用字符串(编译时也被当做全局变量). 在注入代码中不允许使用函数嵌套. 二.注入代码编写 ...

  7. .NET斗鱼直播弹幕客户端(下)

    .NET斗鱼直播弹幕客户端(下) 在上篇文章中,我们提到了如何使用.NET连接斗鱼TV直播弹幕的基本操作.然而想要做得好,做得容易扩展,就需要做进一步的代码整理. 本文将涉及以下内容: 介绍如何使用R ...

  8. 记录 java 安卓 各类引用包报错处理方法 例如 android.support.v4.app.+ ，io.reactivex.+

    可能导致的原因: 1. 引用包不存在(存在也报错就是 版本不对) 2.有资源文件 重名,报错之类的问题 3. 别人提交了资源文件或者配置文件(这是最常见的,特别是新手,我也是),后续遇到再加 解决方法 ...

  9. java中&和&&

    &和&&都可以用作逻辑与的运算符,表示逻辑与(and) &&还具有短路的功能,即如果第一个表达式为false,则不再计算第二个表达式,例如: If(x==33 ...

  10. git远程分支不显示问题解决

    因为项目太大,然后直接git clone拉不下来代码 会报error: RPC failed; HTTP 504 curl 22 The requested URL returned error: 5 ...