js响应式布局
2024-10-06 13:08:49
<!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>
最新文章
- cookie自动登录的实现
- 关于JavaScript预编译和执行顺序以及函数引用类型的思考
- Linear Algebra lecture9 note
- php下载网络图片到服务器
- css - float浮动模块的高度问题 解决方案
- 没有纳入spring管理的类如何注入spring管理的对象
- HBase with MapReduce （MultiTable Read）
- MySQL安装图文教程
- UI设计师的 Android 备忘录
- c# 与 c++ 编译
- Android 官方文档：（二）应用清单 —— 2.26 &lt;uses-permission&gt;标签
- 17.java.lang.CloneNotSupportedException
- SE 2014年4月3日
- Box of Bricks
- mvc4.0 @Styles.Render（转）
- jatoolsprinter html实现每隔几秒获取数据直接后台打印不弹窗
- Python之路(第二十九篇) 面向对象进阶：内置方法补充、异常处理
- Oracle数据库入门——sql语句和函数详解
- oracle查询语句查询增加一列内容
- 《图解CSS3：核心技术与案例实战》