在Html页面开发中，我们通常会用Style进行控件的宽度高度进行控件的格式设置，如果直接设置像素的话，无法根据用户的浏览器进行宽高的适配，所以我们要做到根据实际使用的浏览器进行控件大小的自动调整，以下是几种控件自动调整的方式：

        1. 使用相对单位

2. 使用媒体查询

        CSS媒体查询可以根据不同的屏幕尺寸应用不同的样式。你可以定义不同的样式规则，以适应各种设备。

3. 使用Flexbox布局

        Flexbox布局可以使容器及其子元素根据屏幕尺寸自动调整大小和排列。

4. 使用CSS Grid布局

        CSS Grid布局可以更精确地控制布局，适用于复杂的设计需求。

5.示例代码

综合以上方法，这里是一个完整示例代码，展示如何根据浏览器分辨率调整表格的大小和布局：

                             
         
第一天
         
             
                 
                     
时间段
                     
活动内容
                     
摸鱼方式
                 
             
             
                 
                     
9:00 - 10:00
                     
检查邮件
                     
浏览社交媒体
                 
                 
                     
10:00 - 11:00
                     
参加会议
                     
偷偷看视频
                 
                              
         
     
   

总结

• 相对单位：使用 width: 100% 或 flex: 1 让控件根据容器自动调整大小。
• 媒体查询：针对不同的屏幕宽度调整控件的样式。
• Flexbox 和 Grid布局：用于更复杂的布局需求和响应式设计。
• 这些方法可以帮助你根据用户的浏览器分辨率调整控件的大小，从而提高用户体验。