响应式设计学习笔记

响应式网站实践原则

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">

1. 它代表ie文档的兼容性，告诉文档在ie下的兼容模式，
2. 它是为了兼容一些在ie8下显示不正常，但在老版本浏览器下显示正常的模式
3. 通过content 可以告诉 ie浏览器 你可以模拟 ie7的形式或者ie8或者ie9、ie11的形式显示网页
4. 比如content="IE=EmulateIE8"以ie8的模式渲染页面
5. 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引用

1. 对于必不可少的img图片 推荐用<img>标签形式嵌套进html里
2. 对于可有可无的装饰图片放进css样式里

6. px em rem

1. px像素
2. em 相对父元素 ，如果没设会一直往上找，很强大但会导致混乱
3. 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.清除浮动

因为浮动可能导致父元素 高度塌陷

1. 方法一 clear：both 优点：通俗易懂 缺点：无意义的空div过多。这种方法基本抛弃。
2. 方法二 给予容器 overflow:auto
3. 方法三 给予容器 float:left/right浮动，这样它和它的子元素都在同一层，这样也可以。
4. 最推荐的办法 通过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

  header .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);
  } 
  

  注意在chrome盒模型下，width不包括padding和margin
  所以，减去的值当为padding和margin的和
• before 利用

  .notice a:first-child:before{
      content: '最新公告：\00a0\00a0';
      color: #aaa;
  }
  

  其中\00a0\00a0是不换行的空白字符,因为content没法用&nbsp添加空格
• 文字不换行,多出省略

  .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方面：图片的排版和布局，根据设备大小加载相应图片

解决方案：

1. js或服务端(根据window大小设置地址)
2. srcset配合sizes
3. picture
4. svg (兼容性好一点)

• srcset

1. img设置为max-width:100%,图片容器为100%

3. picture
   新增的html标签，内含多个source，浏览器会自动遍历选择合适的条件

<picture>
    <source media="(max-width:36rem)" srcset="one.jpg 768w"/>
    <source media="(orientation: landscape)"/>
    ![](default.jpg)
</picture>

orientation：portrait | landscape

取值：

portrait：指定输出设备中的页面可见区域高度大于或等于宽度

landscape：除portrait值情况外，都是landscape(一般横屏)

说明：
定义输出设备中的页面可见区域高度是否大于或等于宽度。
本特性不接受min和max前缀。

主要推荐srcset，但srcset的兼容性问题，可以由picturefill.js解决