pc端html如何实现适配屏幕

要让 PC 端的 HTML 页面适配屏幕，可以通过以下几种方法：

1. 使用 viewport 标签：在 HTML 文档的 head 标签中添加以下代码即可。

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

这个标签的作用是告诉浏览器如何缩放页面，其中 width=device-width 表示页面宽度要与设备宽度相同，initial-scale=1.0 表示初始缩放比例为 1。

2. 使用 CSS 媒体查询：可以根据不同的屏幕尺寸设置不同的样式。例如：

   @media screen and (max-width: 768px) {
     /* 小于等于 768px 时的样式 */
     body {
       font-size: 16px;
     }
   }
   
   @media screen and (min-width: 769px) {
     /* 大于 768px 时的样式 */
     body {
       font-size: 20px;
     }
   }

这段代码的意思是：当屏幕宽度小于等于 768px 时，body 的字体大小为 16px；当屏幕宽度大于 768px 时，body 的字体大小为 20px。

3. 使用响应式框架：例如 Bootstrap、Foundation 等框架，它们都提供了许多适用于不同屏幕尺寸的 CSS 类和组件，可以快速实现页面的适配。