Css3响应式布局

最新推荐文章于 2019-12-26 20:09:52 发布

没有风雨怎能远方

最新推荐文章于 2019-12-26 20:09:52 发布

阅读量369

点赞数

分类专栏： WEB入门 WEB前端文章标签：响应式布局 css3 css3新增属性

本文链接：https://blog.csdn.net/yyf0409/article/details/76914309

版权

WEB前端同时被 2 个专栏收录

26 篇文章 1 订阅

订阅专栏

WEB入门

8 篇文章 0 订阅

订阅专栏

Css3响应式布局

1.响应式布局的含义

在不同的情况下对页面进行合理的布局

（视窗口的宽度与高度不同电脑的分辨率不同设备平板电脑与手机等。。）

2多媒体查询

语法： @media not|only mediatype and (expressions) {
CSS 代码...;}

CSS3 多媒体类型
all 用于所有多媒体类型设备
print 用于打印机
screen 用于电脑屏幕，平板，智能手机等。
speech 用于屏幕阅读器

一般主要screen用的比较多

3响应式布局

下面两个盒子（box box1）随着网页窗口的放大与放小而改变大小颜色，这就是响应布局。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    .box{
        width: 500px;
        height: 500px;
        background-color: orangered;
    }
.box1{
    width: 500px;
    height: 500px;
    background-color: #2f13ff;
}
        @media screen and (max-width: 500px) and (min-width: 400px){
            .box{
                width: 200px;
                height: 200px;
                background-color: #fff318;
            }
            .box1{
                width: 200px;
                height: 200px;
                background-color: #f927d5;
            }
        }
        @media screen and (max-width: 400px){
            .box{
                width: 100px;
                height: 100px;
                border:1px solid #000000;
                background-color: transparent;
            }
            .box1{
                width: 100px;
                height: 100px;
                border:1px solid #ffa558;
                background-color: transparent;
            }
        }

    </style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>
</html>

4弹性盒子（flexbox）

组成：弹性容器（Flex container）和弹性子元素（Flex item）

弹性容器：
display:flex|inline-flex;
内部包含一个或多个弹性子元素
注意：设置为弹性容器后，子元素的float/clear/vertical-align属性将失效

没有风雨怎能远方

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Css3响应式布局

Css3响应式布局1.响应式布局的含义在不同的情况下对页面进行合理的布局（视窗口的宽度与高度不同电脑的分辨率不同设备平板电脑与手机等。。）2多媒体查询语法： @media not|only mediatype and (expressions) { CSS 代码...;}CSS3 多媒体类型all 用于所有多媒体类型设备print
复制链接

扫一扫