响应式网站实践原则
1.不管设备大小，应该包含相同内容
2.根据设备大小不同，显示不同的内容
1.断点的选择
0-480 小屏幕
481-800 中屏幕
801-1400 大屏幕
1400+ 巨屏幕
<meta charset="UTF-8">的另一个好处，规范编码，并且让老版本浏览器标题识别中文
2.meta
<meta http-equiv="x-ua-comatible" content="ie=edge">
- 它代表ie文档的兼容性，告诉文档在ie下的兼容模式，
- 它是为了兼容一些在ie8下显示不正常，但在老版本浏览器下显示正常的模式
- 通过content 可以告诉 ie浏览器 你可以模拟 ie7的形式或者ie8或者ie9、ie11的形式显示网页
- 比如
content="IE=EmulateIE8"以ie8的模式渲染页面 - ie=edge是为了强制ie浏览器以最新的模式渲染页面，能多新，有多新，（但如果浏览器最高ie8，那也只能用ie8的模式渲染）。
3.响应式非常重要的标签
<meta name="view-port" content="width=device-width,initial-scale=1">
以下内容待填补
4.对于ie低版本兼容
- css里 \0 大家都懂
- html里
<!--[if lte IE8]>
<p>如果浏览器小于等于ie8，那么我提示你该升级了</p>
<![endif]-->
- 格式不多说 gt 大于、lt小于、gte大于等于、lte小于等于
5.对于img引用
- 对于必不可少的img图片 推荐用
<img>标签形式嵌套进html里 - 对于可有可无的装饰图片放进css样式里
6. px em rem
- px像素
- em 相对父元素 ，如果没设会一直往上找，很强大但会导致混乱
- rem 相对html，但rem ie678不支持
html {
font-size: 62.5%;
color: #222;
}
如此一个rem会是10px
7.取消选中
css3属性 顺序不能乱，不然谷歌没有，火狐有
::-moz-selection{
background-color: #b3d4fc;
text-shadow: none;
}
::selection{
background-color: #b3d4fc;
text-shadow: none;
}
8. 工具样式
.center-block{
display: block;
margin-right: auto;
margin-left: auto;
}
.pull-right{
float:right !important;
}
.pull-left{
float:left !important;
}
.text-right{
text-align:right !important;
}
.text-left{
text-align:left !important;
}
.text-center{
text-align:center !important;
}
.hide{
display:none !important;
}
.show{
display: block !important;
}
.invisible{
visibility: hidden;
}
.text-hide{
font:0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
注意其中的text-hide 是为了隐藏文字，方便seo识别图片
9.清除浮动
因为浮动可能导致父元素 高度塌陷
- 方法一
clear：both优点：通俗易懂 缺点：无意义的空div过多。这种方法基本抛弃。 - 方法二 给予容器
overflow:auto - 方法三 给予容器
float:left/right浮动，这样它和它的子元素都在同一层，这样也可以。 - 最推荐的办法 通过css3伪类给一个看不见的块状元素设置clear：both
.clearfix:after{
content:'.';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/*-- 为了ie6、ie7 基本上用不到 --*/
.clearfix{
zoom:1;
}
bfc注意，只要出发bfc就可以清楚浮动
而要生成BFC，目标元素的display为inline-block, table-cell, table-caption, flex, inline-flex中的一个，而inline-block会生成元素间隙，而有的支持性不好，最后在table-cell和table-caption综合后选择了display:table
所以有了最终版本，更优雅的方式清楚浮动
.clearfix:after{
content:" ";
display: table;
clear: both;
}
再稍微改进一下
.clearfix:after,.clearfix:before{
content:' ';
display: table;
}
.clearfix:after{
clear:both;
}
这种方法可以防止margin的叠加
10.学习细节知识
- chrome浏览器字体有个默认下限值，中文的是12px，所以在用rem设置行高的时候采取px更加精确
- 导航栏中间边框新技能get
注意在chrome盒模型下，width不包括padding和marginheader .top ul li+li{ border-left: 1px solid #999; margin-left:-3px; } ``` 这种方法的好处，在li 设置inline-block时产生的空白符通过`margin-left：-3px`去除,并且li中间会有细线用作区分 - calc()计算 ```sh .feature .item{ width: calc(100%/3 - 3rem); }
所以，减去的值当为padding和margin的和 - before 利用
其中.notice a:first-child:before{ content: '最新公告：\00a0\00a0'; color: #aaa; }\00a0\00a0是不换行的空白字符,因为content没法用 添加空格 - 文字不换行,多出省略
.notice a:first-child{ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } - 用户代理字符串在控制台输入
navigator.userAgent获得相关设备信息 - 媒体查询级别过高
@media only screen and (max-width:80rem){.......},媒体查询的rem根据的不是html的字体大小，而是浏览器默认的字体大小
11.弹性图片
响应式网站最早提出时，提出了 弹性布局 弹性图片 媒体查询
其中弹性图片，能帮助用户在移动设备上浏览时，浏览到相应的弹性图片，而不是为pc端上设计的大图片，让用户在相应设备有了更好的体验才是弹性图片的目的。
弹性图片
加载与用户设备相匹配的小图片，既快速，又不会影响用户的体验。
需要2方面：图片的排版和布局，根据设备大小加载相应图片
解决方案：
- js或服务端(根据window大小设置地址)
- srcset配合sizes
- picture
- svg (兼容性好一点)
- srcset
- img设置为max-width:100%,图片容器为100%
- picture
新增的html标签，内含多个source，浏览器会自动遍历选择合适的条件
<picture>
<source media="(max-width:36rem)" srcset="one.jpg 768w"/>
<source media="(orientation: landscape)"/>
</picture>
orientation：portrait | landscape
取值：
portrait：指定输出设备中的页面可见区域高度大于或等于宽度
landscape：除portrait值情况外，都是landscape(一般横屏)
说明：
定义输出设备中的页面可见区域高度是否大于或等于宽度。
本特性不接受min和max前缀。
主要推荐srcset，但srcset的兼容性问题，可以由picturefill.js解决
