自适应布局1

标签：

1.<!-- 无viewport页面会进行缩放，无横向滚动条 width=device-width,initial-scale=1 无缩放无滚动条 -->
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

2.rem:

/*任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1rem=16px
以rem为单位的字体 与body的设置值无关 仅与html的设置有关
Chrome,360极速浏览器,opera：若font-size的rem设置的值小于12px 或者小于75% 会自动转化为12px 75%
为了方便计算可以将font-size:100px;
Chrome,360极速浏览器,opera html font-size:62.5% 10rem 10rem 宽高div 120*120 div字体1rem:12px
ie11：html font-size:62.5% 10rem 10rem 宽高div 99.33*99.33 div字体1rem:12px
firefox:html font-size:62.5% 10rem 10rem 宽高div 100*100正常 div字体1rem:10px;

为了所有浏览器统一 font-size的值设置为大于12px
*/

3.media:

/*屏幕宽度不大于1024px*/

@media only screen and (max-width: 1024px) {
      .content {
           width: 1000px;
           margin: 0 auto;
       }
}
/*屏幕宽度400px到1024px之间*/
@media only screen and (min-width: 400px) and (max-width: 1024px) {
       .left {
          width: 35%;
       }
      .right {
         width: 0;
     }
    .middle {
        width: 60%;
    }
}

4.box-sizing

box-sizing:content-box;border和padding不计算入width之内 150*150
box-sizing:padding-box; padding计算入width内 ff:110*110; safari/chrome:150*150;
box-sizing:border-box;border和padding计算入width之内，其实就是怪异模式 ff/chrome:100*100

content-box加不加意义不大，padding-box存在浏览器差异不好用，border-box safari/chrome/firefox均是一样的效果

5.:after选择器

/*在a标签后添加虚线分隔*/
nav a:nth-child(1)::after,
nav a:nth-child(2)::after,
nav a:nth-child(3)::after,
nav a:nth-child(5)::after,
nav a:nth-child(6)::after,
nav a:nth-child(7)::after {
content: " ";
width: 1px;
height: 28px;
background-color: #dadada;
position: absolute;
top: 9px;
right: -1px;
}

也可以用before 注意位置left right,a标签顺序

nav a:nth-child(2)::before,
nav a:nth-child(3)::before,
nav a:nth-child(4)::before,
nav a:nth-child(8)::before,
nav a:nth-child(6)::before,
nav a:nth-child(7)::before {
content: " ";
width: 1px;
height: 28px;
background-color: #dadada;
position: absolute;
top: 9px;
left: -1px;
}

自适应布局1

标签：

原文地址：http://www.cnblogs.com/miraclesakura/p/4758049.html