棋牌软件开发/seo从0到1怎么做
本文以及随后的响应式设计的相关内容都是来源于此
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:
其中提到了媒体查询，是指在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%;}
}通过这个例子，坠坠重要的一个知识就是：
响应式设计就是图片能随页面大小变化，采取媒体查询，对不同的屏幕尺寸采取不同的渲染样式。
