如何根据浏览器大小切换 CSS 样式表（更改网站的外观）[重复]

Posted 2023-03-06

技术标签:

【中文标题】如何根据浏览器大小切换 CSS 样式表（更改网站的外观）[重复]【英文标题】：How to switch CSS stylesheets (change what the website looks like) based off of browser size [duplicate] 【发布时间】：2020-09-09 20:11:47 【问题描述】：

我正在尝试创建我的网站的两个版本。一个用于手机或计算机上较小的浏览窗口，一个用于大浏览窗口。我正在尝试根据 Web 浏览器的大小将我的 html 设置为两个不同的样式表。我不完全确定如何做到这一点。我在代码中的尝试很弱，但这仅与总屏幕尺寸有关，并没有真正起作用。我是编程新手，如果你们能提供帮助，将不胜感激。

// Navigation Bar Underline
$("a").click(function()
    $("a.active-menu").removeClass("active-menu");
    $(this).addClass("active-menu");
 );

@font-face 
  font-family: 'playfair_displayregular';
  src: url('Fonts/Playfair Display/playfairdisplay-variablefont_wght-webfont.woff2') format('woff2'),
       url('Fonts/Playfair Display/playfairdisplay-variablefont_wght-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

@font-face 
  font-family: 'futuralight';
  src: url('Fonts/Futura Light/futura_light_regular-webfont.woff2') format('woff2'),
       url('Fonts/Futura Light/futura_light_regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;


*
    margin:0;
    padding:0;
    border:0;



.topnav 
    background-color: rgb(84,104,217);
    overflow: hidden;
  
  
  .topnav a 
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    position: relative;
  

  .topnav a:before 
    content: "";
    position: absolute;
    width: 84%;
    height: 2px;
    bottom: 3px;
    left: 8%;
    background-color: white;
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.3s ease-in-out 0s;
  

 .topnav a:hover:before 
    visibility: visible;
    transform: scaleX(1);
  
.topnav a.active-menu:before 
    content: "";
    position: absolute;
    width: 84%;
    height: 2px;
    bottom:3px;
    left: 8%;
    background-color: white;
    visibility: visible;
    transform: scaleX(1);
    transition: all 0.3s ease-in-out 0s; 
    
  .leftimage
    width:70%;
    position:absolute;left:0%;
    object-fit: cover;
    width: 69vw;
    height: 100vh;
    height: 400px;
    min-width:560px;
  
  .bio
    background-color: rgb(84,104,217);
    position:absolute;right:0%;
    text-align: center;
    width:26%;
    height: 550px;
    top: 47px;
    color: white;
    font-family: 'playfair_displayregular';
    min-width:240px;
    
  
  .rndface
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 155px;
    margin-top:40px;
    margin-bottom:10px;
  
.topname
  padding-top:18px;
  padding-bottom:0px;
  margin-bottom:0px;
  border-bottom:0px;
  white-space: nowrap;

.school
  padding-bottom:12px;
  padding-top:34px;
  font-size:17px;
  font-family: 'futuralight';

.interests
  padding-bottom:12px;
  font-family: 'futuralight';
  font-size:17px;

.location
  padding-bottom:38px;
  font-family: 'futuralight';
  font-size:17px;

.mail
  padding-bottom:12px;
  font-family: 'futuralight';
  font-size:17px;

.num
  padding-bottom:24px;
  font-family: 'futuralight';
  font-size:17px;


.fa 
  padding-left:10px;
  padding-right:10px;
  padding-top:12px;
  padding-bottom:12px;
  font-size: 30px;
  text-align: center;
  text-decoration: none;

.fa:hover 
  opacity: 0.7;

.fa-instagram 
  color: white;

.fa-linkedin 
  color: white;

.section1
  position: relative;
  text-align: center;
  color:white;

.HelloIm 
  position: absolute;
  top: 160px;
  left: 4%;
  font-size: 40px;

.romf 
  position: absolute;
  top: 200px;
  left: 4%;
  font-size: 65px;

.aboutfront
  background-color: lightblue;
  position:relative; 
  top:600px;
  height: 300px;

.abt
  position:relative; 
  top:48px;
  left: 6%;
  font-size: 28px;
  font-style: italic;

.myback
  position:relative; 
  top:60px;
  left: 6%;
  font-size: 18px;

.abtme
  position: absolute; 
  top:140px;
  left: 6%;
  right:6%;
  font-size: 18px;
  word-wrap: break-word;

.footer
  position:relative;
  background-color:black;
  height:30px;
  top:300px;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <script src="jquery-3.5.1.min.js"></script>
  <script src='script.js'></script>
  <link rel="stylesheet" type="text/css" media="only screen and (min-width: 1036px)" href="style.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>
    dkin
  </title>
</head>

<body>
  <header class="topnav" id="topnav">
    <a class="active-menu" href="index.html">Home</a>
    <a class="link" href="#news">DontUse</a>
    <a class="link" href="#contact">DontUse</a>
    <a class="link" href="about.html">About</a>
  </header>
  <div class='section1'>
    <img class= 'leftimage' src="https://www.topuniversities.com/sites/default/files/styles/lead_article_image/public/blogs/lead-images/engineering_imagery.jpg" >
    <div class='HelloIm'>Hello, I'm</div>>
    <div class='romf'>Rsdfadkin.</div>>
  </div>
  <div class='bio'>
      <img class = 'rndface' src="rndface.png" >
      <p class='topname'>
        <h1>Rdkin.</h1>
      </p>
      <p class='school'>
        Negh School
      </p>
      <p class='interests'>
        EnginScience
      </p>
      <p class='location'>
        Chicaois
      </p>
      <p class='mail'>
        framail.com
      </p>
      <p class='num'>
        (845504
      </p>
      <p>
        <a target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/in/rokin-a3a9541a5/" class="fa fa-linkedin"></a>
        <a target="_blank" rel="noopener noreferrer" href="https://www.instagram.com/rdkin/" class="fa fa-instagram"></a>
      </p>
      <p>
    </div>
    <div class='aboutfront'>
          <h2 class='abt'>
            About
          </h2>
          <p class='myback'>
            MY BACKGROUND
          </p>
          <p class='abtme'>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem deserunt, aperiam consequuntur 
            beatae molestias eaque repudiandae nulla error veritatis 
            illo? Deleniti necessitatibus magni, maxime asperiores veniam laborum quisquam placeat. Deleniti?
          </p>
    </div>
    <footer class='footer'>
      <p>
        © 2020 By Rodsfadkin.
      </p>
    </footer>
  </body>
</html>

【问题讨论】：

我相信您正在寻找的是 css 中的媒体查询断点，这允许您使用一个样式表根据屏幕宽度重新定义 css 类。 @plum0 你能帮我解决这个问题吗？你在使用任何构建过程吗？ 【参考方案1】：

您正在寻找的是在样式表中使用媒体查询。 CSS 文件的底部是最大宽度为 600 像素的小屏幕的断点。所有 css 类都可以在查询中重写和格式化。在代码 sn-p 中，我决定将 body 元素设置为具有不同的背景颜色。

// Navigation Bar Underline
$("a").click(function()
    $("a.active-menu").removeClass("active-menu");
    $(this).addClass("active-menu");
 );

@font-face 
  font-family: 'playfair_displayregular';
  src: url('Fonts/Playfair Display/playfairdisplay-variablefont_wght-webfont.woff2') format('woff2'),
       url('Fonts/Playfair Display/playfairdisplay-variablefont_wght-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

@font-face 
  font-family: 'futuralight';
  src: url('Fonts/Futura Light/futura_light_regular-webfont.woff2') format('woff2'),
       url('Fonts/Futura Light/futura_light_regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;


*
    margin:0;
    padding:0;
    border:0;



.topnav 
    background-color: rgb(84,104,217);
    overflow: hidden;
  
  
  .topnav a 
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    position: relative;
  

  .topnav a:before 
    content: "";
    position: absolute;
    width: 84%;
    height: 2px;
    bottom: 3px;
    left: 8%;
    background-color: white;
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.3s ease-in-out 0s;
  

 .topnav a:hover:before 
    visibility: visible;
    transform: scaleX(1);
  
.topnav a.active-menu:before 
    content: "";
    position: absolute;
    width: 84%;
    height: 2px;
    bottom:3px;
    left: 8%;
    background-color: white;
    visibility: visible;
    transform: scaleX(1);
    transition: all 0.3s ease-in-out 0s; 
    
  .leftimage
    width:70%;
    position:absolute;left:0%;
    object-fit: cover;
    width: 69vw;
    height: 100vh;
    height: 400px;
    min-width:560px;
  
  .bio
    background-color: rgb(84,104,217);
    position:absolute;right:0%;
    text-align: center;
    width:26%;
    height: 550px;
    top: 47px;
    color: white;
    font-family: 'playfair_displayregular';
    min-width:240px;
    
  
  .rndface
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 155px;
    margin-top:40px;
    margin-bottom:10px;
  
.topname
  padding-top:18px;
  padding-bottom:0px;
  margin-bottom:0px;
  border-bottom:0px;
  white-space: nowrap;

.school
  padding-bottom:12px;
  padding-top:34px;
  font-size:17px;
  font-family: 'futuralight';

.interests
  padding-bottom:12px;
  font-family: 'futuralight';
  font-size:17px;

.location
  padding-bottom:38px;
  font-family: 'futuralight';
  font-size:17px;

.mail
  padding-bottom:12px;
  font-family: 'futuralight';
  font-size:17px;

.num
  padding-bottom:24px;
  font-family: 'futuralight';
  font-size:17px;


.fa 
  padding-left:10px;
  padding-right:10px;
  padding-top:12px;
  padding-bottom:12px;
  font-size: 30px;
  text-align: center;
  text-decoration: none;

.fa:hover 
  opacity: 0.7;

.fa-instagram 
  color: white;

.fa-linkedin 
  color: white;

.section1
  position: relative;
  text-align: center;
  color:white;

.HelloIm 
  position: absolute;
  top: 160px;
  left: 4%;
  font-size: 40px;

.romf 
  position: absolute;
  top: 200px;
  left: 4%;
  font-size: 65px;

.aboutfront
  background-color: lightblue;
  position:relative; 
  top:600px;
  height: 300px;

.abt
  position:relative; 
  top:48px;
  left: 6%;
  font-size: 28px;
  font-style: italic;

.myback
  position:relative; 
  top:60px;
  left: 6%;
  font-size: 18px;

.abtme
  position: absolute; 
  top:140px;
  left: 6%;
  right:6%;
  font-size: 18px;
  word-wrap: break-word;

.footer
  position:relative;
  background-color:black;
  height:30px;
  top:300px;

@media only screen and (max-width: 600px) 
  body 
    background-color: #FFA07A;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <script src="jquery-3.5.1.min.js"></script>
  <script src='script.js'></script>
  <link rel="stylesheet" type="text/css" media="only screen and (min-width: 1036px)" href="style.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>
    dkin
  </title>
</head>

<body>
  <header class="topnav" id="topnav">
    <a class="active-menu" href="index.html">Home</a>
    <a class="link" href="#news">DontUse</a>
    <a class="link" href="#contact">DontUse</a>
    <a class="link" href="about.html">About</a>
  </header>
  <div class='section1'>
    <img class= 'leftimage' src="https://www.topuniversities.com/sites/default/files/styles/lead_article_image/public/blogs/lead-images/engineering_imagery.jpg" >
    <div class='HelloIm'>Hello, I'm</div>>
    <div class='romf'>Rsdfadkin.</div>>
  </div>
  <div class='bio'>
      <img class = 'rndface' src="rndface.png" >
      <p class='topname'>
        <h1>Rdkin.</h1>
      </p>
      <p class='school'>
        Negh School
      </p>
      <p class='interests'>
        EnginScience
      </p>
      <p class='location'>
        Chicaois
      </p>
      <p class='mail'>
        framail.com
      </p>
      <p class='num'>
        (845504
      </p>
      <p>
        <a target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/in/rokin-a3a9541a5/" class="fa fa-linkedin"></a>
        <a target="_blank" rel="noopener noreferrer" href="https://www.instagram.com/rdkin/" class="fa fa-instagram"></a>
      </p>
      <p>
    </div>
    <div class='aboutfront'>
          <h2 class='abt'>
            About
          </h2>
          <p class='myback'>
            MY BACKGROUND
          </p>
          <p class='abtme'>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem deserunt, aperiam consequuntur 
            beatae molestias eaque repudiandae nulla error veritatis 
            illo? Deleniti necessitatibus magni, maxime asperiores veniam laborum quisquam placeat. Deleniti?
          </p>
    </div>
    <footer class='footer'>
      <p>
        © 2020 By Rodsfadkin.
      </p>
    </footer>
  </body>
</html>

【讨论】：

【参考方案2】：

在同一脚本中使用@media 标签，例如：

使用这个标签才是正确的做法！！

@media only screen and (max-width: 600px) 
   body 
      background-color: lightblue;

如果尺寸小于 600 像素，这将改变页面的主体

如果主 CSS 文件在此链接中

<link rel="stylesheet" type="text/css" media="only screen and (min-width: 1036px)" href="style.css" />

改成这个

<link rel="stylesheet" type="text/css"  href="style.css" />

【讨论】：

澄清一下，你在 CSS 代码中使用了这个？ @rf19 是的，媒体查询应该在您的样式表的 .css 文件中使用。

以上是关于如何根据浏览器大小切换 CSS 样式表（更改网站的外观）[重复]的主要内容，如果未能解决你的问题，请参考以下文章

根据屏幕大小切换 CSS 类

如何在不使用 transform: scale 的情况下更改 CSS 切换开关的大小？

在调整大小时更改页面样式

如何用CSS修改提交按钮样式

如何使用 jQuery 切换我的 CSS 样式表？

由于 MIME 类型而未加载样式表