【最全】CSS响应式布局的5种实现方式

转载

响应式设计通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；

响应式布局的 5 种实现方案

一、百分比布局

比如，当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。

缺点：

计算困难，如果我们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位。

二、媒体查询布局

通过@media 媒体查询，可以通过给不同屏幕的大小编写不同的样式来实现响应式的布局。

响应式缺点：如果浏览器大小改变时，需要改变的样式太多，那么多套样式代码会很繁琐。

<style>
 .box {
   width: 500px;
   height: 500px;
   background-color: aqua;
}
 @media screen and (max-width: 1280px) {
   .box {
     width: 400px;
     height: 400px;
  }
}
 @media screen and (max-width: 980px) {
   .box {
     width: 300px;
     height: 300px;
  }
}
 @media screen and (max-width: 765px) {
   .box {
     width: 200px;
     height: 200px;
  }
}
</style>
<body>
 <div class="box"></div>
</body>

1、在实际开发中，常用的响应断点阈值设定

（括号后面是样式的缩写）

2、在实际开发中，常用的两种适配方案

<style>
 body {
   background-color: #000;
}
 @media screen and (min-width: 576px) {
   body {
     background-color: red;
  }
}
 @media screen and (min-width: 769px) {
   body {
     background-color: yellow;
  }
}
 @media screen and (min-width: 992px) {
   body {
     background-color: blue;
  }
}

 @media screen and (min-width: 1200px) {
   body {
     background-color: green;
  }
}
 @media screen and (min-width: 1400px) {
   body {
     background-color: orange;
  }
}
</style>
<style>
 body {
   background-color: #000;
}
 @media screen and (max-width: 1400px) {
   body {
     background-color: red;
  }
}
 @media screen and (max-width: 1200px) {
   body {
     background-color: yellow;
  }
}
 @media screen and (max-width: 992px) {
   body {
     background-color: blue;
  }
}

 @media screen and (max-width: 769px) {
   body {
     background-color: green;
  }
}
 @media screen and (max-width: 576px) {
   body {
     background-color: orange;
  }
}
</style>

3、在实际开发时，@media 会结合删格系统一起来使用，实现真正意义上的响应式开发。

@media screen and (min-width: 576px) {
 .col-sm-1 {
   grid-area: auto/auto/auto/span 1;
}
 .col-sm-2 {
   grid-area: auto/auto/auto/span 2;
}
 .col-sm-3 {
   grid-area: auto/auto/auto/span 3;
}
……

因代码过长，完整代码与文件 可进入粉丝群获取 ！

三、rem 布局

1、rem 如何适配

比如：

html {
 font-size: 10px;
}
.box {
 width: 10rem;
 height: 20rem;
}

2、实际开发中如何适配，如何将设计稿对应的 px 单位转换为 rem 单位

在 px 单位下，一个盒子的样式如下：

.box {
 width: 700px;
 height: 500px;
 font-size: 20px;
 padding: 10px;
 background-color: red;
}

如果我们把总宽 750px 分成 10rem，些时 1rem = 75px; ，转成对应的 rem 单位，就是用对应的 px/75px，得到如下结果。

.box {
 width: 9.3333rem;
 height: 6.6667rem;
 font-size: 0.2667rem;
 padding: 0.1333rem;
 background-color: red;
}

3、接下来如何适配不同的浏览器，实现等比例的缩放呢 ？

屏幕尺寸

html 中 font-size 大小 （1rem 大小）

750px

75px

640px

64px

480px

48px

375px

37.5px

320px

32px

 
<script>
initPage();
function initPage() {
var clientWidth =
document.documentElement.clientWidth || document.body / clientWidth; //获取屏幕可视区宽
var html = document.getElementsByTagName("html")[0]; //获取html根元素
html.style.fontSize = clientWidth / 10 + "px"; //动态设置font-size大小
} window.onresize = initPage;
</script>

注：我们可以用 flexible.js 插件来帮我们实现

四、vw、vh 响应式布局

vw 和 vh 分别相对的是视图窗口的宽度和视口窗的高度。

案例： 宽为 750px 设计稿下的某个元素样式如下

<style>
 body {
   margin: 0;
}
 .box {
   width: 750px;
   height: 300px;
   background-color: red;
}
</style>
<body>
 <div class="box"></div>
</body>

转换为 vw 后的代码如下：

<style>
 body {
   margin: 0;
}
 .box {
   width: 100vw;
   height: 40vw;
   background-color: red;
}
</style>
<body>
 <div class="box"></div>
</body>

五、flex 弹性布局

弹性布局是一种十分方便的，只需要依赖于 CSS 样式的实现响应式布局的方式，也是最多用到的一种实现响应式的方法。

弹性布局在父、子元素上都有相对应的属性来规范子元素在父元素中的 “ 弹力 ”。


分享到：
  网友评论(0)
 
回到顶部