• 利用媒体查询实现响应式布局


    • 响应式布局原理
    • 媒体查询应用
    • 响应式布局示例
    • 外部样式的引入方式

     一、响应式布局原理

    1.1响应式布局特点:网页宽度自动调整、尽量少使用绝对宽度、字体的大小使用相对单位(rem、em)、布局尽量使用浮动(流式布局)。

    1.2响应式布局核心技术:媒体查询(@media)。

    @media是css的@规则语句:@ + 标识符

    关于css的@规则可以参考:https://developer.mozilla.org/zh-CN/docs/Web/CSS/At-rule

    更严谨的说@media是嵌套@规则,如果满足@media的媒介查询条件,则条件规则组里面的规则生效。通俗的解释就是当显示器的条件满足@media的某一个样式,就是用该条件下的css样式。

    @media查询条件分为两种,一种是媒体类型,一种是媒体特性。(详细可以参考:http://css.doyoe.com/  --> 语法与规则 --> @media

     1 /* 媒体查询语法 */
     2 @media 媒体类型 {
     3     /* css样式 */
     4 }
     5 @media 媒体特性 {
     6     /* css样式 */
     7 }
     8 @media 媒体类型 and 媒体特性 {
     9     /* css样式 */
    10 }
    11 @import url('xxx.css') 媒体特性;

    1.3媒体类型:

     all  所有设备。
     print  打印设备。
     screen  彩色的电脑屏幕。
     speech  听觉设备,应用于屏幕阅读器等发声设备。

     1.4媒体特性(这部分内容比较多,这里列举一些响应式布局可能用到的特性,详细内容可以参考:https://www.runoob.com/cssref/css3-pr-mediaquery.html):

       更详细的媒体查询解析文档可以看这个https://drafts.csswg.org/mediaqueries/

     width  宽度:页面的可见宽度。
     height  高度:页面的可见高度。
     min-width、max-width  最小宽度、最大宽度:页面的可见最小或最大宽度。
     min-height、max-height  最小高度、最大高度:页面的可见最小或最大高度。
     orientation  方向:页面可见区域高度是否大于或等于宽度。取值:landscape宽度大于高度(横屏);portrait高度大于宽度(竖屏)。
     aspect-ratio  宽高比
     -webkit-device-pixel-ratio  像素比(webkit内核私有的属性)

    1.5逻辑运算符:

     and  合并多个媒体类型(并且的意思)
     ,  酦醅某个媒体查询(或者的意思)
     not  对媒体查询结果取反,不能单独使用(比如不能单独取all的反),也就是说对整体媒体查询结果取反。
     only  仅在媒体查询匹配成功后应用样式(防范老旧浏览器),这逻辑运算符主要用于解决老旧浏览器不能解析@media而直接将媒体查询作为普通样式直接作用。

     示例1:

     1 /* 所有设备、宽度必须大于700、横屏,这个三个条件同时满足才为true */
     2 @media all and (min-700px) and (orientation:landscape){
     3     /* 注意这里我遇到了选择器权重的问题,所以在媒体查询样式选择器添加了一个media类 */
     4     div.media{
     5         background-color: yellow;
     6     }
     7 }
     8 div{
     9     width: 200px;
    10     height: 200px;
    11     background-color: red;
    12 }

     示例2:

    /* 所有设备、宽度必须大于800或者竖屏的时候,true */
    @media all and (min-800px),(orientation:portrait){
        div.media{
            background-color: yellow;
        }
    }

    示例3:

    //对示例2的整个媒体查询取反
    @media not all and (min-800px),(orientation:portrait){
        div.media{
            background-color: yellow;
        }
    }

    最后强调一下,@media是css3的功能,在来旧浏览器中会直接将媒体查询内的样式直接解析出来,为了防止这种情况,可以使用only解决,虽然现在的浏览器普片都能使用css3的语法了,但如果需要非常严谨的处理一些样式的话,还是需要用到only。

     二、媒体查询应用

    //html
    <div class="media"></div>
    
    //css
    div{
        padding: 50px 0;
        border: 1px solid #000000;
    }
    div::after{
        content: "这是一个房子";
    }
    @media all and (max-1000px){
        div.media{
            background-color: #1177bb;
        }
        div.media::after{
            content: "哇,好大的房子";
        }
    }
    @media all and (max-800px){
        div.media::after{
            background-color: #aeaeae;
        }
        div.media::after{
            content: "喔,房子变小了";
        }
    }
    @media all and (max-500px){
        div.media{
            background-color: #46ae46;
        }
        div.media::after{
            content: "哎,房子更小了";
        }
    }

     三、响应式布局示例

    1.github链接(含图片):https://github.com/SnowElves/mediaLayout

    2.代码:

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <meta http-equiv="X-UA-Compatible" content="IE=edge">
     6         <title></title>
     7         <meta name="description" content="">
     8         <meta name="viewport" content="width=device-width, initial-scale=1">
     9         <link rel="stylesheet" href="index.css">
    10     </head>
    11     <body>
    12         <div class="overall">
    13             <!-- 头部 -->
    14             <ul class="headNav media">
    15                 <li class="logo"><a href="https://baidu.com" target="_blank"></a></li>
    16                 <li class="search">
    17                     <input type="text" placeholder="请输入搜索内容">
    18                 </li>
    19                 <li class="title">
    20                     <a href="#">HTML</a>
    21                     <a href="#">CSS</a>
    22                     <a href="#">JavaScript</a>
    23                     <a href="#">ES6</a>
    24                     <a href="#">Node</a>
    25                 </li>
    26                 <li class="userInfo">
    27                     <div class="imgUser">
    28                         <img src="./image/user.png" alt="">
    29                     </div>
    30                     <div class="text">他乡踏雪</div>
    31                     <div class="imgList">
    32                         <img src="./image/userList.png" alt="">
    33                     </div>
    34                 </li>
    35                 <li class="leftNavIocn"><img src="./image/leftNavIocn.png" alt=""></li>
    36             </ul>
    37         </div>
    38     </body>
    39 </html>
    html代码
      1 body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
      2 body, button, input, select, textarea { font:12px/1.5tahoma, arial, 5b8b4f53; }
      3 h1, h2, h3, h4, h5, h6{ font-size:100%; }
      4 address, cite, dfn, em, var { font-style:normal; }
      5 code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
      6 small{ font-size:12px; }
      7 ul, ol { list-style:none; }
      8 a { text-decoration:none; }
      9 a:hover { text-decoration:underline; }
     10 sup { vertical-align:text-top; }
     11 sub{ vertical-align:text-bottom; }
     12 legend { color:#000; }
     13 fieldset, img { border:0; }
     14 button, input, select, textarea { font-size:100%; }
     15 table { border-collapse:collapse; border-spacing:0; }
     16 
     17 @media all and (max-850px){
     18 
     19     .headNav.media{
     20         padding: 10px 10px;
     21         justify-content:space-between;
     22     }
     23     .headNav.media li.search{
     24         flex: 1 1 auto;
     25         margin-right: 30px;
     26     }
     27     .headNav.media li.title,li.leftNavIocn{
     28         display: none;
     29     }
     30     .headNav.media li.userInfo{
     31         justify-content:flex-end;
     32     }
     33     .headNav.media li.userInfo .text,.imgList{
     34         display: none;
     35     }
     36 
     37 }
     38 @media all and (max-450px){
     39     .headNav.media{
     40         padding: 10px 10px;
     41     }
     42     .headNav.media li.logo,li.title,li.search{
     43         display: none;
     44     }
     45     
     46     .headNav.media li.userInfo{
     47         justify-content:flex-end;
     48     }
     49     .headNav.media li.userInfo .text,.imgList{
     50         display: none;
     51     }
     52     .headNav.media li.leftNavIocn{
     53         display: block;
     54     }
     55 
     56 }
     57 
     58 
     59 
     60 .overall{
     61     position: relative;
     62 }
     63 /* 头部父级容器布局占用宽度60px */
     64 .headNav{
     65     padding: 10px 30px;
     66     display: flex;
     67     flex-direction: row;
     68     background-color: #000000;
     69     
     70 }
     71 .headNav li{
     72     /* line-height: 30px; */
     73 }
     74 /* logo占用宽度50px */
     75 .headNav .logo{
     76     flex: 0 0 28px;
     77     margin-right: 20px;
     78     height: 28px;
     79     background-color: #ffffff;
     80     border-radius: 15px;
     81     overflow: hidden;
     82     border: 1px solid #ffffff;
     83 }
     84 .headNav .logo a{
     85     display: block;
     86     width: 28px;
     87     height: 28px;
     88     /* display: inline-block;
     89     border-bottom: 30px solid #000000;
     90     border-left: 15px solid #ffffff;
     91     border-right: 15px solid #ffffff; */
     92     background-image: url("./image/github.jpg");
     93     background-size: 45px 30px;
     94     background-repeat: no-repeat;
     95     background-position: -8.5px -1.5px ;
     96 }
     97 /* 搜索栏占用宽度300px */
     98 .headNav .search{
     99     flex: 0 0 auto;
    100     position: relative;
    101     padding-left: 10px;
    102     height: 30px;
    103     border-radius: 15px;
    104     background-color: rgb(59, 59, 59);
    105     overflow: hidden;
    106 }
    107 
    108 .headNav .search::after{
    109     position: absolute;
    110     top: 4px;
    111     right: 10px;
    112     display: block;
    113     content: "";
    114     width: 14px;
    115     height: 14px;
    116     border: 1px solid #666666;
    117     border-radius: 8px;
    118 }
    119 .headNav .search::before{
    120     position: absolute;
    121     top: 17px;
    122     right: 10px;
    123     display: block;
    124     content: "";
    125     height: 10px;
    126     transform: rotate(-38deg);
    127     border-left: 1px solid #666666;
    128 }
    129 .headNav .search:hover::after,.search:hover::before{
    130     border-color: #000000;
    131 }
    132 .headNav .search input{
    133     margin: 0;
    134     width: 260px;
    135     outline: none;
    136     border:none;
    137     line-height: 30px;
    138     font-size: 14px;
    139     color: #ffffff;
    140     background-color:rgb(59, 59, 59)
    141 }
    142 /* 标题部分占用宽度500px */
    143 .headNav .title{
    144     flex: 1 0 270px;
    145     padding-left: 30px;
    146     /*  470px; */
    147     height: 30px;
    148     overflow: hidden;
    149 }
    150 .headNav .title a{
    151     display: inline-block;
    152     padding: 0 5px;
    153     line-height: 30px;
    154 }
    155 /*  */
    156 .headNav .userInfo{
    157     flex: 0 0 auto;
    158     height: 30px;
    159     color: #ffffff;
    160     display: flex;
    161     flex-direction:row;
    162     flex-wrap:nowrap;
    163 }
    164 .headNav .userInfo div{
    165     padding-right: 10px;
    166 }
    167 .headNav .userInfo .imgUser{
    168     width: 20px;
    169     padding-top: 5px;
    170 }
    171 .headNav .userInfo .imgUser img{
    172     width: 100%;
    173 }
    174 .headNav .userInfo .imgList{
    175     padding-top: 5px;
    176     width: 20px;
    177 }
    178 .headNav .userInfo .imgList img{
    179     width: 100%;
    180 }
    181 .headNav .userInfo .text{
    182     line-height: 30px;
    183     font-size: 14px;
    184 }
    185 /*  */
    186 .headNav .leftNavIocn{
    187     flex: 0 0 20px;
    188     /*  20px; */
    189     height: 23px;
    190     padding-top: 7px;
    191 }
    192 .headNav .leftNavIocn img{
    193     width: 20px;
    194 }
    css代码

    3.实现效果:

     四、外部样式的引入方式

    媒体查询的样式代码写在不同css文件中,然后再通过link标签引入,还可以通过在一个主CSS文件中使用@import来引入。

    1.在link标签上引入:

    <link rel="stylesheet" href="css/200.css" media="(max-200px)"></link>
    <link rel="stylesheet" href="css/500.css" media="(max-500px)"></link>
    <link rel="stylesheet" href="css/800.css" media="(max-800px)"></link>

    2.@import引入:

    但是@import存在一些问题,引入样式必须写在主样式文件的最上方,并且不能再html的上设定宽度,否则也不生效。

    @import url("css/200.css") (max-200px);
    @import url("css/500.css") (max-500px);
    @import url("css/800.css") (max-800px);
  • 相关阅读:
    JS 一键复制功能实现
    移动端点击弹窗后禁止页面滑动
    ui库地址总结
    react源码解析20.总结&第一章的面试题解答
    react源码解析19.手写迷你版react
    react源码解析18事件系统
    react源码解析17.context
    react源码解析16.concurrent模式
    react源码解析15.scheduler&Lane
    react源码解析14.手写hooks
  • 原文地址:https://www.cnblogs.com/ZheOneAndOnly/p/13768051.html
Copyright © 2020-2023  润新知