响应式布局自适应，适应不同大小浏览器，分辨率

前端交互仔

已于 2022-02-10 21:04:59 修改

阅读量491

点赞数 1

分类专栏：前端(HTML 文章标签：响应式设计媒体查询 CSS 屏幕适配网页布局

于 2022-02-09 21:20:29 首次发布

原文链接：https://www.bilibili.com/video/BV1Ny4y147g9?p=2&spm_id_from=pageDriver

版权

前端(HTML 专栏收录该内容

235 篇文章 3 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      @media screen and (max-device-width: 1280px) {
        .one {
          background: url(2.jpg);
          width: 300px;
          height: 332px;
        }
      }
      /* 大于1920等于分辨率会显示 */
      @media screen and (min-device-width: 1400px) {
        .one {
          background: url(2.jpg);
          width: 100%;
          height: 500px;
        }
      }

      /* 屏幕必须小于等于300 */
      @media screen and (max-width: 300px) {
        .two {
          background-color: lightblue;
          width: 300px;
          height: 300px;
        }
      }
      @media screen and (min-width: 300px) {
        .two {
          background-color: orange;
          width: 300px;
          height: 300px;
        }
      }
      /* 屏幕不能超过800 */
      @media screen and (min-width: 500px) {
        .two {
          background-color: lightblue;
          width: 300px;
          height: 300px;
        }
        .three {
          background-color: pink;
          width: 300px;
          height: 300px;
        }
      }
      /* img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        
      } */
      /* img {
        width: 100%;
        height: 100%;
      } */
    </style>
  </head>
  <body>
    <div class="one">
      <!-- <img src="2.jpg" /> -->
      <!-- 你好世界 -->
    </div>
    <div class="two"></div>
    <div class="three"></div>
  </body>
</html>

pc端常用电脑屏幕（(响应式PC端媒体查询)电脑屏幕分辨率尺寸大全）
https://www.cnblogs.com/shimily/articles/8032450.html

https://blog.csdn.net/weixin_33769125/article/details/89664551

https://blog.csdn.net/weixin_33726943/article/details/93532819

https://www.bilibili.com/video/BV1Ny4y147g9?p=2&spm_id_from=pageDriver

前端交互仔

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
响应式布局自适应，适应不同大小浏览器，分辨率

pc端常用电脑屏幕（(响应式PC端媒体查询)电脑屏幕分辨率尺寸大全）https://www.cnblogs.com/shimily/articles/8032450.htmlhttps://blog.csdn.net/weixin_33769125/article/details/89664551https://www.bilibili.com/video/BV1Ny4y147g9?p=2&spm_id_from=pageDriver...
复制链接

扫一扫

专栏目录