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);//前两个值表示偏移,第三个值表示模糊大小