个人中心
gpt4 book ai didi

html - 媒体查询未正确调整

转载 作者：行者123 更新时间：2023-11-28 00:05:40 26 4
gpt4 key购买 nike

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

我已经尝试在媒体查询中更改这些属性，但它似乎根本不会影响网站。我试过了:网格模板列:重复(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

最佳答案

我不清楚您想要的结果是什么，但我注意到一件事是您的两个媒体查询之间似乎存在一些冲突。

max-width:45em 媒体查询下的规则被 max-width:650px 下的规则覆盖

希望对您有所帮助？¯\_(ツ)_/¯

关于html - 媒体查询未正确调整，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55716962/

26 4 0
文章推荐： javascript - jQuery:如何制作预定义的颜色选择器？
文章推荐： html - 如何使文本可环绕跟随的 float 元素？
文章推荐： c++ - 对 C++ 中的二维数组感到困惑
文章推荐： html - 在 XSLT 中标记或修改子节点
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com