怎样让大屏幕和电脑显示同一个页面，内容却能有所不同？

在大屏显示下设置不同样式的方法有很多，主要有以下几种：

1. 使用媒体查询：可以使用媒体查询来针对不同的设备设置不同的样式。例如，可以使用以下 CSS 代码来隐藏大屏上的某些元素：

   @media (min-width: 1024px) {
     .element-to-hide {
       display: none;
     }
   }
   

2. 使用 JavaScript：可以使用 JavaScript 来动态地隐藏或显示元素。例如，可以使用以下 JavaScript 代码来隐藏大屏上的某些元素：

   document.querySelector('.element-to-hide').style.display = 'none';
   

3. 使用 CSS 变量：CSS 变量可以用来存储可动态更改的样式值。可以使用 JavaScript 来改变 CSS 变量的值，从而动态地更改元素的样式。例如，可以使用以下 JavaScript 代码来改变大屏上元素的背景颜色：

   document.documentElement.style.setProperty('--background-color', 'red');
   

4. 使用框架：可以使用框架来创建不同的页面布局。例如，可以使用以下 HTML 代码来创建两个不同的页面布局：

   <div id="desktop-layout">
     <h1>Desktop Layout</h1>
     <p>This is the desktop layout.</p>
   </div>
   
   <div id="mobile-layout">
     <h1>Mobile Layout</h1>
     <p>This is the mobile layout.</p>
   </div>
   

   然后，可以使用 JavaScript 来显示或隐藏不同的框架。例如，可以使用以下 JavaScript 代码来在大屏上显示桌面布局，在电脑上显示移动布局：

   if (window.innerWidth > 1024) {
     document.getElementById('desktop-layout').style.display = 'block';
     document.getElementById('mobile-layout').style.display = 'none';
   } else {
     document.getElementById('desktop-layout').style.display = 'none';
     document.getElementById('mobile-layout').style.display = 'block';
   }
   

以上就是在大屏显示下设置不同样式的方法。希望对大家有所帮助。