<!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. 心动吗？正大光明的免费使用IntelliJ IDEA商业版

    IntelliJ IDEA是广受Java开发者喜爱的工具,其商业版的价格十分昂贵,如下图: 现在有机会免费获取IntelliJ IDEA的正版License,您是否心动呢?我把自己成功申请Licens ...

  2. asp.netcore 3.0 Docker Nginx(震惊，原来docker是这样的！)

    引言 Docker发布于2013年,Docker是dotCloud公司创始人在法国期间发起的一个公司内部项目,他是dotCloud多年云技术的一个革新.Docker在容器基础上进行了一步的封装,从网络 ...

  3. python-电脑结构、网络基础、单位转换

    目录 一.计算机五大部件 二.程序运行的过程 三.ARP协议 四.单位转换 一.计算机五大部件 电脑之父——冯·诺伊曼提出了计算机的五大部件:输入设备.输出设备.存储器.运算器和控制器. 我们把键盘和 ...

  4. JVM 调优 - jstat

    Java命令学习系列(四)——jstat 2015-07-31 分类:Java 阅读(11041) 评论(1) 阿里大牛珍藏架构资料,点击链接免费获取 jstat(JVM Statistics Mon ...

  5. jq 加载的几种方法

    jQuery加载的几种方式 //①页面加载完之前执行,与嵌入的js加载方式一样 (function ($) {     alert('start'); })(jquery); //②页面加载后执行 $ ...

  6. [Note] Clipboard.js 使用

    clipboard.js是一个用来设置剪切板的库,小巧无依赖,但用法有点诡异,必须依赖一个DOM元素 据作者说,由于浏览器相关安全策略的缘故,无法使用下面这种方式来设置剪切板 clipboard.co ...

  7. [Python] 豆瓣电影top250爬虫

    1.分析 <li><div class="item">电影信息</div></li> 每个电影信息都是同样的格式,毕竟在服务器端是用 ...

  8. Flask学习之旅--Flask项目部署

    一.写在前面 Flask 作为一个轻量级的 Web 框架,具有诸多优点,灵活方便,扩展性强,开发文档也很丰富.在开发调试的过程中,我们往往会使用 Flask 自带的 Web 服务器,但如果要投入到生产 ...

  9. 星之小说下载器Android版

    原本是想在酷安上架的,然而审核不通过..只能通过网页方式宣传了 一款使用Jsoup开源库网络爬虫的APP,将在线阅读的小说解析,把小说全本下载为txt文件 由于使用爬虫技术,所以下载的速度不是很理想, ...

  10. Adobe PS常用快捷键

    ps使用快捷键 新建图层    Ctrl+Shift+N 取消选择区  Ctrl + D 新建标题    Ctrl + N 图片放大 Alt+鼠标滑动 图片位置拖动    空格 + 鼠标拖动 移动图层 ...