day2

响应式设计

三大设计理念：

1.流动网格（弹性网格）

2.弹性图片

3.媒体查询

优点：

1.减少工作量。改变 js脚本，css样式。

2.节省时间，提高效率。

3.适应多设备，用户体验，用户分布。

4.搜索优化

rem IE8以下不支持。

兼容的话 把px写前面，在写rem。

---

浏览器状况

360双核 。 急速时用的是webkit，兼容用IE。

qq用的是X5内核。

---

媒体查询

css2 就有，css3增强。

@meida only screen and（  ）

不要省略only。老旧浏览器无法识别only，读到only后不解析后面的，省略only 会全部情况下应用此样式。

---

断点设计

1.针对屏幕大小进行分割比较合理（相对于对特定设备）

2优雅降级最好

---

组织项目目录结构

1.约定优于配置

2约定命名规范，代码结构减少配置。

---

网站LOGO

比特虫网站制作icon。

favicon.ico

---

MarkDown

readme.md

程序，软件说明，比txt要好点。

---

HTML5

section 区块

article 特殊的section

b 引起注意

em 强调，这很重要

class 用于样式，一般写成abc-123

id用于JS操作，一般用驼峰大小写

---

CSS

resets.css 清除默认的浏览器样式，统一初始。

normolize.css 更针对每个标签进行必要的初始化， bootstrap等框架使用的初始样式表

：not() 伪类选择选，括号里不能再写其他的带冒号的

---

响应式下的表格处理

1 隐藏某些表格

2 将一些行变成列。

---

组件挑选方式

1使用人数

2是不是有文档

3是不是还有人继续维护

4 小巧够用

---

响应式图片

以流量，体验为主，加载与用户页面相应的图片。

实现方式：

1 JS或者服务器端实现  查询屏幕宽度，改变图片的src。

2 srcset属性方式  在CSS中实现。

img src="img/Star.png" alt="star"

srcset="img/Star.png 345w, img/[email protected] 690w, img/[email protected] 1035w"

3 picture元素，设置source。

配合picturefill.js插件使用

picture

source srcset="img/[email protected]" media="(min-width: 1000px)"

source srcset="img/[email protected]" media="(min-width: 1000px)"

img srcset="img/Star.png" alt="star"

/picture

4 svg图像。

---