生活资讯网那些事

错误场景：

1.盒子放大缩小
2.栅格系统超小屏时布局混乱

问题描述：

1.盒子放大缩小
当给盒子设定了固定的宽高时，给盒子一个溢出隐藏 hidden：overflow
给他一个放大效果scale时会像两边扩大。

2.栅格系统超小屏时布局混乱
当用超小屏时，字体图片的大小使屏幕布局发生了混乱效果

---

原因分析：

1.盒子放大缩小
我在打开开发者工具后，发现固定了宽高的盒子上自带一个左右的padding值，又联想到放大时会往两边放大，就想可能是因为padding导致的、
2.栅格系统超小屏时布局混乱
在屏幕缩小时，页面布局变得混乱，发现图片和文字都很大，就猜想是大小的文体挤的

解决方案：

1.盒子放大缩小
因为发现这个padding值是自带的，所以在盒子上直接把padding设置为0,然后再个盒子添加一个固定的宽高就可以再当前盒子内放大缩小。代码如下：

.pic{
padding:0;
width:200px;
height:100px;
}

2.栅格系统超小屏布局混乱
发现这个文字图片过大后，因为我没用rem来写导致的，所以我在后面添加了一个媒体查询，让他再不同尺寸的屏幕下显示不同的大小，从而使布局不会放生变化。