前端面试题二十三

一、你熟悉 SVG 样式的书写吗？

<svg>是绘制矢量图形的HTML5的标签，它是用SVG 使用 XML 格式定义图形的。
其定义格式为：

<?xml version="1.0" standalone="no"?>//XML标准文件头，从左到右依次表示：版本号是1.0，standalone
定义了外部定义DTD 文件的存在

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> //因为上面是no
<svg viewBox = "0 0 1000 1000" version = "1.1"  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink">//定义了版本和命名空间；xlink的命名空间，里面包含了href属性
    <defs>
        <!-- A circle of radius 200 -->
        <circle id = "s1" cx = "200" cy = "200" r = "200" fill = "yellow" stroke = "black" stroke-width = "3"/>
        <!-- An ellipse (rx=200,ry=150) -->
        <ellipse id = "s2" cx = "200" cy = "150" rx = "200" ry = "150" fill = "salmon" stroke = "black" stroke-width = "3"/>
    </defs>//定义图形
    <use x = "100" y = "100" xlink:href = "#s1"/>
    <use x = "100" y = "650" xlink:href = "#s2"/>//用此坐标代替上边的cx、cy坐标
</svg>

二、为什么响应式设计 (responsive design) 和自适应设计 (adaptive design) 不同？

都是对于不同分辨率页面做出调整的设计，响应式是会根据不同分辨率出现不同布局的页面，而自适应的话是页面总体布局不变，内部样式改变，其实可以理解bootstrap里的传统栅格布局和流式栅格布局吧？

响应式的基本概念是：

简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。 ——来源（百度）

（采用 CSS 的 media query 技术，配合流体布局（ fluid grids ）和同样可以自适应的图片/视频等资源素材。以上所说，都是通过 HTML 和 CSS 就能完成的。一般来说，响应式 倾向于只改变元素的外观布局，而不大幅度改变内容。Jeffrey Zeldman 总结说，我们就把 自适应 定义为一切能用来为各种分辨率和设备性能优化视觉体验的技术吧。 ——来源（知乎上的回答）

自适应的解释：

Adaptive Design 是 Aaron Gustafson 的书的标题。他认为 自适应 在包括 响应式 的 CSS media query 技术以外，也要用 Javascript 来操作 HTML 来更适应移动设备的能力。自适应 有可能会针对移动端用户减去内容，减去功能。自适应 可以在服务器端就进行优化，把优化过的内容送到终端上。自适应 通常会牵扯到另外一个词 “progressive enhancement” 。

progressive enhancement：从针对最低端的，最低分辨率的设备的设计做起，逐步逐步为更高阶的设备增加功能和效果的做法。（换个角度说，也就是相当于为移动设备减去功能）

作者：Arno_z
链接：https://www.jianshu.com/p/1c314dd0ba1f
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。