CSS-响应式框架

最新推荐文章于 2023-03-31 09:35:03 发布

github_34514750

最新推荐文章于 2023-03-31 09:35:03 发布

阅读量421

点赞数 2

分类专栏： css 文章标签：响应式

本文链接：https://blog.csdn.net/github_34514750/article/details/53418582

版权

css 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1.使用流式960网格布局

960网格系统不是响应式的，更像一个表格，其列跨越固定宽度的表头。它在960px宽的窗口中布局最完美

准备工作

960网格布局使用了百分比宽度、左浮动元素替代了固定宽度的网格元素。该版本大数情况下能良好工作，但是当列变得很狭窄时，阅读会变得很困难。并且下载解压流式960网格系统代码，引入grid.css

实现方式

下面用container_16布局且使用了grid(引用了grid.css)

用于换行

<div class="container_16">
    <div class="grid_16">
        <h2>Fluid Grid</h2>
    </div>
    //换行标签
    <div class="clear"></div>

    <div class="grid_3 break-column">tryhrthuy</div>
    <div class="grid_5 break-column">bmdryEWEREWRT</div>
    <div class="grid_2 break-column">FGHDRTYFGXNXV</div>
    <div class="grid_2 break-column">CVGTAERT</div>
    <div class="grid_2 break-column">MNJYKT</div>
    <div class="grid_2 break-column">ERTSRYRTUY</div>

</div>

给上述流式布局添加一些响应式特性，添加媒介查询来覆盖1024px、600px、420px这几个屏幕断点
工作原理

1.若在浏览器中打开使用了非响应式流式网格的HTML文件，当浏览器窗口变小，页面中6列会保持相同比例，可读性会变差
2.添加媒介查询重载div元素的样式属性，从而得到响应式效果。
3.三种方法实现重载：
3.1.使用min-width方法重载百分比宽度
3.2.在grid.css文件之后加载responsive.css文件，并且在responsive.css使用多类显示命名空间(.grid_2.break-column等)
3.3.使用！important声明提升重载等级

@media screen and (max-width:420px) {
    .break-column {
        min-width:360px;
    }
}
@media screen and (max-width:600px) and (min-width:421px) {
    .grid_2.break-column,
    .grid_3.break-column,
    .grid_5.break-column {
        width:48%;
    }
}
@media screen and (max-width:1024px) {
    .break-column {
        width:30% !important;
    }
}

2.使用Blueprint网格布局

Blueprint CSS框架是另外一款受欢迎的静态CSS网格系统。可以在某些情况下可能需要将静态的Blueprint CSS网格框架定制为自己需要的响应式Blueprint框架。只需简单添加几行CSS代码就能拥有响应式框架。

准备工作

下载源码

实现方式

总列数是22,先实现基本的blueprint布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <link rel="stylesheet" type="text/css" href="blueprint-css-master/blueprint/ie.css"/>
    <link rel="stylesheet" type="text/css" href="blueprint-css-master/blueprint/print.css"/>
    <link rel="stylesheet" type="text/css" href="blueprint-css-master/blueprint/screen.css"/>
    <link rel="stylesheet" type="text/css" href="test.css"/>
</head>
<body>
    <h1>Blueprint CSS Framework Responsive</h1>
    <hr>
    <div class="span-7">asfgerter jhgjghr etyry rfg</div>
    <div class="span-8">asfgerter jhgjghr etyry rfg</div>
    <div class="span-7">asfgerter jhgjghr etyry rfg</div>
    <hr>

    <hr>
    <div class="span-15">
        <img src="robots.jpg">
        <p>asfgerter jhgjghr etyry rfg</p>
    </div>
    <div class="span-7">
        <ul>
            <li>asfgerter jhgjghr etyry rfg</li>
            <li>asfgerter jhgjghr etyry rfg</li>
            <li>asfgerter jhgjghr etyry rfg</li>
        </ul>
    </div>
    <hr>
</body>
</html>

接下来，把这个框架变成一个响应式框架

@media screen and (max-width:600px) {
    div[class*="span-"]{width:90%;}
}
@media screen and (min-width:601px) and (max-width:1024px){
    div[class*="span-"]{width:42%;}
}

工作原理

Blueprint CSS框架具有响应式效果
1.首先将容器宽度由固定宽度修改为流式最大宽度、
2.然后设置一个媒介查询断点
本节主要是使用属性选择器在CSS中利用通配符批量修改span属性

github_34514750

关注

2
点赞
踩
1

收藏

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

1.使用流式960网格布局960网格系统不是响应式的，更像一个表格，其列跨越固定宽度的表头。它在960px宽的窗口中布局最完美准备工作960网格布局使用了百分比宽度、左浮动元素替代了固定宽度的网格元素。该版本大数情况下能良好工作，但是当列变得很狭窄时，阅读会变得很困难。并且下载解压流式960网格系统代码，引入grid.css实现方式下面用container_16布局且使用了grid(引用了grid.
复制链接

扫一扫