H5如何设置aria-label在PC端和手机端不同的值，举个例子

在HTML5中，`aria-label` 属性允许开发者为页面上的元素定义一个更易于访问的名称，这个名称可以被屏幕阅读器等辅助技术读出来。如果你想在PC端和手机端设置不同的 `aria-label` 值，你可以利用CSS媒体查询（Media Queries）来根据设备类型应用不同的样式或属性值。

下面是一个简单的例子：

<!-- HTML部分 -->
<div id="example" class="dynamic-aria-label">
    <button aria-label="点击此按钮在PC端查看" role="button">按我</button>
</div>

/* CSS部分 */
/* 默认的样式，适用于PC端 */
.dynamic-aria-label button[aria-label] {
    /* 其他样式 */
}

/* 当屏幕宽度小于768像素时，适用于手机端 */
@media screen and (max-width: 768px) {
    .dynamic-aria-label button[aria-label] {
        /* 使用JavaScript动态改变aria-label */
        aria-label: "点击此按钮在手机端查看";
    }
}

在上面的代码中，我们有一个按钮，它默认有一个 `aria-label` 属性，这个属性值适用于PC端。通过CSS媒体查询，当屏幕宽度小于768像素时（这通常是手机屏幕的宽度范围），我们可以用JavaScript来改变按钮的 `aria-label` 属性值，使其适应手机端用户的需求。

注意，为了动态更改 `aria-label`，我们可能需要使用JavaScript来实时更新属性值，因为CSS无法直接修改HTML属性。例如：

// JavaScript部分
window.addEventListener('DOMContentLoaded', function() {
    var buttons = document.querySelectorAll('.dynamic-aria-label button');
    for (var i = 0; i < buttons.length; i++) {
        buttons[i].setAttribute('aria-label', '点击此按钮在手机端查看');
    }
});