横竖屏不同的情况来适配样式

最新推荐文章于 2024-08-01 16:35:03 发布

个人看法

最新推荐文章于 2024-08-01 16:35:03 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/webZRH/article/details/71107316

版权

1.内联样式

 
        @media screen and (orientation:portrait) { 
       
            //竖屏 
       
        } 
       
        @media screen and (orientation:landscape) { 
       
            //横屏 
       
        }

2.外联样式

 
 < 
 ! 
 -- 
  竖屏 
   
 -- 
 > 

 
 < 
 link  
 rel 
 = 
 "stylesheet" 
   
 media 
 = 
 "all and (orientation:portrait)" 
   
 href 
 = 
 "..." 
   
 / 
 > 

 
 < 
 ! 
 -- 
  横屏 
   
 -- 
 > 

 
 < 
 link  
 rel 
 = 
 "stylesheet" 
   
 media 
 = 
 "all and (orientation:landscape)" 
   
 href 
 = 
 "..." 
   
 / 
 > 

3.js方法

 
        1 
      
        2 
      
        3 
      
        4 
      
        5 
      
        6 
      
        7 
      
        8 
      
        9 
      
        10 
      
       var 
         
       mql 
         
       = 
         
       window 
       . 
       matchMedia 
       ( 
       "(orientation: portrait)" 
       ) 
       ; 
      
       function 
         
       onMatchMeidaChange 
       ( 
       mql 
       ) 
       { 
      
       if 
       ( 
       mql 
       . 
       matches 
       ) 
         
       { 
      
       // 竖屏 
      
       } 
       else 
         
       { 
      
       // 横屏 
      
       } 
      
       } 
      
       onMatchMeidaChange 
       ( 
       mql 
       ) 
       ; 
      
       mql 
       . 
       addListener 
       ( 
       onMatchMeidaChange 
       ) 
       ;

 
         1 
       
         2 
       
         3 
       
         4 
       
         5 
       
         6 
       
         7 
       
         8 
       
         9 
       
         10 
       
        var 
          
        mql 
          
        = 
          
        window 
        . 
        matchMedia 
        ( 
        "(orientation: portrait)" 
        ) 
        ; 
       
        function 
          
        onMatchMeidaChange 
        ( 
        mql 
        ) 
        { 
       
        if 
        ( 
        mql 
        . 
        matches 
        ) 
          
        { 
       
        // 竖屏 
       
        } 
        else 
          
        { 
       
        // 横屏 
       
        } 
       
        } 
       
        onMatchMeidaChange 
        ( 
        mql 
        ) 
        ; 
       
        mql 
        . 
        addListener 
        ( 
        onMatchMeidaChange 
        ) 
        ;