网页制作

详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
网页制作 2024/11/15 佚名
3 2

媒体设备类型使用详解：

<!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">
        h1{
            color:red;
        }
    </style>

    <!-- 打印机设备 -->
    <style media="print">
        h1{
            color:green;
        }
    </style>

    <!-- 屏幕设备和打印机设备 -->
    <style media="screen,print">
        h1{
            font-weight:normal;
        }
    </style>
</head>
<body>
  <h1>cyy</h1>
</body>
</html>

使用link标签设置媒体类型：

<!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>

    <!-- 默认media为all，所有设备 -->
    <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>

使用@import简化页面多文件引用：

这是推荐的做法：

<!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;

样式表中使用@media局部定义响应查询：

<!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>

相关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条件判断响应式应用：

<!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>

逻辑或使用技巧操作：

<!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>

    <!-- 当设备为横屏展示，或者设备宽度大于768px不论横竖屏时 -->
    <style media="screen and (orientation:landscape),screen and (min-width:768px)">
        h1{
            color:red;
        }
    </style>

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

not关键词使用注意要点：

<!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 not screen and (min-width:500px) and (max-width:768px){
            h1{
                color:red;
            }
        }
    </style>

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

使用only排除低端浏览器：

<!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>
        /* 加上only之后，低端浏览器会忽略该句语法 */
        @media only screen and (min-width:500px){
            h1{
                color:red;
            }
        }
    </style>

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

实战案例操作之文件结构：

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="">系统学习</a></li>
                    <li><a href="">实战课程</a></li>
                    <li><a href="">话题讨论</a></li>
                    <li><a href="">签到打卡</a></li>
                </ul>
                <div class="form">
                    <a href="">登录</a>
                    <a href="" class="form-bg">注册</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>最新更新</h2>
                </div>
                <div class="card-body">
                    <ul class="list-group">
                        <li>
                            <a href="">cyy开始学习响应式布局</a>
                            <span>2020-11-13</span>
                        </li>
                        <li>
                            <a href="">cyy开始学习响应式布局</a>
                            <span>2020-11-13</span>
                        </li>
                        <li>
                            <a href="">cyy开始学习响应式布局</a>
                            <span>2020-11-13</span>
                        </li>
                        <li>
                            <a href="">cyy开始学习响应式布局</a>
                            <span>2020-11-13</span>
                        </li>
                        <li>
                            <a href="">cyy开始学习响应式布局</a>
                            <span>2020-11-13</span>
                        </li>
                        <li>
                            <a href="">cyy开始学习响应式布局</a>
                            <span>2020-11-13</span>
                        </li>
                        <li>
                            <a href="">cyy开始学习响应式布局</a>
                            <span>2020-11-13</span>
                        </li>
                        <li>
                            <a href="">cyy开始学习响应式布局</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>社区小帖</h3>
                </div>
                <div class="card-body"></div>
                <div class="card-footer"></div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

引入统一控制的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);

导航组件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;
        // 占满剩余空间
        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{
      // flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。
      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.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;
  }
}

文本组件title.less

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

分页组件page.less

.page{
  display:flex;

  a{
    display:block;
    padding:.3rem .8rem;
    border:1px solid #ddd;
    // 让重叠的两个边框线叠加在一起
    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.less

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

列表组件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

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.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.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

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;
}

效果图

详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)

使用rem单位操作尺寸响应处理

推荐使用自动化构建工具插件。

标签：
CSS3响应式布局,bootstrap,框架
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
岱庙资源网 Copyright www.zgmyg.com
www.zgmyg.com 岱庙资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
岱庙资源网 Copyright www.zgmyg.com