响应式页面CSS 样式

CSS reset 与 Normalize.css

---

  Normalize 相对「平和」，注重通用的方案，重置掉该重置的样式，保留有用的 user agent 样式，同时进行一些 bug 的修复，这点是 reset 所缺乏的。
  Reset 相对「暴力」，不管你有没有用，统统重置成一样的效果，且影响的范围很大，讲求跨浏览器的一致性。
  Normalize 给我的感觉就是不讲求样式一致，而讲求通用性和可维护性。这点可以从详细的注释和模块化的结构体现出来。
  问题推荐：《到底该不该用 CSS reset？》
  文章推荐：《来，让我们谈一谈 Normalize.css》

作者：Chris链接：https://www.zhihu.com/question/20094066/answer/13951803来源：知乎

---

px，em，rem

---

  ⑴、px：相当于1个像素
  ⑵、em：相对的长度单位，相对参照物为父元素的font-size，具有继承的特点，默认1em=16px
  ⑶、rem：相对参照物为根元素html，相对参照物固定不变，默认1rem=16px

    html {            font-size: 62.5%; /* font-size:10px */            color: #222;        }

---

基本默认样式

---

    /* ==========       基本默认值       ========== */    html {        font-size: 62.5%;        color: #222;    }    ::selection {        background-color: #b3d4fc;        text-shadow: none;    }    ul {        margin: 0;        padding: 0;    }    li {        list-style: none;    }

---

工具样式

---

    /* ==========       工具样式       ========== */    /* 居中显示 */      .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;    }    /* 清除浮动 */    .clearfix:before,    .clearfix:after {        content: "";        display: table;    }    .clearfix:after {        clear: both;    }

---

浏览器更新提示

---

    <!--[if lte IE 8]>    <p class="browserupgrade">您的浏览器版本老的可笑, 请到 <a href="http://browsehappy.com/">这里</a> 更新, 以获取最佳的体验</p>    <![endif]-->

    /* ===============         浏览器更新提示       =============== */    .browserupgrade {        margin: 0;        padding: 1rem;        background: #ccc;    }

---

重点样式

---

calc()使用

  calc() 是css3的一个新增的功能，用来指定元素的长度。可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。
  文章推荐：《CSS3的calc()使用》
  语法：

/* expression 是一个表达式，用来计算长度 */.elm {  width: calc(expression);}

  示例：

    .feature .item {        display: inline-block;        width: calc(33.33333% - 3rem);        padding: 1rem 1rem 1rem 1rem;        font-size: 1.4rem;        background-color: #fff;        box-shadow: 0 0 4px #ccc;    }

省略字符

    /* 常用配合 */    text-overflow: ellipsis;    overflow: hidden; /* 溢出截取 */    white-space: nowrap; /* 禁止换行 */

清除浮动

    .clearfix:before,    .clearfix:after {        content: " ";        display: table;    }    .clearfix:after {        clear: both;    }

CSS3 filter(滤镜) 属性

   实例：修改所有图片的颜色为黑白 (100% 灰度):

    img {        -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */        filter: grayscale(100%);    }

  实例：CSS3 grayscale滤镜+SVG使图片变黑白实例页面

  CSS代码：

    .gray {         -webkit-filter: grayscale(100%);        -moz-filter: grayscale(100%);        -ms-filter: grayscale(100%);        -o-filter: grayscale(100%);        filter: grayscale(100%);        filter: url(gray.svg#grayscale);        filter: gray;    }

  HTML代码：

    <img src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />    <img src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" class="gray" />

  SVG代码：

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg">        <filter id="grayscale">            <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>        </filter></svg>

  效果

      

媒体查询

    @media only screen and (min-width: 800px){        /* 大屏幕样式 */    }    @media only screen and (min-width: 481px) and (max-width: 800px){         /* 中等屏幕样式 */    }    @media only screen and (max-width: 480px){        /* 小屏幕样式 */    }

---

响应式Web设计框架 Bootstrap

---

  Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

---

表格处理

---

• 《响应式web中的表格处理》
• 《响应式表格,HTML表格自适应（responsive table）》

---

打印样式

---

    @media print {            *,            *:before,            *:after {                background: transparent !important;                color: #000 !important;                box-shadow: none !important;                text-shadow:none !important;            }            a,            a:visted {            text-decoration: underline;                    }            a[href]:after {                content: "("attr(href)")";            }            abbr[title]:after {                content: "("attr(title)")";            }            /* 使用#号和javascript的超链接不打印href */            a[href^="#"]:after,            a[href^="javascript:"]:after{                content: "";            }            pre,            blockquote {                border: 1px solid #999;                page-break-inside: avoid;            }            thead {                display: table-header-group;            }            tr,i            mg {                page-break-inside: avoid;            }            img {                max-width: 100% !important;            }            p,            h2,            h3 {                orphans: 3;                widows: 3;            }            h2,            h3 {                 page-break-inside: avoid;            }        }

---