如何仅用CSS或JS实现PlayStation 3网页多分辨率自适应

你现有代码的排版错乱主要来自固定像素的播放器尺寸、用换行标签控间距、CSS语法错误三个问题，按以下步骤修改即可适配不同分辨率：

• 修复基础语法错误：删除body标签上不存在的changeScreenSize()绑定，修正CSS中拼写错误的marginbottom为margin-bottom，删掉CSS末尾多余的闭合花括号。
• 替换固定换行占位：删除十多个<br>标签，改用CSS的padding-top百分比控制播放器和顶部的间距，适配不同屏幕高度。
• 调整背景图适配规则：将背景图尺寸设置改为cover，加上顶部居中对齐的配置，避免小屏下背景图显示不全、偏移。
• 动态计算播放器尺寸：通过JS读取当前屏幕宽度，按你原有1080p下的宽高比例动态计算播放器的宽高，不再写死固定像素值。

修改后完整代码如下：

<html>
   <head>
      <title>PlayStation® Radio</title>
   </head>
   <script>
      // 动态计算适配当前分辨率的播放器尺寸
      var availableWidth = screen.width * 0.84; // 匹配左右各8%的边距，剩余84%宽度给播放器
      var videoPlayerHeight = Math.round(availableWidth * 0.61); // 1080p下宽高比1080:660≈0.61
      var audioPlayerHeight = Math.round(availableWidth * 0.032); // 1080p下宽高比1080:35≈0.032
      window.resizeTo(screen.width,screen.height)
   </script>
   <body>
      <style>
         body { 
            background-color:#000000;
            color:white;
            background-image:url("http://raw.githubusercontent.com/LuanTeles/PS3-4K-Pro/main/Web_Pages/media/radio.png");
            background-size: cover; 
            background-position: top center;
            background-repeat: no-repeat;
            background-attachment: scroll;
            margin: 3% 8% 8% 8%;
            padding-top: 15%; /* 可自行调整数值匹配你需要的顶部间距 */
         }
      </style>
      <script type="text/javascript" src="http://github.com/LuanTeles/PS3-4K-Pro/raw/main/Web_Pages/script/flash_objects.js"></script>
      <div id="player_936" align="center">
         <script type="text/javascript">
            var flashvars_936 = {};
            var params_936 = {
                quality: "low",
                wmode: "transparent",
                bgcolor: "#ffffff",
                allowScriptAccess: "always",
                allowFullScreen: "true",
                flashvars: "fichier=http://github.com/LuanTeles/ScreenSavers/releases/download/Winamp/Winamp_Visualization.mp4&auto_play=true&apercu=http://raw.githubusercontent.com/LuanTeles/PS3-4K-Pro/main/Web_Pages/media/visualizer_preview.png"
            };
            var attributes_936 = {};
            flashObject("http://github.com/LuanTeles/PS3-4K-Pro/raw/main/Web_Pages/swf/video_player/video_player_28.swf", "player_936", availableWidth, videoPlayerHeight, "8", false, flashvars_936, params_936, attributes_936);
         </script>
      </div>
      <div id="player_9428" align="center">
         <script type="text/javascript">
            var flashvars_9428 = {};
            var params_9428 = {
                quality: "low",
                wmode: "transparent",
                bgcolor: "#ffffff",
                allowScriptAccess: "always",
                allowFullScreen: "true",
                flashvars: "url=http://relay.181.fm:8128&autostart=yes"
            };
            var attributes_9428 = {};
            flashObject("http://github.com/LuanTeles/PS3-4K-Pro/raw/main/Web_Pages/swf/music_player/music_player_6.swf", "player_9428", availableWidth, audioPlayerHeight, "8", false, flashvars_9428, params_9428, attributes_9428);
         </script>
      </div>
   </body>
</html>

如果觉得顶部间距或者播放器比例不合适，直接调整CSS里padding-top的百分比、JS里0.61和0.032的比例数值即可。

内容的提问来源于stack exchange，提问作者Luan Teles