小结
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用“大势所趋”来形容也不为过。响应式Web设计中的大部分技术都可以用在WebApp开发中。响应式布局面对不同分辨率的设备灵活性强,能够快捷解决多设备显示适应问题。响应式布局可以节约开发成本,方便维护。响应式布局同样也拥有缺点,兼容各种设备工作量大,效率低下;代码累赘,会出现隐藏无用的元素,加载时间加长。通过不同的媒体类型和条件定义样式表规则,媒体查询(Media Queries)让CSS可以更精确地作用于不同的媒体类型和同一媒体的不同条件。
习题
1.media query不能够获取哪些值?(D)
A.设备的宽和高device-width,device-heigth显示屏幕/触觉设备。
B.渲染窗口的宽和高width,heigth显示屏幕/触觉设备。
C.设备的手持方向,横向还是竖向orientation(portrait|lanscape)和打印机等。
D.设备的型号和参数
2.media标签的哪个参数可以指定渲染界面最大宽度?(A)
A.max-width B.max-device-width
C.max D.orientation
3.media标签的逻辑关键字不包括以下哪个值?(C)
A.only B.and
C.or D.not
4.下例哪项不是响应式布局的优点:(C)
A.面对不同分辨率设备灵活性强
B.能够快捷解决多设备显示适应问题
C.兼容各种设备工作量小,效率高
D.响应式设计中能达到多终端视觉和操作体验风格统一
5.如果想让内容在所有尺寸的屏幕上友好地显示,那就绝对有必要为移动设备优化字体。我们可以使用不用单位的标准来实现这个目标,有四种可选的字体单位分别是px、百分比、em和rem,其中是_____提供弹性字体大小的单位(D)?
A.px B.百分比
C.em D.rem