<!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. Spring 事务注解@Transactional

    事务管理一般有编程式和声明式两种,编程式是直接在代码中进行编写事物处理过程,而声名式则是通过注解方式或者是在xml文件中进行配置,相对编程式很方便. 而注解方式通过@Transactional 是常见 ...

  2. linux分析利刃之sar命令详解

    一.sar的概述 在我使用的众多linux分析工具中,sar是一个非常全面的一个分析工具,可以比较瑞士军刀,对文件的读写,系统调用的使用情况,磁盘IO,CPU相关使用情况,内存使用情况,进程活动等都可 ...

  3. vue平行组件传值

    平行组件传值 通过平行组件传值可以实现任何情境下的传值,包括(父传子,子传父) 代码示例 <!DOCTYPE html> <html lang="en"> ...

  4. 夯实Java基础系列14：深入理解Java枚举类

    目录 初探枚举类 枚举类-语法 枚举类的具体使用 使用枚举类的注意事项 枚举类的实现原理 枚举类实战 实战一无参 实战二有一参 实战三有两参 枚举类总结 枚举 API 总结 参考文章 微信公众号 Ja ...

  5. 数据库系统概论——SQL

    [toc] 一.SQL查询语言概览 视图 从一个或几个基本表导出的表 数据库中只存放视图的定义而不存放视图对应的数据 视图是一个虚表 用户可以在视图上再定义视图 基本表 本身独立存在的表 SQL中一个 ...

  6. MongoDB安装过程中出现service MongoDB failed to start，verify that you have sufficient privileges to start...

    win10系统下,安装MongoDB 64位, service MongoDB failed to start,verify that you have sufficient privileges t ...

  7. SpringBoot导入jsp依赖始终报错

    先粘出我自己的pom代码: <?xml version="1.0" encoding="UTF-8"?> <project xmlns=&qu ...

  8. Matplotlib之Bar Chart

    Matplotlib之Bar Chart: import numpy as np import matplotlib.pyplot as plt data = [[300, 200, 250, 150 ...

  9. JAVA之类的动手动脑

    1.默认构造方法与自定义的构造方法的冲突 package com.xu; class fool { int value; fool(int nowvalue) { value=nowvalue; } ...

  10. .NET Core 3.0中IAsyncEnumerable<T>有什么大不了的?

    .NET Core 3.0和C# 8.0最激动人心的特性之一就是IAsyncEnumerable<T>(也就是async流).但它有什么特别之处呢?我们现在可以用它做哪些以前不可能做到的事 ...