position定位响应式_响应式设计到底是啥？--配合float的响应式

weixin_39932300

于 2020-12-23 06:50:29 发布

阅读量99

点赞数

文章标签： position定位响应式

本文链接：https://blog.csdn.net/weixin_39932300/article/details/111682433

版权

本文以及随后的响应式设计的相关内容都是来源于此

Learn CSS Grids and Flexbox for Responsive Web Designfrontendmasters.com

响应式的三个定义：
1 图片尺寸随页面大小变化会改变
2媒体查询
3响应式的(flexible-grid-layout)栅格设计
上面三点就是响应式设计的三个要素，这是由 Ethan Marcotte在2010年发表的A List Apart-responsive design中提出。
link:

Responsive Web Designalistapart.com

其中提到了媒体查询，是指在CSS中，针对不同的设备，由浏览器获取屏幕尺寸，对应采取不同的渲染方案(css)；

上面已经提到了响应式设计的三个核心，按照这个定义来看，如果使用float来搭配响应式的设计，那么思路如下

小尺寸不浮动，大尺寸浮动，
不浮动就是叠积木，还记得浮动的一个精髓就是：让块级元素成行排列。这个解释很形象
一个元素浮动了，那么需要两点处理
- 包含浮动元素的row 要清除浮动；
- 浮动元素有float、margin、width 缺一不可
width的设定，就是对不同的屏幕尺寸，通过对宽度的设计，让浮动元素有不同的排列方式
当然可以对img尺寸进行设定，包括width:100%、max-width:250px;
- 一是完成图片尺寸随页面大小变化的要求，二是让图片不至于太过失真

上面的一段就是响应式的栅格系统。

具体思路如下：

首先html结构就是四个div.row作为容器包裹浮动元素，通过浮动元素的类来设计其具体属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/floats.css">
</head>
<body>
    <!--在手机上，像积木一样排列 -->
    <!-- 在平板、电脑上，排列方式要求变化，细节随意 -->
    <!-- 对row1,要求平板显示两行，每行两个，电脑显示一行，每行四个 -->
    <!-- 对row2，要求平板和电脑都显示一行，每行两个 -->
    <!-- 对row3,要求平板和电脑都显示一行，每行两个，左边小，右边大，比例1:3就可以 -->
    <!-- 对row4 ,要求何时都是显示一行即可 -->
    <div class="wrapper">
<!-- row 1, 4 individual boxes -->
        <div class="row">
            <article class="r-1">
                <h3>tidehunter</h3>
             <img src="img/tidehunter.png" >
                <p>三号位，四号位，偶发一号位，后劲不足，身板较差，缺蓝，续航极差</p>
                <p><a href="#">ReadMore</a></p>
            </article>
            <article class="r-1">
             <h3>witchdoctor</h3>
             <img src="img/witchdoctor.png" >
                <p>四号位，五号位，线上牵制差，团战能力较好</p>
                <p><a href="#">ReadMore</a></p>
            </article>
         <article class="r-1">
             <h3>viper</h3>
             <img src="img/viper.png" >
                <p>被动技能针对性强，独特的法球效果配合7.20重做的毒液攻击令毒龙有较强的针对顶级C位的后期能力；毒液攻击的AOE伤害也不可小觑</p>
                <p><a href="#">ReadMore</a></p>
         </article>
         <article class="r-1">
             <h3>tinker</h3>
             <img src="img/tinker.png" >
                <p>刷刷新，杀杀人</p>
                <p><a href="#">ReadMore</a></p>
         </article>
        </div>
<!-- row 2, 2 boxes spanning 2 rows -->
        <div class="row">
         <article class="r-2">
             <h3>enigma</h3>
             <img src="img/enigma.png" >
                <p>世界级团控或许没有定论，但世界级吸血团控应该花落谁家说不定很快揭晓</p>
                <p><a href="#">ReadMore</a></p>
         </article>
         <article class="r-2">
             <h3>slithereen</h3>
             <img src="img/slithereen.png" >
                <p>较弱的打钱能力和较差的机动性使大鱼人的定位略显尴尬，常见于先手控/团战搅X棍等定位。</p>
                <p><a href="#">ReadMore</a></p>
         </article>
        </div>

<!-- row 3: narrow left column, wide right/content column -->
        <div class="row">
            <article class="r-3 left-1">
                <h3>enchantress</h3>
             <img src="img/enchantress.png" >
                <p>弹道优秀，前期几乎物理免疫，自带支配可以多拉野，配合电锤快速farm,团战站在阴影中疯狂嘘区。</p>
                <p><a href="#">ReadMore</a></p>
            </article>
            <article class="r-3 right-3">
             <h3>puck</h3>
             <img src="img/puck.png" >
                <p>所有英雄中靠前的初始攻击，超强的机动性，超强的灵活性，超强的爆发力，但需要较高的意识、技巧、熟练度</p>
                <p><a href="#">ReadMore</a></p>
         </article>
        </div>
<!-- row 4: one column -->
        <div class="row">
            <article class="r-4">
                <h3>sandking</h3>
             <img src="img/sandking.png" >
                <p>戳进去就死了的传统延续了几十个版本，现在还衷心于沙王的玩家一定是真爱！</p>
                <p><a href="#">ReadMore</a></p>
            </article>
        </div>
    </div>
</body>
</html>

下面是css样式，有几个重点：

首先对box-sizing重新定义
为浮动元素容器row添加清除浮动
[class*=""]可能在IE8不支持
min-height：1px也是为了兼顾IE
设计是移动端优先

html{
    box-sizing: border-box;

}

*,*::after,*::before{
    box-sizing: inherit
}
a{
    color: aliceblue;
    text-decoration: none;
    position: absolute;
    bottom: 2px;

}
article{
    position: relative;
}
.row::after{
    content: "";
    display: table;
    clear:both
}
body{
    background: #EE5A24;
    font-family: consolas;
    font-size: 20px;

}
div img{
    width:70%;
    max-width: 200px;;
}
.r-1,.r-2,.r-3,.r-4{
    padding: 0 10px;
    height:350px;
}
.r-1{
    background: #f0932b
}
.r-2{
    background: #F79F1F
}
.r-3{
    background: #FFC312
}
.r-4{
    background: #A3CB38;
    width: 96.5%;

}

/* 下面开始媒体查询 采用 480 768*/
/* 首先是平板 */
@media only screen and (min-width:480px){
    [class*="r-"]{
        float: left;
        margin:2px;
        min-height:1px;
        margin-top: 5px;
    }
    .r-1{
        width: 48%;
        overflow:hidden
    }
    .r-2{
        width: 48%;
        overflow: auto;

    }
    .r-3.left-1{
        width: 25%;
    }
    .r-3.right-3{
        width: 71%;
    }
}
/* 然后是电脑 */
@media only screen and (min-width:768px){
    .r-1{
        width: 24%;

    }
    .r-2{
        width: 48.2%;
        overflow: auto;

    }
    .r-3.left-1{
        width: 25.3%;
    }
    .r-3.right-3{
        width: 71%;
    }
}

通过这个例子，坠坠重要的一个知识就是：

响应式设计就是图片能随页面大小变化，采取媒体查询，对不同的屏幕尺寸采取不同的渲染样式。

weixin_39932300

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
position定位响应式_响应式设计到底是啥？--配合float的响应式

本文以及随后的响应式设计的相关内容都是来源于此Learn CSS Grids and Flexbox for Responsive Web Designfrontendmasters.com响应式的三个定义：1 图片尺寸随页面大小变化会改变2媒体查询3响应式的(flexible-grid-layout)栅格设计上面三点就是响应式设计的三个要素，这是由 Ethan Marcotte在2010年发表...
复制链接

扫一扫