目录
  1. 1. 响应式布局
    1. 1.1. 响应式原理
    2. 1.2. 使用
      1. 1.2.1. 语法
响应式布局大势所趋

响应式布局

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

响应式布局等于流动网格布局,而自适应布局等于使用固定分割点来进行布局。

响应式原理

  • CSS3中的Media Query(媒体查询)
  • 通过查询screen的宽度来指定某个宽度区间的网页布局
  • 超小屏幕(移动设备) 768px以下
  • 小屏设备 768px-992px
  • 中等屏幕 992px-1200px
  • 宽屏设备 1200px

使用

语法

关于媒体查询@media

@media screen and (max-width: 768px) and (min-width: 320px){属性样式}
设计一个响应式容器:
1. 在超小屏设备的时候 768px以下 当前容器的宽度100% 背景蓝色
2. 在小屏设备的时候 768px-992px 当前容器的宽度750px 背景绿色
3. 在中屏设备的时候 992px-1200px 当前容器的宽度970px 背景红色
4. 在大屏设备的时候 1200px以上 当前容器的宽度1170px 背景黄色
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
padding: 0;
}

.container {
width: 1000px;
margin: 0 auto;
height: 1000px;
background: pink;
}

/*使用媒体查询能针对不同屏幕区间设置不同的布局和样式*/

/* 最小屏幕768以及以下适配的样式 */
@media screen and (max-width: 768px) {
.container {
width: 100%;
background: blue;
}
}

/* 在小屏设备768px-992px时适配的样式 */
@media screen and (min-width: 768px) and (max-width: 992px) {
.container {
width: 750px;
background: green;
}
}

/* 在中屏设备992px-1200px时适配的样式 */
@media screen and (min-width: 992px) and (max-width: 1200px) {

.container {
width: 970px;
background: red;
}
}

/* 在大屏设备1200px以及以上时适配的样式 */
@media screen and (min-width: 1200px) {

.container {
width: 1170px;
background: yellow;
}
}
</style>
</head>

<body>

<div class="container"></div>
</body>

</html>

这就简单做到了一个响应式的适配

文章作者: Jachie Xie
文章链接: https://xjc5772.github.io/2020-08/05/%E5%AD%A6%E4%B9%A0/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0/%E7%A7%BB%E5%8A%A8Web/%E5%93%8D%E5%BA%94%E5%BC%8F%E5%B8%83%E5%B1%80%E5%A4%A7%E5%8A%BF%E6%89%80%E8%B6%8B/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 XJC&Blog
打赏
  • 微信
  • 支付宝

评论