如何用纯css 媒体查询media queries实现响应式汉堡

Hamburger_icon

 
PC端和手机移动端均适配，依据设备的宽度大小决定是否值下拉菜单样式

    一、 head里添加meta移动端的样式

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

width	viewport的宽度
height	viewport的高度
initial-scale	初始的缩放比例   eg:设置成2.0 那么最初加载的页面就会放大2倍
minimum-scale	允许用户缩放到的最小比例
maximum-scale	允许用户缩放到的最大比例   eg:设置成2.0 那么页面用户最多可以放大2倍
user-scalable	用户是否可以手动缩放 默认值是yes，如果我们设置成no，那么上面的两个sacle就失效，因为已经禁止用户手动调整缩放
width=device-width	在content里 设置屏幕宽度为设备宽度

<div class="nav">
    <!--汉堡logo menu-->
    <label for="toggle">&#9776;</label>
    <input type="checkbox" id="toggle">
    <div class="menu">
        <a href="#">Business</a>
        <a href="#">Service</a>
        <a href="#">Learn more</a>
        <a href="#"><span>Free Trial</span></a>
    </div>
</div>

• ☰     这个汉堡包menu菜单样子其实有代码实现的 "☰" 而且是作为字体显示的，可以直接用font-size直接调整大小
• 哈哈，为了打出这个代码， 还要\反斜杠转义

CSS

• css样式 -通用

 body{
            width: 100%;
            height: 100%;
            margin:0;  //浏览器默认的body的margin是8px;由浏览器的user-agent-stylesheet提供的。所以我们直接覆盖默认就可以了，
        }
        html{
            font-family:'helvetica neue',sans-serif;  //可以写很多种字体样式，意思是浏览器自己一个个识别，前一个没有就看后一个，一直往后找，直到找到可以用的
        }

.nav{
            float: right;
            text-align: right;
            height: 70px;
            line-height: 70px;
            border-bottom: 1px solid #eaeaea;
        }
        label{
            display: none;
        }
        #toggle{
            display:none;
        }
        .menu a{
            margin: 0 10px;
            text-decoration: none;
            color: gray;
        }
        .menu{
            margin: 0 30px 0 0;
        }
        .menu a span{
            color:#54d17a;
        }

   //添加@media样式：
    @media only screen and (max-width: 500px) {
            label{
                display: block;
                cursor: pointer;
                width: 26px;
                float: right;
            }
            .menu{
                width: 100%;
                display: none;
                text-align: center;
            }
            .menu a{
                display: block;
                clear:right;
            }
            #toggle:checked + .menu{  //这是个技术点
                transition:all 0.4s ease-in;
                display: block;
            }

        }

• label用for绑定的input，自带了点击事件，点击了label的哪个汉堡logo,input就checked，这样就利用纯CSS实现了点击按钮下拉菜单出现的功能

  
  ↑(●'◡'●)设备宽度大于500px时

 
 

↑(●'◡'●) 设备宽度小于500px时