首页 > Web开发 > 详细

css根据屏幕大小切换样式

时间:2018-09-08 17:08:38      阅读:263      评论:0      收藏:0      [点我收藏+]
首先html head之间加入:
<meta
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
name="viewport">
 
需要写两个样式
@media(max-width:669px){//当屏幕最大669时,执行下面css
.navigation-top{
display: none;
}
}
 
@media(min-width:669px){//当屏幕最小669时,执行下面
.phone-top{
display: none;
}
}
 
js:
//屏幕尺寸改变时触发
 window.onresize = function(){

 

}

屏幕分辨率的高:window.screen.height 

屏幕分辨率的宽:window.screen.width 

css根据屏幕大小切换样式

原文:https://www.cnblogs.com/telwanggs/p/9609695.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!