响应式开发学习之旅-------准备配置

CSS Normalize.css

用于强制统一各个浏览器中的html标签样式

 

px,em,rem

px  1px相当于一个像素

em  相对的长度单位

    em相对参照物为父元素的font-size

    em具有继承性，如果父没有，会继续往上找

    当没有设置font-size时，浏览器会有一个默认的em设置：1em=16px

    缺点：

        因为参照于父，有可能会发生混乱

rem 相对的长度单位，参照物为根元素的html，如果html没有设置，则为1rem=16px

    缺点：

        不是所有浏览器都支持，ie8及以下不支持

    font-size:62.5%  1rem = 10px(10/16*100%)

    font-size:100%   1rem = 16px

 

搞一个main.css 用来设计主要样式

/****************
 * 页面样式
 ****************/

 /* =============
 *基本默认值
 ============== */

 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-left:auto;
     margin-right: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;
 }

.clear:before,clear:after{
    content:''
    display:table
}
.clear:after{
    clear:both
}
.clear{
    *zoom:1
}

css3的 calc是个好东西，filter是个好东西，

autoprefixer用来添加前缀的工具也是个好东西