如何只更改.ptz-block在手机端的显示样式？

在手机端优化`.ptz-block`元素的样式通常涉及到响应式设计和媒体查询。以下是一些步骤：

1. **设置基础样式**：
首先，确保 `.ptz-block` 具有通用的基础样式，比如宽度、高度、内边距等。例如：

   .ptz-block {
     display: block; /* 根据需要选择盒模型 */
     width: 100%; /* 或者适配屏幕宽度 */
     padding: 1rem;
   }

2. **媒体查询**：
使用CSS的 `@media` 规则针对不同的视口尺寸调整样式。对于手机端，你可以设定当视口宽度小于某个值时应用新的样式。比如：

   @media (max-width: 768px) { /* 可以为适应主流手机屏幕 */
     .ptz-block {
       /* 手机特定的样式，如字体大小减小、布局调整等 */
       font-size: 0.9em;
       display: flex; /* 如果原本不是响应式的，可以考虑改为弹性盒子 */
       flex-direction: column; /* 如果需要垂直排列内容 */
     }
   }

3. **移动端专属性CSS类**：
另外，可以创建一个针对移动设备的特定类，如 `.ptz-block-mobile` ，然后仅在这个类上应用特定样式。

4. **使用CSS框架**：
如果你在使用Bootstrap或其他CSS框架，它们通常提供专门针对手机端的类或工具，可以利用这些来简化响应式设计。

记得测试你的更改以确保在各种设备和浏览器上都能正常工作。同时，保持良好的可维护性和可读性是很重要的。