html5如何实现适配不同pc屏幕

最新推荐文章于 2025-03-17 10:20:32 发布

净诚浩天

最新推荐文章于 2025-03-17 10:20:32 发布

阅读量1w

点赞数 1

分类专栏： java前端

本文链接：https://blog.youkuaiyun.com/zh1053935924/article/details/81223286

版权

java前端专栏收录该内容

14 篇文章

订阅专栏

什么也不说了直接上代码!!!!

具体原理,因为html不支持background自动缩放功能,故使用img的100%填充div,使用div自动缩放实现北京适配.

<html lang="en">
 <head>
  <meta charset="UTF-8">
  <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
  <!–[if lt IE 9]><script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script><![endif]–> -->
  <title>Document</title>
  <!-- <style type="text/css">  
   img { 
    max-width: 100%;
    -ms-interpolation-mode: bicubic;	
    }
  </style>  --> 

 </head>
 <body>
   <div style="position:absolute; width:100%; height:100%; z-index:-1; left:0; top:0;">      
       <img src="picture.jpg" height="100%" width="100%" style="left:0; top:0;">      
   </div> 
 </body>
 
</html>