Question

我正在尝试在网站的“关于”页面上进行媒体查询，但似乎有问题。在原始CSS中，我将“信息”分为2列和左，右填充，因此窗口不会一直流到屏幕上。但是，在进行媒体查询时，填充和网格保持不变，这给了我网站不必要的右侧额外空间。我想知道我该如何改变？

我曾尝试在媒体查询中更改这些属性，但它似乎丝毫不影响网站。我试过了：网格模板列：repeat（1,1fr） padding-right：0px;

        <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Portfolio</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
    <link rel="stylesheet" href="https://unpkg.com/@blaze/css@3.2.0/dist/blaze.css">
    <link href="https://fonts.googleapis.com/css?family=Didact+Gothic" rel="stylesheet">
    <script src="https://unpkg.com/@blaze/atoms@6.1.0/dist/blaze-atoms.js"></script>
    <script src="javascript/main.js"></script>
    <script src="javascript/jquery.js"></script>
</head>
<body>
        <div class="cotainer">
                <div class="title">
                    About Me!
                </div>
                <div class="information">
                        <div class="span-row-2">
                                <img src="images/profile.svg" id="logo">
                        </div>
                        <div class="tabs">
                                <input type="radio" name="tabs" id="tabone" checked="checked">
                                <label for="tabone">Education</label>
                                <div class="tab">
                                  <h1 class="phrase">San Jose State University</h1>
                                  <blaze-divider class="divider">Major</blaze-divider>
                                  <div class="major">Digital Media Art</div>
                                </div>

                                <input type="radio" name="tabs" id="tabtwo">
                                <label for="tabtwo">Contacts</label>
                                <div class="tab">
                                  <h1 class="phrase">Stay in touch!</h1>
                                  <blaze-divider class="divider">Get Connected</blaze-divider>
                                  <div class="socials">
                                      <a href="https://www.facebook.com/thanh.truong.3597" class="icons" target="_blank">Facebook</a>
                                      <a href="https://www.instagram.com/thanh_be_like/" class="icons" target="_blank">Instagram</a>
                                      <a href="https://www.linkedin.com/in/thanh-truong-918509163/" class="icons" target="_blank">Linkedin</a>
                                      <a href="creative_resume.pdf" class="icons" target="_blank">Resume</a>
                                  </div>
                                </div>
                </div>
            </div>
            <nav id="mainnav" class="group">
                <div id="menu">&#x2261; Menu</div>
                <ul>
                   <li><a href="about.html" class="active">About</a></li>
                   <li><a href="index.html">Home</a></li>
                   <li><a href="portfolio.html">Portfolio</a></li>
                </ul>
            </nav>
            <script>
                    $(document).ready(function() {

           // JQUERY NAV TOGGLE
           $('#menu').bind('click',function(event){
               $('#mainnav ul').slideToggle();
           });

           $(window).resize(function(){  
               var w = $(window).width();  
               if(w > 768) {  
                   $('#mainnav ul').removeAttr('style');  
               }  
           });

         });
            </script>

</body>
</html>




  information {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-right: 50px;
    background:#323526;
    padding-bottom: 50%;
}
.span-row-2{
    grid-row: span 2 / auto;
    align-items: center;
    margin:10vw;
}
.tabs {
    display: flex;
    flex-wrap: wrap;
}
.tabs label {
    order: 1; 
    display: block;
    padding: 1rem 3rem;
    margin-top:70px;
    cursor: pointer;
    transition: background ease 0.2s;
    width:50%;
    text-align: center;
    border-bottom: 1px solid #C28710;
    color: #C28710;
    font-size: 1.5vw;
    letter-spacing: 2px;
}
.tabs .tab {
    order: 99; 
    flex-grow: 1;
    width: 100%;
    display: none;
    padding: 1rem;
}
.tab{
    border-radius: 0px 0px 20px 20px;
    background-color: rgba(0, 0, 0, 0.2);
}
.tabs input[type="radio"] {
    display: none;
}
.tabs input[type="radio"]:checked + label {
    border-bottom: 4px solid #C28710;
    font-weight: bold;
}
.tabs input[type="radio"]:checked + label + .tab {
    display: block;
}

@media (max-width: 45em) {
  .tabs label,
  .tab .tabs {
    order: initial;
  }
  .tabs label {
    width: 100%;
    margin-right: 0;
    margin-top: 2rem;
  }
}

@media all and (max-width:650px){
    .span-row-2{
        grid-row: span 2 / auto;
        align-items: center;
        margin:40px;
        min-width:250px;
        min-height: 250px;
        grid-area: main;
    }
    .tabs label {
        order: 1; 
        display: block;
        margin-top:20px;
        cursor: pointer;
        transition: background ease 0.2s;
        width:50%;
        text-align: center;
        border-bottom: 1px solid #C28710;
        color: #C28710;
        font-size: 15px;
        letter-spacing: 2px;
    }
    .information{
        grid-template-columns:repeat(1,1fr);
        padding-right:0px;
    }
}

What I got Desired affect

Answer 1

It's unclear to me what your desired outcome is here, but one thing I noticed is there seems to be some conflict between your two media queries.

The rules under the max-width:45em media query are overridden by those under max-width:650px

Hope that helps? ¯\_(ツ)_/¯

媒体查询调整不正确

1 个答案: