js响应式布局

最新推荐文章于 2024-05-30 08:00:24 发布

weixin_33697898

最新推荐文章于 2024-05-30 08:00:24 发布

阅读量678

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wwthuanyu/p/10554750.html

版权

<!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>

转载于:https://www.cnblogs.com/wwthuanyu/p/10554750.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_33697898

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js响应式布局

<!DOCTYPE html><html class="mobile"><head><meta charset="UTF-8"><title></title><style type="text/css">.mobile #div1{background: skyblue;}....
复制链接

扫一扫