响应式开发细节

1. 渐进增强还是优雅降级？

渐进增强：先实现低版本浏览器支持的功能和特性，估计做出来的网站自己都想吐，然后再一点一点添加高版本浏览器支持的特性，估计完成后项目都要解散了！

优雅降级：按照高版本浏览器支持的特性开发网站，最后去掉低版本浏览器不支持的特性，如border-radius,box-shadow等。

我比较支持优雅降级，毕竟使用低版本浏览器如IE6的人稀缺如国宝，要让大多数用户使用体验良好的页面效果，若用户使用的浏览器版本较低，就告诉他，你使用的浏览器是在太老，老的可笑，赶紧升级吧，给他一个升级链接即可。

2. 先移动端还是先PC端？

这个可以根据用户的占比来考虑，若移动端用户占比较多，就先开发移动端的，否则开发PC端的。

3.语义化之article和section标签的区别

div无任何语义，仅仅用作样式化。
Section表示有主题的内容，比div更加有语义，一般有标题，比如对话框，文章章节，一个网页可以包含以下几个section：简介、新闻列表、版权信息。

article相当于section的子集，比section更加有语义，arctical可以脱离上下文，作为完整独立的内容而存在，例如帖子，形式上时相似的，但是内容是独立的。

nav也是一种section。如果拿不准应该用section还是article就直接用div。

b,em.i以前这些标签只表示加粗，强调，倾斜，但是HTML5有新约定，比如b,吸引人注意，并不表示重要或者强调，

4.em和rem

em和rem都是相对的单位，em是相对于父元素，可继承，若到HTML还未找到，即使用浏览器的默认em。

1rem=16px;

rem是相对于HTML的，未设置为html:font-size:100%;

1rem=16px，62.5rem=1000px;

将HTML：font-size:62.5%;则1rem=10px;

5.Chrome显示最小px为12px

中文Chrome显示最小px为12px，因此若用上一行的规则，同时设置line-height：3rem并不等于30px，而是36px.可用CSS3属性webkit-text-adjust:none来取消浏览器对字体的最小限制。

6. 三等分布局

• 设置父元素高度为100%；
• 子元素

box-sizing:border-box;
margin-left:1.5rem;/* 第一个子元素margin-left:0*/
width:calc(33.33333333% - 1rem);/*这里减去1rem因为有两个1.5rem的margin-left，共3rem，平分给3个元素即1rem*/

7. 文字省略显示

text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;

8.图片应设置成img还是background及如何设置图片大小

若图片比较重要，则设置成img，比如logo

否则设置成background，也不会影响其他功能，比如小图标。

不同分辨率下应设置不同的图片大小，可通过以下方式设置：

• 用js获取屏幕的大小，替换img.src
• 把屏幕尺寸写进cookie，直接在服务器端判断应获取的尺寸大小。
• 利用img标签的srcset属性和sizes属性：

 <img src="480.png" alt="s" srcset="480.png 480w,800.png 800w,1600.png 1600w" sizes="100vw">

• 利用picture标签

<picture>
    <source srcset="480.png" media="(max-width:480px)" />
    <source srcset="800.png" media="(max-width:800px)"/>
    <source srcset="1600.png" media="(max-width:1600px)"/>
    <img src="480.png" alt="img">
</picture>

表示在屏幕width<480时使用480.png,屏幕width<800时使用800.png等，sizes属性表示img占用屏幕的比例。

以上两种方式第2种较好，因为屏幕尺寸是固定的，用户一般不需要调整，尤其是在移动端，因此，可减少http请求数量

9.CSS3之filter属性

• -webkit-filter:gray-scale(100%);
• -webkit-filter:blur(10px);
• -webkit-filter:drop-shadow(3px 3px 3px #666);//前两个值表示偏移，第三个值表示模糊大小