根据屏幕尺寸修改css显示格式

1.使用jquery();
一直有闪烁感

<script type="text/javascript">
		$(function() {
    
    
			var width = document.body.clientWidth;
			if (width < 500) {
    
    
				$("#favicon").css("margin-left", "0%");
				$("#favicon2").css("margin-right", "0%");
			} else {
    
    
				$("#favicon").css("margin-left", "9%");
				$("#favicon2").css("margin-right", "8%");
			}
		})
	</script>

解决(闪烁)方法:
直接用@media属性判断屏幕尺寸来修改css,
详细教程

<style>
@media screen and (max-width: 500px) {
    
    
    #favicon{
    
    
   		float: left;
   		margin-left: 0%;
   }
   #favicon2{
    
    
   		float: right;
   		margin-right:0%;
   } 
  
}
@media screen and (min-width: 500px) {
    
    
    #favicon{
    
    
   		float: left;
   		margin-left: 9%;
   }
   #favicon2{
    
    
   		float: right;
   		margin-right:8%;
   } 
  
}
</style>

猜你喜欢

转载自blog.csdn.net/weixin_44315761/article/details/108094012