一些静态页面代码，总结一些布局、特效的小应用

PC端网页应对在不同分辨率电脑、浏览器不是处于全屏情况下的自动调整显示内容demo。demo中主要介绍了两种：

• banner宽度设置100%，即完全等比缩放，始终展示banner的全部内容
• banner为背景居中，根据图片的高度来固定图片，缩放屏幕时，高度不变、宽度不变仅慢慢删减图片两边内容

（以下对上两种情况第一种简称等比，第二种简称写死） 部分效果图： 当屏幕缩小到1280px屏幕情况下，写死情况会将两边内容裁剪掉，内容主题大小不变（截图不全，红字不超出），而等比缩放由于图片高度越来越小，图上的字会越来越难以分辨，而html上的网页文字由于定位原因会渐渐超出（解决方案可以是在不同屏幕下改变定位、字号、扩大文字宽度等，但这样会导致不同屏幕不同效果，且掌控复杂）。

优缺点：

1. 等比在大屏、中屏表现稍好，在图片资源高于屏显需求时，不影响图片清晰度。而写死有上限，即当屏幕宽度超过写死情况的宽高比的最大宽度时，图片居中，但左右会留白。
2. 写死情况在中屏向小屏切换过程中，表现稍好，只要主体内容处于图片中部，则缩小屏幕时仅会将左右无关紧要的内容删减，图片主体内容不变化，保持着清晰度和字体。而等比则会越缩越小，导致图片本身中的内容随之缩小，例如图片上的字会持续变小，直至无法识别，并且伴随着图片等比缩小后，图片高度会降低，处于图片层上方的网页文字会有超出图片范围的情况。
3. 。。。

总结

目前应对这种缩放情况的解决方案：

首先不建议用户无限缩小网页宽度，因此，会给html,body设置最小宽度min-width:1280px;并且使用@media screen and (max-width:1280px)的overflow-x:scroll来控制低于1280px情况使用滚动条而不是继续任由用户缩放屏幕，保证网页的主体内容不变形。 其次，主体内容应该保证均在中心1200px范围，当用户缩小屏幕时采用写死方案来避免内容大小发生改变，删减左右的不重要部分。

天猫等网站采用的是写死+背景颜色解决。最终效果就是无论多大的屏幕，放大超过主体内容后都采用背景色填充，缩小情况最小宽度要保证不会覆盖主体内容。 如当前天猫首页banner截图是这样 而实际的素材图片是这样