以下是一些关于HTML5和CSS3的面试题整理：

HTML5部分：

1. HTML5有哪些新特性？

   • 语义化标签，如<header>, <nav>, <section>等，提高了代码的可读性和搜索引擎优化。
   • 视频和音频支持，通过<video>和<audio>标签嵌入媒体内容。
   • 本地存储功能，包括localStorage和sessionStorage。
   • Canvas绘图API，允许通过JavaScript在网页上绘制图形。
   • 表单增强，提供了更多输入类型和属性，如日期、时间、电子邮件等。

2. HTML5如何处理新标签的浏览器兼容问题？

   • 可以使用JavaScript库（如html5shim）来使旧版浏览器支持HTML5新标签。

3. 如何区分HTML和HTML5？

   • 主要通过DOCTYPE声明和新增的结构元素、功能元素来区分。

CSS3部分：

1. CSS3有哪些新特性？

   • 圆角边框（border-radius）。
   • 阴影效果（box-shadow和text-shadow）。
   • 渐变效果（linear-gradient和radial-gradient）。
   • 过渡效果（transition）。
   • 动画效果（animation）。
   • 多背景支持。
   • 更多的CSS选择器。

2. CSS3中的媒体查询是什么？有什么用？

   • 媒体查询允许根据设备的特定特性（如设备的宽度、高度和分辨率等）来应用不同的CSS样式。这对于实现响应式设计非常有用，可以使网站在不同设备上都有良好的显示效果。

3. CSS3中的transform属性可以实现哪些效果？

   • transform属性允许你对元素进行旋转（rotate）、缩放（scale）、倾斜（skew）和移动（translate）等操作。

这些面试题涵盖了HTML5和CSS3的主要特性和应用，希望对你的面试准备有所帮助。

在CSS3响应式布局中适配不同设备，可以遵循以下最佳实践：

1. 使用媒体查询：媒体查询是CSS3中新增的功能，允许我们根据不同的设备特征，如屏幕宽度、高度、设备类型等条件来定义不同的样式规则。通过媒体查询，我们可以为不同的屏幕尺寸和设备类型应用不同的CSS样式，从而实现网页在不同设备上的适应性。例如，使用@media screen and (max-width: 600px)来表示当屏幕宽度小于等于600像素时的样式规则。
2. 采用流式布局：流式布局是一种灵活的网页布局方式，它使用百分比单位或者弹性盒模型(Flexbox)等特性，使网页的元素能够根据屏幕的大小自适应调整。通过流式布局，我们可以确保网页在不同设备的屏幕大小上都能保持良好的显示效果。
3. 实现图片自适应：在移动设备上，为了避免因加载大尺寸图片而导致的页面加载缓慢问题，我们可以使用CSS技术对图片进行自适应处理。通过设置max-width: 100%属性，可以将图片的最大宽度设置为容器的宽度，从而保证图片在不超出容器范围的情况下进行自适应缩放。
4. 调整字体和排版：为了保证文字在不同设备上的可读性，我们可以使用CSS的@media规则来定义不同的字体大小和行距等样式。这样，无论是在大屏幕还是小屏幕上，用户都能获得良好的阅读体验。

综上所述，通过媒体查询、流式布局、图片自适应以及字体和排版的调整等最佳实践，我们可以有效地实现CSS3响应式布局中不同设备的适配，从而为用户提供更好的浏览体验。