pad端如何使用media only screen

<p>@media只有屏幕是用于响应式设计的CSS技术。它允许您在不同的屏幕尺寸和设备上为网站应用不同的样式。</p>
<p>以下是使用@media only screen在pad端上应用CSS样式的基本步骤：</p>
<ol>
<li>在CSS文件中添加@media only screen规则：</li>
</ol>
<p>@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* CSS规则将只适用于pad端 */
}</p>
<ol start="2">
<li>在规则中添加您想要应用的CSS样式：</li>
</ol>
<p>@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
body {
font-size: 16px;
}
}</p>
<ol start="3">
<li>在HTML文档中将CSS文件链接到<head>标记中：</li>
</ol>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<ol start="4">
<li>确保在pad端上正确地应用了样式，可以使用浏览器开发工具检查元素。</li>
</ol>