15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > 盘点:CSS响应式布局的5种实现方式

盘点:CSS响应式布局的5种实现方式

时间:2023-09-23 21:36:01 | 来源:网站运营

时间:2023-09-23 21:36:01 来源:网站运营

盘点: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 大小)
750px75px
640px64px
480px48px
375px37.5px
320px32px





注:

我们可以用 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 样式的实现响应式布局的方式,也是最多用到的一种实现响应式的方法。

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









如果你才开始学前端,可以看看,我们这里有html+css阶段完整教程,我们在钉钉群里有全套的课程包含(入门到精通课程、4个综合项目(称之为15天训练营,在群里是从第二十三节课开始的)、30个练习案例!)如果需要,可以扫描下方链接,添加我,邀请你进入钉钉群学习!



关键词:实现,方式,布局,响应,盘点

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭