网站链接: 我爱捣鼓
当前位置: 首页 > 前端开发  > css

css3 @media媒体查询示例

2021/9/2 20:59:39

有的朋友以前没有接触过css3的@media媒体查询,不知道@media媒体查询怎么使用,如何写,今天我们就拿一个实际的例子,来说说@media媒体查询怎么使用?<!DOCTYPE html><html><head><title>css3 @media媒体查询示例--www.woaidaogu.com</title&…

      有的朋友以前没有接触过css3的@media媒体查询,不知道@media媒体查询怎么使用,如何写,今天我们就拿一个实际的例子,来说说@media媒体查询怎么使用?


<!DOCTYPE html>
<html>
<head>
<title>css3 @media媒体查询示例--www.woaidaogu.com</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}
/* 设置 body 的样式 */
body {
  font-family: Arial;
  margin: 0;
}
/* 页眉/LOGO */
.header {
  padding: 60px;
  text-align: center;
  background: #1abc9c;
  color: white;
}
/* 设置顶部导航栏的样式 */
.navbar {
  display: flex;
  background-color: #333;
}
/* 设置导航栏链接的样式 */
.navbar a {
  color: white;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
}
/* 悬停时改变颜色 */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}
/* 列容器 */
.row {  
  display: flex;
  flex-wrap: wrap;
}
/* 创建两个彼此相邻的不相等的列 */
/* 侧栏/左侧列 */
.side {
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}
/* 主列 */
.main {
  flex: 70%;
  background-color: white;
  padding: 20px;
}
/* 伪图像,仅用于此例 */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}
/* 页脚 */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}
/* 响应式布局 - 当屏幕宽度小于 700 像素时,使两列相互堆叠,而不是彼此相邻 */
@media screen and (max-width: 700px) {
  .row, .navbar {   
    flex-direction: column;
  }
}
</style>
</head>
<body>
<!-- Note -->
<div style="background:yellow;padding:5px">
  <h4 style="text-align:center">请调整浏览器窗口的大小以查看响应效果。</h4>
</div>
<!-- Header -->
<div class="header">
  <h1>My Website</h1>
  <p>With a <b>flexible</b> layout.</p>
</div>
<!-- Navigation Bar -->
<div class="navbar">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>
<!-- The flexible grid (content) -->
<div class="row">
  <div class="side">
    <h2>About Me</h2>
    <h5>Photo of me:</h5>
    <div class="fakeimg" style="height:200px;">Image</div>
    <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
    <h3>More Text</h3>
    <p>Lorem ipsum dolor sit ame.</p>
    <div class="fakeimg" style="height:60px;">Image</div><br>
    <div class="fakeimg" style="height:60px;">Image</div><br>
    <div class="fakeimg" style="height:60px;">Image</div>
  </div>
  <div class="main">
    <h2>TITLE HEADING</h2>
    <h5>Title description, Dec 7, 2017</h5>
    <div class="fakeimg" style="height:200px;">Image</div>
    <p>Some text..</p>
    <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    <br>
    <h2>TITLE HEADING</h2>
    <h5>Title description, Sep 2, 2017</h5>
    <div class="fakeimg" style="height:200px;">Image</div>
    <p>Some text..</p>
    <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
  </div>
</div>
<!-- Footer -->
<div class="footer">
  <h2>Footer</h2>
</div>
</body>
</html>

image.png


      通过以上内容我们知道了css3 @media媒体查询怎么使用,感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容,希望对大家有所帮助!引用本文内容时,请注明出处!谢谢合作!

相关资讯

  • 设置英文首字母大写的css属性是什么?

    设置CSS text-transform 的属性为capitalize就可以实现英文首字母大写。 定义和用法  text-transform 属性控制文本的大小写。 属性值 值 描 述 none 默认。定义带有小写字…

    2021/7/14 20:35:17
  • 只让页面显示横滚动条,不显示竖滚动条如何实现?

    只让页面显示横滚动条,不显示竖滚动条的方法其实很简单,主要用到body的两个css属性 overflow和 overflow-y,如下所示:body { overflow:scroll; overflow-y:hidden;}

    2021/2/28 21:45:25
  • 网页的滚动条样式可以修改吗?如何修改?

    网页的滚动条样式可以修改的,主要是使用css来控制那如何修改呢?如下代码:<div class="inner"> <div class="innerbox"> <p style="height:200px;">这是内容111</p> <p style="hei…

    2021/2/28 21:15:24
  • css如何实现6张图片均匀排列在一行?

    css部分如下:img{width:120px; height:80px;float:left;margin-right:16px;}.img3{margin-right:0;}html部分如下:<img src="images/001.jpg" /><img src="images/002.jpg" /><img src="images/003.jpg" /><img src=…

    2021/2/28 21:10:01