媒体查询响应式布局

目录

什么是媒体查询

媒体查询 media query 是一种最近流行的响应式布局方案，可以用来适配pc 端 与 移动端的设备。
在本次博客中有一个小案例，就是实现了不同端的样式的一些改变，下面上图
在这里插入图片描述

link标签的媒体查询

通过设备访问的宽度进行判断，不同的设备给与不同的css样式表，这样即可在两端实现给予不同的样式表，来达到不同的显示效果。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>媒体查询demo</title>
    <link rel="stylesheet" href="common.css" />
    <link rel="stylesheet" media="(max-width: 680px)" href="mobile.css" />
  </head>
  <body>
    <label for="checkbox" id="label">菜单</label>
    <input type="checkbox" id="checkbox" style="display: none" />
    <br />
    <div class="left">
      <div class="left-item">王嘉尔</div>
      <div class="left-item">林在范</div>
      <div class="left-item">朴珍荣</div>
      <div class="left-item">bambam</div>
      <div class="left-item">金有谦</div>
      <div class="left-item">mark</div>
      <div class="left-item">崔柔仔</div>
    </div>
  </body>
</html>

现附上详细的媒体查询网址 ：MDN媒体查询网址

不用js实现元素隐藏显示

一般的使用js使指定元素显示或隐藏是我们很熟悉的了，但是如果不用js呢。
这里我们有一个新的方案，就是利用input的checbox来实现，我们在选中的时候就会为这个元素添加伪类元素，我们只要选中这个伪类元素吗，然后给予他的兄弟节点显示隐藏就可以了。

#checkbox:checked ~ div {
    display: none;
}
label {
    display: none;
}

代码如上也是非常简单的。

利用label标签实现元素替身

上面我么确实可以利用input来实现元素的隐藏于显示，但是input这个标签出现在页面中有一点太突兀了。我们可以利用label这个标签来为input制作一个外壳不同内在相同的替身，就是把作用在替身上的所有操作全部传递到input身上，点击替身与点击input是一样的了。

总结

上面就是媒体查询的一些简单应用，我相信媒体查询一定有更大的用处带我们拉发觉。

posted @ 2020-10-13 15:24  jacksonni  阅读(1167)  评论(0)  编辑  收藏  举报