响应式布局

最新推荐文章于 2024-06-22 16:15:18 发布

Silent Land

最新推荐文章于 2024-06-22 16:15:18 发布

阅读量519

点赞数

分类专栏： HTML+CSS

本文链接：https://blog.csdn.net/weixin_44757417/article/details/106532634

版权

HTML+CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

媒体查询

即media queries，可以针对不同的媒体类型定义不同的样式，从而实现响应式布局。

媒体特性

定义设备的某些特点，比如屏幕的宽度等。
width 定义设备中可见区域宽度
height 定义设备中可见区域高度
max-width/max-height 定义设备中的页面最大可见区域宽度/高度
min-width/min-height 定义设备中的页面最小可见区域宽度/高度
orientation: portrait (竖屏模式) | landscape (横屏模式)

语法关键字

and：可以将多个媒体特性连接到一块，相当于：且
not: 排除某个媒体特性，相当于非，可以省略
only:指定某个特定的媒体类型，可以省略

语法关键字

外联式语法
<link rel="stylesheet" href="css/index.css" media="screen and (min-width: 800px)">
/*当浏览区域宽度大于800px的时候，使用link中的css文件*/

内嵌式语法
@media screen and (min-width: 500px) {
    /* 当页面宽度大于500px时,设置背景颜色为红色 */
    body {
        background-color: red;
    }
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        /* 最小宽度为500px,大于500px显示蓝色 */
        /*  @media all and (min-width: 500px) {
            .box {
                background-color: blue;
            }
        } */
        /* 纵屏 */
        /* @media all and (orientation:portrait) {
            .box {
                background-color: blue;
            }
        } */

        /* 横屏 */
        /* @media all and (orientation:landscape) {
            .box {
                background-color: green;
            }
        } */
    </style>
    <!-- 根据不同的条件引入不同的css -->
    <link rel="stylesheet" href="./css/base.css" media="all and (min-width:400px)">
    <link rel="stylesheet" href="./css/base2.css" media="all and (min-width:600px)">

</head>

<body>
    <div class=" box">
        123
    </div>
</body>

</html>

媒体类型

取值	含义
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕，平板电脑，智能手机等。
speech	应用于屏幕阅读器等发声设备

Bootstrap

Bootstrap是最受欢迎的HTML.CSS和JS框架，用于开发响应式布局、移动设备优先WEB项目。

特色：
- 响应式布局
- 基于flex的栅格系统
- 丰富的组件和工具方法
- 常见的交互使用
  官网： https://getbootstrap.com/
  中文版：https://getbootstrap.net/
bootstrap个人博客案例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>blog</title>
    <link rel="stylesheet" href="./css/bootstrap.css" />
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <style>
      .iconfangdajing {
        position: relative;
        top: 3px;
        margin-right: 4px;
        font-size: 20px;
      }
      .box200-250 {
        width: 200px;
        height: 250px;
        background-color: gray;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <!-- 方法一： -->
      <!-- py=padding-top:2px -->
      <!-- align-items-center:相当于flex中的align-items:center;弹性盒子中的子元素垂直居中对齐 -->
      <!-- <header class="row py-2 align-items-center text-center">
      <div class="col text-left">
        <a href="#">Subscribe</a>
      </div>
      <div class="col">
        <h2> <a href="#">Large</a></h2>
      </div>
      <div class="col text-right">
        <a href="#"> <i class="iconfont iconfangdajing"></i></a>
        <a href="#">Sign up</a>
      </div>
      </header> -->
      <!-- 方法二： -->
      <!-- 给每列加auto让其根据内容自适应 -->
      <!-- justify-content-between=>justify-content:between;使flex盒子子元素两端对齐 -->
      <!-- align-items-center=>align-items:center;flex盒子中子元素垂直居中 -->
      <header class="row justify-content-between align-items-center">
        <div class="col-auto">
          <a href="#" class="text-muted">Subscribe</a>
        </div>
        <div class="col-auto">
          <h2><a href="#" class="text-dark text-decoration-none">Large</a></h2>
        </div>
        <div class="col-auto">
          <a href="#" class="text-decoration-none text-muted">
            <i class="iconfont iconfangdajing"></i
          ></a>
          <a href="#" class="btn btn-sm border btn-outline-secondary"
            >Sign up</a
          >
        </div>
      </header>
      <div class="border-bottom"></div>
      <!-- jumbotron start -->
      <nav class="d-flex justify-content-between py-1 mb-2 overflow-auto">
        <a href="#" class="text-muted p-2">
          World
        </a>
        <a href="#" class="text-muted p-2">
          U.S.
        </a>
        <a href="#" class="text-muted p-2">
          Technology
        </a>
        <a href="#" class="text-muted p-2">
          Design
        </a>
        <a href="#" class="text-muted p-2">
          Culture
        </a>
        <a href="#" class="text-muted p-2">
          Business
        </a>
        <a href="#" class="text-muted p-2">
          Politics
        </a>
        <a href="#" class="text-muted p-2">
          Opinion
        </a>
        <a href="#" class="text-muted p-2">
          Science
        </a>
        <a href="#" class="text-muted p-2">
          Health
        </a>
        <a href="#" class="text-muted p-2">
          Style
        </a>
        <a href="#" class="text-muted p-2">
          Travel
        </a>
      </nav>
      <div class="jumbotron bg-dark text-white p-2">
        <!-- col-md:桌面显示器 - 屏幕宽度等于或大于 768px) -->
        <div class="col-md-6 m-3">
          <h1
            class="display-4 font-italic"
            style="
              font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
              font-size: 40px;
            "
          >
            Title of a longer featured blog post
          </h1>
          <p class="lead">
            Multiple lines of text that form the lede, informing new readers
            quickly and efficiently about what’s most interesting in this post’s
            contents.
          </p>
          <p class="lead">
            <a class="text-white" href="Jumbo action link"
              >Continue reading...</a
            >
          </p>
        </div>
      </div>
      <!-- jumbotron end -->
      <!-- 文字图片展示部分 start-->
      <div class="row">
        <div class="col-md-6 mb-4">
          <!-- no-gutters：取消默认间距 -->
          <div class="shadow-sm row border rounded no-gutters overflow-hidden">
            <div class="col p-4 d-flex flex-column position-static">
              <strong class="d-inline-block mb-2 text-primary">World</strong>
              <h3 class="mb-0">Featured post</h3>
              <div class="mb-1 text-muted">Nov 12</div>
              <p class="card-text mb-auto">
                This is a wider card with supporting text below as a natural
                lead-in to additional content.
              </p>
              <a href="#" class="stretched-link">Continue reading</a>
            </div>
            <div class="col-auto">
              <a href="#">
                <!-- 正常状态不显示 md及以上分辨率显示 -->
                <div class="box200-250 d-none d-md-block"></div>
              </a>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <!-- no-gutters：取消默认间距 -->
          <div class="shadow-sm row border rounded no-gutters overflow-hidden">
            <div class="col p-4 d-flex flex-column position-static">
              <strong class="d-inline-block mb-2 text-primary">World</strong>
              <h3 class="mb-0">Featured post</h3>
              <div class="mb-1 text-muted">Nov 12</div>
              <p class="card-text mb-auto">
                This is a wider card with supporting text below as a natural
                lead-in to additional content.
              </p>
              <a href="#" class="stretched-link">Continue reading</a>
            </div>
            <div class="col-auto">
              <a href="#">
                <div class="box200-250 d-none d-md-block"></div>
              </a>
            </div>
          </div>
        </div>
      </div>
      <!--文字图片展示部分 start end  -->

      <!-- 主栏+侧栏部分 start -->
      <div class="row">
        <!-- 主栏 -->
        <div class="col-md-8">
          <h3 class="font-italic border-bottom py-4">From the Firehose</h3>
          <div class="mt-4">
            <h2>Sample blog post</h2>
            <p>January 1, 2014 by <a href="#">Mark</a></p>
            <p class="border-bottom py-4">
              This blog post shows a few different types of content that’s
              supported and styled with Bootstrap. Basic typography, images, and
              code are all supported.
            </p>
            <p>
              Cum sociis natoque penatibus et magnis
              <a href="#">dis parturient montes</a>, nascetur ridiculus mus.
              Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
              vestibulum. Sed posuere consectetur est at lobortis. Cras mattis
              consectetur purus sit amet fermentum. Curabitur blandit tempus
              porttitor.
            </p>
            <p>
              Curabitur blandit tempus porttitor.
              <strong>Nullam quis risus eget urna mollis</strong>
              ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut
              id elit.
            </p>
            <p>
              Etiam porta <em>sem malesuada </em> magna mollis euismod. Cras
              mattis consectetur purus sit amet fermentum. Aenean lacinia
              bibendum nulla sed consectetur.
            </p>
          </div>
          <div class="mt-4">
            <h2>Sample blog post</h2>
            <p>January 1, 2014 by <a href="#">Mark</a></p>
            <p class="border-bottom py-4">
              This blog post shows a few different types of content that’s
              supported and styled with Bootstrap. Basic typography, images, and
              code are all supported.
            </p>
            <p>
              Cum sociis natoque penatibus et magnis
              <a href="#">dis parturient montes</a>, nascetur ridiculus mus.
              Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
              vestibulum. Sed posuere consectetur est at lobortis. Cras mattis
              consectetur purus sit amet fermentum. Curabitur blandit tempus
              porttitor.
            </p>
            <p>
              Curabitur blandit tempus porttitor.
              <strong>Nullam quis risus eget urna mollis</strong>
              ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut
              id elit.
            </p>
            <p>
              Etiam porta <em>sem malesuada </em> magna mollis euismod. Cras
              mattis consectetur purus sit amet fermentum. Aenean lacinia
              bibendum nulla sed consectetur.
            </p>
          </div>
        </div>
        <!-- 侧栏 -->
        <div class="col-md-4">
          <div class="bg-light rounded p-4 mt-4">
            <h3 class="font-italic">About</h3>
            <p>
              Etiam porta sem malesuada magna mollis euismod. Cras mattis
              consectetur purus sit amet fermentum. Aenean lacinia bibendum
              nulla sed consectetur.
            </p>
          </div>
          <div class="mt-4 ml-md-2">
            <h3>Archives</h3>
            <ol class="list-unstyled">
              <li><a href="#">March 2014</a></li>
              <li><a href="#">February 2014</a></li>
              <li><a href="#">January 2014</a></li>
              <li><a href="#">December 2013</a></li>
              <li><a href="#">November 2013</a></li>
              <li><a href="#">October 2013</a></li>
              <li><a href="#">September 2013</a></li>
              <li><a href="#">August 2013</a></li>
              <li><a href="#">July 2013</a></li>
              <li><a href="#">June 2013</a></li>
              <li><a href="#">May 2013</a></li>
              <li><a href="#">April 2013</a></li>
            </ol>
          </div>
          <div class="mt-4 ml-md-2">
            <h3>Elsewhere</h3>
          <ul class="list-unstyled ">
            <li><a href="#">GitHub</a></li>
            <li><a href="#">Twitter</a></li>
            <li><a href="#">Facebook</a></li>
          </div>
          </ul>
        </div>
        <!-- 主栏+侧栏部分 end -->
      </div>
      <a href="#" class="btn btn-outline-primary rounded-pill">Older</a>
      <a href="#" class="btn btn-outline-secondary disabled rounded-pill">Newer</a>
       
    </div>
    <div class="container-fluid bg-light text-center p-4 mt-4 text-muted">
      <P>Blog template built for <a href="#"> Bootstrap</a> by <a href="#">@mdo.</a> </P>
      <p><a href="#">Back to top</a></p>
    </div>
    
  </body>
</html>