css怎么实现响应式布局


本文摘自PHP中文网,作者青灯夜游,侵删。

css实现响应式布局的方法:1、使用flex布局,优点是代码简单、布局方便;2、使用绝对布局,结合使用media可以实现响应式布局;3、使用grid布局,优点是写法简便;4、使用float布局,优点是兼容性比较好。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

简单介绍四种响应式布局的四种方式

总的html代码

1

2

3

4

5

6

7

<body>

    <div class="box">

        <div class="left">left</div>

        <div class="center">中间</div>

        <div class="right">right</div>

    </div>

</body>

flex布局

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

.box{

    width: 100%

    height: 100px;

    display: flex;

}

.left{

    width: 300px;

    background-color: purple;

}

.center{

    flex: 1;

    background-color: pink;

}

.right{

    width: 300px;

    background-color: burlywood;

}

优点

  • 代码简单,布局方便

缺点

  • 如果中间有内容,缩到最小就不会在小了
  • 且左右侧的宽度变小了

image

绝对布局

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

.box{

    position: relative;

    width: 100%;

    height: 100px;

}

.left{

    position: absolute;

    left: 0px;

    width: 300px;

    background-color: pink;

}

.right{

    position: absolute;

    right: 0px;

    width: 300px;

    background-color: pink;

}

.center{

    position: absolute;

    left: 300px;

    right: 300px;

    background-color: burlywood;

}

@media (max-width: 600px){

    .left,.right{

       /* 平分屏幕 */

        width: 50%;

    }

}

阅读剩余部分

相关阅读 >>

css中字体加粗要怎么做?

css如何设置文字居中

css cursor属性怎么用

css动画用什么规则

css如何设置表格边框间的距离?border-spacing属性的使用

css怎么设置链接样式

声明css有哪几种方式

10款好看且实用的文字动画特效,让你的页面更吸引人!

css的伪类有哪些

css 派生选择器通过什么来定义

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...