自适应屏幕宽高

傷城~ 2023-10-06 17:28 133阅读 0赞

css3 属性@media 自适应屏幕宽高

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <link rel="shortcut icon" href="#" />
  6. <title>测试</title>
  7. <style type="text/css">
  8. /* 1536px <= width <= 1920px */
  9. @media ( min-width :1536px) and (max-width: 1920px) {
  10.     h1 {
  11.         background-color: green;
  12.     }
  13. }
  14. /* 1920px <= width */
  15. @media ( min-width : 1920px) {
  16.     h1 {
  17.         background-color: red;
  18.     }
  19. }
  20. </style>
  21. </head>
  22. <body>
  23.     <h1></h1>
  24.     <h2></h2>
  25.     <script type="text/javascript">
  26.         var w = window.innerWidth;
  27.         var h = window.innerHeight;
  28.         document.getElementsByTagName('h1')[0].innerHTML = "窗口的宽高：" + w + "*" + h;
  29.         console.log("窗口的宽高：" + w + "*" + h);
  30.         var width = window.screen.width;
  31.         var height = window.screen.height;
  32.         document.getElementsByTagName('h2')[0].innerHTML = "屏幕分辨率：" + width + "*" + height;
  33.         console.log("屏幕分辨率：" + width + "*" + height);
  34.     </script>
  35. </body>
  36. </html>

发表评论

表情：
评论列表 （有 0 条评论，133人围观）

还没有评论，来说两句吧...

相关阅读

    相关 两列宽高自适应

    两列布局，要求占满整个页面，其中某列固定，另一列宽度自适应，另外要求两列的高度都要根据屏幕自适应，占满整屏。 宽度好整，一列设宽，一列不设宽，只设margin-left或ma

    约定不等于承诺〃约定不等于承诺〃/ 0 赞/ 140 阅读

    相关 CSS宽高自适应设置

    宽高自适应 > 网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是pc自适应。 > 自适应的优点： > 元素自适应

    以你之姓@以你之姓@/ 0 赞/ 86 阅读

    相关 div 自适应宽或高

    对于一个写后台的开发人，调试页面样式真的是很难受。 需求：上下布局，上面固定高度，下面s自适应高度。 思路：俩个div相当父容器都是绝对位置，下面div的top是上面div

    缺乏、安全感缺乏、安全感/ 0 赞/ 318 阅读