前端设计技巧

一、前端设计面临的最大问题

1、浏览器不兼容
HTML5特效在IE8及以下版本不显示，排版错位

2、分辩率不同
排版错位

二、浏览器不兼容解决办法
1、针对不同浏览器加代码
<!–[if !IE]><!–> 除IE外都可识别 <!–<![endif]–>
<!–[if IE]> 所有的IE可识别 <![endif]–>
<!–[if IE 6]> 仅IE6可识别 <![endif]–>
<!–[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]–>
<!–[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]–>
<!–[if IE 7]> 仅IE7可识别 <![endif]–>
<!–[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]–>
<!–[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]–>

 例：如何让 IE9及其以下版本浏览器识别HTML5标识及特效
 <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.6.2/html5shiv.js"></script>
  <script src="js/respond.src.js"></script>
<![endif]-->

2、针对不同浏览器用不同的CSS样式
透明层IE8CSS代码：
background-color:#053361;opacity:1;filter:alpha(opacity=85);

  透明层HTML5代码：
  background: rgba(255,255,255,0.8);

三、分辩率不同解决办法
1、网页头、网页主体、网页尾放在一个层或表格中，并且居中，最外层宽度为100%。

　　　下面的布局可以用div,也可以用table　

网页内容

网页内容

2、尽量不用绝对定位，用相对定位。

3、针对不同分辩率用不同的CSS样式
高分辩率下字体、图片加大
@media screen and (判断属性){ CSS样式选择器 }

CSS代码示例：
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
/* css注释：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */

@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */

@media screen and (max-width: 901px) {
.abc {width: 200px;}
}
/* 设置了浏览器宽度不大于901px时 abc 显示200px宽度 */

@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */

需要注意是CSS代码顺序，由大到小排版CSS（判断浏览器宽度越大越放前），这样是因为逻辑关系，@media 判断CSS排错将导致判断失效。