Detailed explanation of CSS3 media query responsive layout bootstrap framework principle practice (recommended)

Detailed description of media device type usage:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>

    <!-- Screen device -->
    <style media="screen">
        h1{
            color:red;
        }
    </style>

    <!-- Printer Device -->
    <style media="print">
        h1{
            color:green;
        }
    </style>

    <!-- Screen devices and printer devices -->
    <style media="screen,print">
        h1{
            font-weight:normal;
        }
    </style>
</head>
<body>
  <h1>cyy</h1>
</body>
</html>

Use the link tag to set the media type:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>

    <!-- The default media is all, all devices -->
    <link rel="stylesheet" href="css/commob.css" media="all">
    <link rel="stylesheet" href="css/screen.css" media="screen">
    <link rel="stylesheet" href="css/print.css" media="print">
</head>
<body>
  <h1>cyy</h1>
</body>
</html>

Use @import to simplify page multi-file references:

This is the recommended approach:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>

    <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <h1>cyy</h1>
</body>
</html>

style.css

@import url(common.css);
@import url(screen.css) screen;
@import url(print.css) print;

Use @media partials in your stylesheet to define responses to queries:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>

    <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="navbar">
      <a href="">cyy</a>
      <ul>
          <li>cyy1</li>
          <li>cyy2</li>
          <li>cyy3</li>
      </ul>
  </div>
</body>
</html>

Related less

.navbar{
  height:60px;
  width:900px;
  display:flex;
  align-items:center;
  background:#f3f3f3;
  margin:0 auto;

  ul{
    list-style:none;
    display:flex;
  }
}

@media screen and (max-width:600px) {
  .navbar{
    ul{
      display:none;
    }
  }
}

and conditional judgment responsive application:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>

    <style media="screen and (min-width:768px) and (max-width:1000px)">
        h1{
            color:red;
        }
    </style>

<style media="screen and (max-width:768px)">
    h1{
        color:blue;
    }
</style>
</head>
<body>
  <h1>CYY</h1>
</body>
</html>

Logical or use tricks to operate:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>

    <!-- When the device is in landscape orientation, or the device width is greater than 768px regardless of portrait or landscape orientation -->
    <style media="screen and (orientation:landscape),screen and (min-width:768px)">
        h1{
            color:red;
        }
    </style>

</head>
<body>
  <h1>CYY</h1>
</body>
</html>

Points to note when using the not keyword:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>

    
    <style>
        /* If the condition is met, the style will not be applied */
        @media not screen and (min-width:500px) and (max-width:768px) {
            h1{
                color:red;
            }
        }
    </style>

</head>
<body>
  <h1>CYY</h1>
</body>
</html>

Use only to exclude low-end browsers:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>

    
    <style>
        /* After adding only, low-end browsers will ignore this syntax*/
        @media only screen and (min-width:500px) {
            h1{
                color:red;
            }
        }
    </style>

</head>
<body>
  <h1>CYY</h1>
</body>
</html>

File structure of actual case operation:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>

    <link rel="stylesheet" href="css/style.css">

</head>
<body>
  <header class="mb-2">
      <div class="container">
        <div class="navbar">
            <a href="" class="logo">CYY</a>
            <label for="toggle-nav"><i class="fa fa-tasks" aria-hidden="true"></i></label>
            <input type="checkbox" name="" id="toggle-nav">
            <div class="collapse">
                <ul class="links">
                    <li><a href="">System Learning</a></li>
                    <li><a href="">Practical Courses</a></li>
                    <li><a href="">Topic Discussion</a></li>
                    <li><a href="">Sign in and punch card</a></li>
                </ul>
                <div class="form">
                    <a href="">Login</a>
                    <a href="" class="form-bg">Register</a>
                </div>
            </div>
        </div>
      </div>
  </header>

  
  <div class="container">
    <div class="row">
        <div class="col-6 col-lg-9 col-xs-12">
            <div class="card">
                <div class="card-header">
                    <h2>Latest Updates</h2>
                </div>
                <div class="card-body">
                    <ul class="list-group">
                        <li>
                            <a href="">cyy started learning responsive layout</a>
                            <span>2020-11-13</span>
                        </li>
                        <li>
                            <a href="">cyy started learning responsive layout</a>
                            <span>2020-11-13</span>
                        </li>
                        <li>
                            <a href="">cyy started learning responsive layout</a>
                            <span>2020-11-13</span>
                        </li>
                        <li>
                            <a href="">cyy started learning responsive layout</a>
                            <span>2020-11-13</span>
                        </li>
                        <li>
                            <a href="">cyy started learning responsive layout</a>
                            <span>2020-11-13</span>
                        </li>
                        <li>
                            <a href="">cyy started learning responsive layout</a>
                            <span>2020-11-13</span>
                        </li>
                        <li>
                            <a href="">cyy started learning responsive layout</a>
                            <span>2020-11-13</span>
                        </li>
                        <li>
                            <a href="">cyy started learning responsive layout</a>
                            <span>2020-11-13</span>
                        </li>
                    </ul>
                </div>
                <div class="card-footer">
                    <div class="page">
                        <a href=""><</a>
                        <a href="">1</a>
                        <a href="">2</a>
                        <a href="" class="current">3</a>
                        <a href="">4</a>
                        <a href="">5</a>
                        <a href="">></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-6 col-lg-3 col-xs-12">
            <div class="card">
                <div class="card-header">
                    <h3>Community Posts</h3>
                </div>
                <div class="card-body"></div>
                <div class="card-footer"></div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Introduce unified control style.css

@import url(common.css);
@import url(navbar.css);
@import url(card.css);
@import url(title.css);
@import url(page.css);
@import url(margin.css);
@import url(list-group.css);
@import url(small-x.css) only screen and (max-width:768px);
@import url(small.css) only screen and (min-width:768px);
@import url(medium.css) only screen and (min-width:960px);
@import url(big.css) only screen and (min-width:1200px);

Navigation component navbar.less

header{
  border-bottom:5px solid #009688;
  box-shadow:0 5px 5px rgba(0,0,0,.2);

  .navbar{
    display:flex;
    padding:1rem 0;
    align-items:center;

    .logo{
      color:#009688;
      margin-right:20px;
      font-weight:bold;
      font-size:1.3rem;

      &+label{
        display:none;

        &+input{
          display:none;
        }

      }
    }

    .collapse{
      display:flex;
      flex-grow:1;

      .links{
        display:flex;
        // Fill the remaining space margin-right:auto;

        li{
          margin:0 10px;

          a{
            color:#777;
            
  
            &:hover{
              color:#333;
              font-weight:bold;
            }
          }
        }
        
      }

      .form{
        a{
          border:1px solid #009688;
          color:#009688;
          padding:.3rem 1rem;
          border-radius:.3rem;

          &.form-bg{
            background:#009688;
            color:white;
          }
        }
      }
    }
  }
}

@media screen and (max-width:960px) {
  header{
    .navbar{
      // The flex-flow property is a composite property of the flex-direction and flex-wrap properties.
      flex-flow:row wrap;

      .logo{
        margin-right:auto;

        &+label{
          display:block;
          border:1px solid #ddd;
          padding:.5rem 1rem;
          color:#555;
          cursor:pointer;

          &+input{
            display:none;
          }

          &+input:checked{
            &+.collapse{
              display:block;
            }
          }
        }
      }
      .collapse{
        display:none;
        flex-flow:column;
        width:100%;

        .links{
          flex-direction:column;
          margin-bottom:1.5rem;

          li{
            margin:.5rem 0;
          }
        }
      }
    }
  }
}

Card component card.less

.card{
  border:1px solid #ddd;
  box-shadow:0 0 5px rgba(0,0,0,.1);
  border-radius:.2rem;

  .card-header{
    padding:.5rem 1rem;
    border-bottom:1px solid #ddd;
  }
  .card-body{
    padding:1rem;
  }
  .card-footer{
    padding:.5rem 1rem;
    border-top:1px solid #ddd;
  }
}

Text component title.less

h2 {
  font-size: 1rem;
}
h3 {
  font-size: 0.8rem;
}
h2,
h3,
h4 {
  color: #555;
}

Pagination component page.less

.page{
  display:flex;

  a{
    display:block;
    padding:.3rem .8rem;
    border:1px solid #ddd;
    // Let the two overlapping border lines overlap margin-left:-1px;
    color:#555;

    &:first-child{
      border-top-left-radius:.3rem;
      border-bottom-left-radius:.3rem;
    }

    &:last-child{
      border-top-right-radius:.3rem;
      border-bottom-right-radius:.3rem;
    }

    &.current{
      background:#009688;
      color:white;
      border:1px solid #009688;
    }
  }
}

Margin component margin.less

.mb-1 {
  margin-bottom: 1rem;
}
.mb-2 {
  margin-bottom: 2rem;
}
.mb-3 {
  margin-bottom: 3rem;
}

List component list-group.less

.list-group{
  li{
    display:flex;
    justify-content:space-between;
    padding:.8rem 0;
    border-bottom:1px solid #ddd;
    font-size:.9rem;

    &:last-child{
      border-bottom:none;
    }

    a{
      color:#777;
    }

    span{
      color:#888;
      font-size:.6rem;
    }
  }
}

Small-x.less for ultra-small screens

body {
  background: white;
}
.container {
  width: 95%;
  margin: 0 auto;
}
.col-xs-12 {
  grid-column: span 12;
}
.col-xs-11 {
  grid-column: span 11;
}
.col-xs-10 {
  grid-column: span 10;
}
.col-xs-9 {
  grid-column: span 9;
}
.col-xs-8 {
  grid-column: span 8;
}
.col-xs-7 {
  grid-column: span 7;
}
.col-xs-6 {
  grid-column: span 6;
}
.col-xs-5 {
  grid-column: span 5;
}
.col-xs-4 {
  grid-column: span 4;
}
.col-xs-3 {
  grid-column: span 3;
}
.col-xs-2 {
  grid-column: span 2;
}
.col-xs-1 {
  grid-column: span 1;
}

Small screen adaptation small.less

body{
  background:white;
}
.container{
  width:750px;
  margin:0 auto;

}
.col-sm-12{
  grid-column:span 12;
}
.col-sm-11{
  grid-column:span 11;
}
.col-sm-10{
  grid-column:span 10;
}
.col-sm-9{
  grid-column:span 9;
}
.col-sm-8{
  grid-column:span 8;
}
.col-sm-7{
  grid-column:span 7;
}

.col-sm-6{
  grid-column:span 6;
}
.col-sm-5{
  grid-column:span 5;
}
.col-sm-4{
  grid-column:span 4;
}
.col-sm-3{
  grid-column:span 3;
}
.col-sm-2{
  grid-column:span 2;
}
.col-sm-1{
  grid-column:span 1;
}

Medium screen adaption medium.less

body{
  background:white;
}
.container{
  width:950px;
  margin:0 auto;

}
.col-md-12{
  grid-column:span 12;
}
.col-md-11{
  grid-column:span 11;
}
.col-md-10{
  grid-column:span 10;
}
.col-md-9{
  grid-column:span 9;
}
.col-md-8{
  grid-column:span 8;
}
.col-md-7{
  grid-column:span 7;
}

.col-md-6{
  grid-column:span 6;
}
.col-md-5{
  grid-column:span 5;
}
.col-md-4{
  grid-column:span 4;
}
.col-md-3{
  grid-column:span 3;
}
.col-md-2{
  grid-column:span 2;
}
.col-md-1{
  grid-column:span 1;
}

Big.less for large screens

body{
  background:transparent;
}
.container{
  width:1180px;
  margin:0 auto;

}
.col-lg-12{
  grid-column:span 12;
}
.col-lg-11{
  grid-column:span 11;
}
.col-lg-10{
  grid-column:span 10;
}
.col-lg-9{
  grid-column:span 9;
}
.col-lg-8{
  grid-column:span 8;
}
.col-lg-7{
  grid-column:span 7;
}

.col-lg-6{
  grid-column:span 6;
}
.col-lg-5{
  grid-column:span 5;
}
.col-lg-4{
  grid-column:span 4;
}
.col-lg-3{
  grid-column:span 3;
}
.col-lg-2{
  grid-column:span 2;
}
.col-lg-1{
  grid-column:span 1;
}

Rendering

Use rem units to manipulate size responsiveness

It is recommended to use an automated build tool plugin.

This concludes this article on the detailed explanation of the principles and practices of the CSS3 media query responsive layout bootstrap framework. For more relevant CSS responsive layout bootstrap framework content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!

<<: Case analysis of several MySQL update operations

>>: How to use HTML form with multiple examples