通常大家使用的是响应式设计（也叫弹性布局）。简单来说，响应式设计是一种针对不同终端设备（如手机、平板、电脑）进行设计的一种网页布局方式，目标是让网页在不同设备上均保持美观舒适的阅览体验。而通过媒体查询（media query）、flexbox(CSS3 弹性盒布局)、百分比与 em/rem 等 CSS 技术结合，大家可以很好地应对平板设备的适配问题。
/* 设置针对不同屏幕的 font-size */
html{
font-size: 62.5%;
}
@media screen and (min-width: 767px){
html{
font-size: 75%; /* iPad Mini */
}
}
@media screen and (min-width: 1025px){
html{
font-size: 87.5%; /* iPad Pro */
}
}
/* 使用 Flexbox 实现简单布局 */
.container{
display: flex;
flex-direction: column;
}
.item{
flex: 1;
}
/* 使用百分比设置图片的大小 */
img{
width: 100%;
height: auto;
}
/* 使用 em 或 rem 适配字体 */
.title{
font-size: 2.4rem;
line-height: 1.4em;
}通过上面的代码，大家可以实现针对不同平板设备的适配方案。在第一段代码中，大家使用了媒体查询，设置不同屏幕宽度下的 font-size。这里推荐使用 rem 作为 font-size 的单位（1 rem 等于根元素的 font-size）。同时，在第二段代码中，大家使用 Flexbox 实现了一个简单的布局，其中 container 元素使用 column 方向排列其子元素，而每个子元素使用 item 类选择器，并设置了 flex 属性为 1，使其在容器中等比例分配空间。在最后一段，大家将字体大小设置为 em 或 rem ，以适应不同设备的字体大小要求。同时，使用百分比为图片大小进行适配，这可以保证图片在不同设备下的显示效果不会失真。
综上所述，通过使用媒体查询、Flexbox、百分比和 em/rem 单位等多种 CSS 技术，大家可以轻松实现针对不同平板设备的适配方案。这使得网页在不同设备下保持良好的显示效果，增强了用户体验，也扩大了网页的受众。