常见前端面试题及答案(6)


@media all and(min-width:0px){#test{background-color:black\0;}}这个是老是跟ie抢着认\0的神奇的opera,必须加个\0,不然firefox,chrome,safari也都认识。
@media screen and(-webkit-min-device-pixel-ratio:0){#test{background-color:gray;}}最后这个是浏览器新贵chrome和safari的。

26.如何为有功能限制的浏览器提供网页?你会使用哪些技术和处理方法?

27.如何视觉隐藏网页内容,只让它们在屏幕阅读器中可用?
•display:none;的缺陷搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略屏幕阅读器(是为视觉上有障碍的人设计的读取屏幕内容的程序)会忽略被隐藏的文字。
•visibility:hidden;的缺陷这个大家应该比较熟悉就是隐藏的内容会占据他所应该占据物理空间3.overflow:hidden;一个比较合理的方法.texthidden{display:block;/*统一转化为块级元素*/overflow:hidden;width:0;height:0;}就像上面的一段CSS所展示的方法,将宽度和高度设定为0,然后超过部分隐藏,就会弥补上述一、二方法中的缺陷,也达到了隐藏内容的目的。

28.你用过栅格系统吗?如果使用过,你最喜欢哪种?

比如:Bootstrap,流式栅格系统,http://960.gs/,栅格系统延续美学。

29.你用过媒体查询,或针对移动端的布局/CSS吗?

媒体查询,就是响应式布局。通过不同的媒介类型和条件定义样式表规则。媒介查询让CSS可以更精确作用于不同的媒介类型和同一媒介的不同条件。
语法结构及用法:@media 设备名 only (选取条件) not (选取条件) and(设备选取条件),设备二{sRules}。

示例如下:

/* 当浏览器的可视区域小于980px */
@media screen and (max-width: 980px) {
#wrap {width: 90%; margin:0 auto;}
#content {width: 60%;padding: 5%;}
#sidebar {width: 30%;}
#footer {padding: 8% 5%;margin-bottom: 10px;}
}
/* 当浏览器的可视区域小于650px */
@media screen and (max-width: 650px) {
#header {height: auto;}
#searchform {position: absolute;top: 5px;right: 0;}
#content {width: auto; float: none; margin: 20px 0;}
#sidebar {width: 100%; float: none; margin: 0;}
}

30.你熟悉SVG样式的书写吗?

SVG 意为可缩放矢量图形(Scalable Vector Graphics)。

什么是SVG?
•SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
•SVG 用来定义用于网络的基于矢量的图形
•SVG 使用 XML 格式定义图形
•SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
•SVG 是万维网联盟的标准
•SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

书写示例如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/1573.html