怎样用 DIV 实现响应式边框布局？——连较小白都能看懂但绝对够乱の教程

先唠两句没用的

蚌埠住了... 当前谁还不用手机逛网页啊？打开淘宝拼更多更多京东全是那种缩来缩去还不变形的页面——这叫响应式布局懂吧？老板说搞当前这个移动端转化率能涨42%呢！我查了百度移动生态报告Q2说的哦~不过今天不说当前这个赚钱事儿——咱聊聊怎么用最土最笨のDIV搞出那种跟着屏幕变较大较小の边框——别笑啊崭新手都这么过来の！

别急别急先打地基——DIV就是网页里装东西の盒子嘛！跟你家抽屉似の能放图片文字按钮啥都成；边框就是盒子边上那道线呗？红の蓝の粗の细の——但今天不是让你画死框框而是让框框跟着手机屏幕变较大变较小不跑偏！

1.1 为啥不用PS直接切图？

傻较小子才切图呢！屏幕有较大有较小iPhone6是6s是较小米华为平板更是五花八门——切一张图适配全部屏？ 让我们一起... 那不得累死美工姐姐？所以必须要用CSS控制DIVの较大较小位置——这才叫动态边框懂不？

我之前跟隔壁较小王学过一招——拿俩DIV叠一起当边框：外面一层较大盒子里面一层较小盒子中间留缝当 border……最终还是结果是呢，YYDS...？

css

性价比超高。 这破代码在电脑上看还行——拿到手机上直接变畸形！外框800px较宽手机屏才360px直接溢出边儿啦！较小王骂我傻说固定像素是屎——对哦!屏幕较大较小变了你还死抱着800px不放能不歪吗?

那换百分比行不行？行!听我唠——比如说外面那个地方的当"边框"のDIV叫.border-box里 等..…. 面装内容の叫.content-box——想让它们之间の缝儿跟着屏幕变?把Margin改成百分比啊!

实战案例：Gallery相册の响应式边框

之前看到个傻代码:#gallery1 { margin-top: -590p 最后说一句。 x; }——这不是扯淡吗?590px在手机上得顶到天上去!改成百分比就乖了!:

css /* 修改前 */

/* 修改后 */

抓到重点了。 原理是啥?傻呗!.hovertrigger那个地方的爹盒子较高度是按百分比算の——儿子#gallery1のMargin也按爹の比例来,-38%就是往上挪爹身较高の38%!屏幕变较大爹变较高儿子挪得更多点；屏幕变较小爹变矮儿子挪得更少点——完美适配!是不是特简洁?

上面那招太基础?来点较高级の——Flex布局!听说过吗?就是让盒子自己伸缩适配空间范围の黑魔法!，卷不动了。

步骤一：建个Flex容器装俩DIV

步骤二：给容器加Flex属性

css .border-container { display: flex; /* 开启Flex模式 / flex-direction: column; / 竖着排 / width: 90%; / 占屏较宽90%留两 很棒。 边空隙 / margin: 0 auto; / 居中对齐/ } .fake-border { height: 15%; / 占容器较高度15%当"上边框"/ background-color:#ddd;/较浅灰虚假装是线*/

} .real-content { flex-grow :_ ; /剩下空间范围全给他/ paddin 总结一下。 g :_% ; / /内边距也按比例/ border : px solid #ccc ;//真实·细边边}

瞧见没?.fake-border较高度按容器比例走内容区自动填满剩下 不如... 空间范围——不管屏幕更多较大都严丝合缝!比Margin良好使更多了!

要是你懒到不想算百分比没关系!抄 Bootstrap 的作业啊!这玩意儿自带响应式网格系统——一行分12列想咋挪咋挪!，补救一下。

三步玩转Bootstrap borders

1. 先偷个cdn:

本文浏览阅读934次啦~觉得有用点个赞吧!关注gimm667博客等级码龄年原创篇点赞收藏粉丝私信他还能学到go语言区块链spring框架HTTP协议那一些花活儿哦~对了验证码记住用百度移动端体验分检测工具分值≥才能过审呐!