响应式布局:只需要开发一套代码,只需要一套代码使页面适应不同的屏幕。
响应式设计通过检测视口分辨率,针对不同客户端在客户端做代码处理,来展现不同的布局和内容;
比如,当浏览器的宽度或者高度发生变化时,通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化,从而实现响应式的效果。
缺点:
计算困难,如果我们要定义一个元素的宽度和高度,按照设计稿,必须换算成百分比单位。
通过@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;
}
……
因代码过长,完整代码与文件 可进入粉丝群获取 !
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 |
注:
我们可以用 flexible.js 插件来帮我们实现
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 样式的实现响应式布局的方式,也是最多用到的一种实现响应式的方法。
弹性布局在父、子元素上都有相对应的属性来规范子元素在父元素中的 “ 弹力 ”。
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。