<!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. [AspNetCore 3.0] 在RazorPages/MVC 中使用 Blazor (Razor组件)

    开发环境 Vs2019 16.3.1 dotnetcore 3.0 一.开始 新建webapp项目 dotnet new webapp -o projectname 或Vs 中新建项目选择 Web应用 ...

  2. Sentinel Cluster流程分析

     前面介绍了sentinel-core的流程,提到在进行流控判断时,会判断当前是本地限流,还是集群限流,若是集群模式,则会走另一个分支,这节便对集群模式做分析. 一.基本概念  namespace:限 ...

  3. Maven报错： Could not resolve archetype org.apache.maven.archetypes:maven-archetype-webapp

    郁闷了两天,创建maven项目时,eclipse报错:Could not resolve artifact org.apache.maven.archetypes:maven-archetype-we ...

  4. github- 优秀资源总结

    权限控制篇: SpringMVC-Mybatis-Shiro-redis-0.2-master:https://www.sojson.com/shiro / https://m.imooc.com/a ...

  5. json与java对象的转换,以及struts2对json的支持,实现ajax技术

    这两天学的东西有点多,今天抽个时间写下来,以此作为激励,这两天学了json,ajax,jQuery 一.使用第三方的工具java转换为json类型 首先就是java类型转换为json对象,首先要导入第 ...

  6. dubbo-spring-boot的auto-configure示例报Not found exported service的解决办法

    本示例基于dubbo-spring-boot-project 2.7.3版本,可能会根据新版的发布而过时,阅读时请注意. 关于dubbo在spring-boot中该如何使用,网上有很多例子,但因为时间 ...

  7. SkyWalking系列（一）：初探

    SkyWalking已经再微服务商城系列里使用了,本篇将介绍如何再Windows系统下安装并简单使用. 1.下载SkyWaling 本篇测试使用6.0版本:http://skywalking.apac ...

  8. python——pyinstaller踩的坑 UnicodeDecodeError

    程序本身运行没任何毛病,奈何用pyinstaller -w xx.py的时候提示——UnicodeDecodeError: 'ascii' codec can't decode byte 0xb3 i ...

  9. Bumblebee服务网关之统一请求验证

    对于微服务网关来说,统一请求验证是一个比较重要和常用的功能,通过网关验证后台服务就无须关注请求验证:对于多语言平台的服务而言制定验证方式和变更验证配置都是一件比较繁琐和工作量大的事情.Bumblebe ...

  10. ng 目录详解

    在新建的项目中需要我们关注的就是package.json和src文件夹 node_modules (项目所需依赖)是package.json所创建的模块安装到node_modules中 src:是代码 ...