每日一弹：pc端布局中的一些小坑

常见的一些坑

1.border-box的使用

1.它是css3的属性值，pc端会有ie兼容问题，在*通配符选择器中设置。

2.静态布局与自适应

1.百分比布局。布局小块的地方很蛋疼，但是整体页面的大块划分还是挺好用的哈。

2.百分比布局遇上padding很蛋疼

3.关于图片

1.pc端背景图用的比较多，小图标用精灵图（雪碧图），小编在外包公司工作，开发都懒得弄，平时怎么省事怎么来，怎么开发快怎么来，直接小图标做背景

2.移动端图片用的多

4.样式不起作用

1.样式中空格过多。偶尔在开发中碰见这个问题。

2.link链接的文件不对。经常犯错，项目文件多了，经常copy，就容易犯迷糊，文件都不对，还改个毛。

5.布局选择问题

1.简单的展示型网站会用响应式布局。

2.pc一般静态布局。

3.单页面项目，如后台管理系统，会用百分比布局搭建大的框架。小的局部还是采用静态布局。

4.移动端常用的是rem布局结合百分比布局。特别想用flex布局，但是有兼容性问题。

5.微信小程序的页面布局就不用考虑flex的兼容性问题，爽。

6.rem布局

1.我比较习惯用rem和vw两个相对单位换算。习惯量出二倍图px尺寸除以100，加上rem单位即可。

2.iphone5:

                    html{font-size: 15.625vw;}  

                    div { width: 6.4rem;/*二倍图量多少写多少*/ }

2.iphone6: 

                   html{font-size: 13.33333333vw;}

                     div { width: 7.5rem;/*二倍图量多少写多少*/ }

3.实际切图中，会碰到不是标准的二倍图，小编会等比缩放到iphone6尺寸，控制好版心的距离。

4.然后在没缩放的原图上切图，这样样式不会太不准确。

7. wx.switchTab: url 不支持传参

1.方法1：把tabBar页面复制一份，改下名字

2.方法2：设置一个全局变量，每次点击不同的对象，用当前数据重新给全局变量赋值