CSS--响应式布局

BtWangZhi

于 2017-07-30 14:22:14 发布

阅读量452

点赞数

分类专栏： HTML&&CSS 文章标签：响应式布局

本文链接：https://blog.csdn.net/BtWangZhi/article/details/76377336

版权

HTML&&CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1 响应式布局可用于页面大小变化的场景，可在css文件中直接写变化后各个属性的大小，正常引入即可，还有一种，在引入的语句中说明屏幕大小变化到一点的尺寸时自动引入该css文件，具体可看如下Demo。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0px;
            padding: 0px;
        }
        .body{
            height: 200px;
            width: 70%;
            margin: auto;
            background-color: #ff1333;
        }
        /*方法1 页面小于1000时生效*/
        /*@media screen and (max-width: 1000px){
            .body{
                height: 200px;
                width: 70%;
                margin: auto;
                background-color: #75ff28;
            }
        }*/
    </style>
    <!--方法2 屏幕小于1500时引入该CSS文件，默认的样式应该在前面，改变应该在后面-->
    <link href="http://localhost:63342/Demo02/css/css03.css" type="text/css" rel="stylesheet"  media="only screen and (max-width:1500px)">
</head>
<body>
    <div class="body">
    </div>
</body>
</html>

css03.css

.body {
    height: 200px;
    width: 70%;
    margin: auto;
    background-color: #75ff28;
}

未完待续。。。

BtWangZhi

关注

0
点赞
踩
0

收藏

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

1 响应式布局可用于页面大小变化的场景，可在css文件中直接写变化后各个属性的大小，正常引入即可，还有一种，在引入的语句中说明屏幕大小变化到一点的尺寸时自动引入该css文件，具体可看如下Demo。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style>
复制链接

扫一扫

专栏目录