移动问题,修改引导类或错误的媒体查询
Posted
技术标签:
【中文标题】移动问题,修改引导类或错误的媒体查询【英文标题】:Mobile issue , Modify Bootstrap classes or wrong media query 【发布时间】:2019-07-09 21:45:05 【问题描述】:如您所见,我的媒体查询变得一团糟。我正在用项目符号创建这个时间线,发现自己写了太多媒体查询,试图让项目符号与时间线对齐
我非常相信我在某个地方犯了错误。在非媒体查询的 css 部分中,可能在位置绝对区域中。我只是无法确定对齐方式。我的要求不是任何特定的屏幕尺寸,因此,我必须使其在所有屏幕尺寸上都能发挥最佳效果,我正在通过使浏览器宽度越来越小来进行测试。有对此的引导解决方案吗?我是否以错误的方式编写媒体查询?
html
font-size: 18px;
@media (min-width: 576px)
.container
max-width: 540px;
@media (min-width: 768px)
.container
max-width: 720px;
@media (min-width: 992px)
.container
max-width: 960px;
@media (min-width: 1200px)
.container
max-width: 1400px;
h1, .h1
font-size: 3.815rem;
h2, .h2
font-size: 2.441rem;
h3, .h3
font-size: 1.563rem;
h4, .h4
font-size: 1.25rem;
.project-methodology-wrap
padding: 5rem 0;
/*========== Media queries ==========*/
.project-methodology-wrap .methodologyBullet::before
content: '';
width: 25px;
height: 25px;
background: #d4272e;
position: absolute;
border-radius: 30px;
left: 26px;
top: 0px;
opacity: 0;
.project-methodology-wrap .methodologyBullet::after
content: '';
width: 12px;
height: 12px;
background: #d4272e;
position: absolute;
border-radius: 30px;
left: 33px;
top: 2px;
.project-methodology-wrap .project-methodology-list.active .methodologyBullet
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
.project-methodology-wrap .project-methodology-list.active .methodologyBullet::before
opacity: 1;
transition-duration: 0.5s;
left: 26px;
.project-methodology-wrap .project-methodology-list.active .methodologyBullet::after
border: 5px solid #fff;
width: 21px;
height: 21px;
left: 28px;
.project-methodology-wrap .project-methodology-listCount, .project-methodology-wrap .methodologyBullet
position: absolute;
left: 0;
.project-methodology-wrap .project-methodology-leftContent
position: -webkit-sticky;
position: sticky;
top: 0;
.project-methodology-wrap .project-methodology-rightContent
position: relative;
overflow: hidden;
.project-methodology-wrap .project-methodology-rightContent:before
content: "";
height: 100%;
width: 8px;
position: absolute;
background-color: #f1f2f6;
left: 5.2%;
.project-methodology-wrap .project-methodology-rightContent .project-methodology-list
position: relative;
-webkit-perspective: 1000px;
perspective: 1000px;
padding-left: 80px;
margin-bottom: 3rem;
.project-methodology-wrap .project-methodology-rightContent .project-methodology-list .project-methodology-listContent
opacity: 0.2;
transition-duration: 0.4s;
-webkit-transform: none;
transform: none;
.project-methodology-wrap .project-methodology-rightContent .project-methodology-list.active .project-methodology-listContent
opacity: 1;
@media only screen and (min-width: 1201px) and (max-width: 1280px)
.project-methodology-wrap .methodologyBullet
left: 0;
@media only screen and (min-width: 1024px) and (max-width: 1200px)
.project-methodology-wrap .methodologyBullet
left: -1.4%;
@media only screen and (min-width: 800px) and (max-width: 899px)
.project-methodology-wrap .methodologyBullet
left: 1.4%;
@media only screen and (min-width: 768px) and (max-width: 799px)
.project-methodology-wrap .methodologyBullet
left: -4.2%;
@media only screen and (max-width: 736px)
.project-methodology-wrap .methodologyBullet
left: -0.2%;
@media only screen and (max-width: 640px)
.project-methodology-wrap .methodologyBullet
left: -0.2%;
@media only screen and (max-width: 600px)
.project-methodology-wrap .methodologyBullet
left: -0.4%;
@media only screen and (max-width: 570px)
.project-methodology-wrap .methodologyBullet
left: 0%;
@media only screen and (max-width: 533px)
.project-methodology-wrap .methodologyBullet
left: -0.5%;
@media only screen and (max-width: 480px)
.project-methodology-wrap .methodologyBullet
left: -1.3%;
@media only screen and (max-width: 414px)
.project-methodology-wrap .methodologyBullet
left: -2.5%;
@media only screen and (max-width: 384px)
.project-methodology-wrap .methodologyBullet
left: -3.4%;
@media only screen and (max-width: 370px)
.project-methodology-wrap .methodologyBullet
left: -4.1%;
@media only screen and (max-width: 320px)
.project-methodology-wrap .methodologyBullet
left: -5.4%;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="./index.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./style/index.css">
</head>
<body>
<section class="project-methodology-wrap">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="project-methodology-leftContent">
<div class="pr-5">
<h2>title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, eum deserunt perferendis asperiores esse temporibus est numquam repellat doloremque suscipit enim quod nisi nam cum ea quam expedita quidem velit.
</p>
</div>
<img class="img-fluid pt-5 pb-5 pr-5" src="https://www.dropbox.com/s/5x8p2z5cvip5u38/chicago.jpg?dl=1">
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="project-methodology-rightContent pt-5">
<div class="project-methodology-list">
<div class="methodologyBullet"> </div>
<div class="project-methodology-listContent">
<h4 class="project-methodology-listCount">1</h4>
<h4>
Title
</h4>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, enim nam! Quisquam aliquid, harum reiciendis deleniti minima natus veniam. Fuga sunt rerum adipisci at et ad repellendus sint velit ducimus.
</p>
</div>
</div>
<div class="project-methodology-list">
<div class="methodologyBullet"> </div>
<div class="project-methodology-listContent">
<h4 class="project-methodology-listCount">2</h4>
<h4>
Title
</h4>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, enim nam! Quisquam aliquid, harum reiciendis deleniti minima natus veniam. Fuga sunt rerum adipisci at et ad repellendus sint velit ducimus.
</p>
</div>
</div>
<div class="project-methodology-list">
<div class="methodologyBullet"> </div>
<div class="project-methodology-listContent">
<h4 class="project-methodology-listCount">3</h4>
<h4>
Title
</h4>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, enim nam! Quisquam aliquid, harum reiciendis deleniti minima natus veniam. Fuga sunt rerum adipisci at et ad repellendus sint velit ducimus.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
我是 CSS 和移动方面的初学者,这是我目前的代码
【问题讨论】:
你可以关注这个link 【参考方案1】:看看这个方法:https://www.bootply.com/KBKYt3w6Z7
基本上,如果您可以调整标记以使 :before 和 :after 位于同一元素上,则您的时间轴不需要所有这些媒体查询,然后您可以将行和红点定位在相同的位置/级别。
在示例中,我已将您的标记更改为使用 ul > li
,并将其更改为时间轴 CSS 位于列表项上。
HTH
【讨论】:
【参考方案2】:用最少的努力,
https://stackblitz.com/edit/js-lvgwcp?file=style.css
我已经删除了所有的 CSS,只得到了我想要的时间线。所以为你的项目添加你需要的任何东西。这是对最小 360px 宽度设备的响应。
我还做了一些html修改,就是我添加了<div class="project-content">
这个div。
无媒体查询。
如有任何澄清意见,请。
同样没有任何用户界面,我将项目符号与时间线分开。如果需要,可以与 css left 属性对齐。
【讨论】:
【参考方案3】:答案很简单,我删除了所有媒体查询并使用 px 而不是 % on
.project-methodology-wrap .project-methodology-rightContent:之前
html
font-size: 18px;
@media (min-width: 576px)
.container
max-width: 540px;
@media (min-width: 768px)
.container
max-width: 720px;
@media (min-width: 992px)
.container
max-width: 960px;
@media (min-width: 1200px)
.container
max-width: 1400px;
h1, .h1
font-size: 3.815rem;
h2, .h2
font-size: 2.441rem;
h3, .h3
font-size: 1.563rem;
h4, .h4
font-size: 1.25rem;
.project-methodology-wrap
padding: 5rem 0;
/*========== Media queries ==========*/
.project-methodology-wrap .methodologyBullet::before
content: '';
width: 25px;
height: 25px;
background: #d4272e;
position: absolute;
border-radius: 30px;
left: 26px;
top: 0px;
opacity: 0;
.project-methodology-wrap .methodologyBullet::after
content: '';
width: 12px;
height: 12px;
background: #d4272e;
position: absolute;
border-radius: 30px;
left: 33px;
top: 2px;
.project-methodology-wrap .project-methodology-list.active .methodologyBullet
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
.project-methodology-wrap .project-methodology-list.active .methodologyBullet::before
opacity: 1;
transition-duration: 0.5s;
left: 26px;
.project-methodology-wrap .project-methodology-list.active .methodologyBullet::after
border: 5px solid #fff;
width: 21px;
height: 21px;
left: 28px;
.project-methodology-wrap .project-methodology-listCount, .project-methodology-wrap .methodologyBullet
position: absolute;
left: 0;
.project-methodology-wrap .project-methodology-leftContent
position: -webkit-sticky;
position: sticky;
top: 0;
.project-methodology-wrap .project-methodology-rightContent
position: relative;
overflow: hidden;
.project-methodology-wrap .project-methodology-rightContent:before
content: "";
height: 100%;
width: 8px;
position: absolute;
background-color: #f1f2f6;
left: 35px
.project-methodology-wrap .project-methodology-rightContent .project-methodology-list
position: relative;
-webkit-perspective: 1000px;
perspective: 1000px;
padding-left: 80px;
margin-bottom: 3rem;
.project-methodology-wrap .project-methodology-rightContent .project-methodology-list .project-methodology-listContent
opacity: 0.2;
transition-duration: 0.4s;
-webkit-transform: none;
transform: none;
.project-methodology-wrap .project-methodology-rightContent .project-methodology-list.active .project-methodology-listContent
opacity: 1;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="./index.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./style/index.css">
</head>
<body>
<section class="project-methodology-wrap">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="project-methodology-leftContent">
<div class="pr-5">
<h2>title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, eum deserunt perferendis asperiores esse temporibus est numquam repellat doloremque suscipit enim quod nisi nam cum ea quam expedita quidem velit.
</p>
</div>
<img class="img-fluid pt-5 pb-5 pr-5" src="https://www.dropbox.com/s/5x8p2z5cvip5u38/chicago.jpg?dl=1">
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="project-methodology-rightContent pt-5">
<div class="project-methodology-list">
<div class="methodologyBullet"> </div>
<div class="project-methodology-listContent">
<h4 class="project-methodology-listCount">1</h4>
<h4>
Title
</h4>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, enim nam! Quisquam aliquid, harum reiciendis deleniti minima natus veniam. Fuga sunt rerum adipisci at et ad repellendus sint velit ducimus.
</p>
</div>
</div>
<div class="project-methodology-list">
<div class="methodologyBullet"> </div>
<div class="project-methodology-listContent">
<h4 class="project-methodology-listCount">2</h4>
<h4>
Title
</h4>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, enim nam! Quisquam aliquid, harum reiciendis deleniti minima natus veniam. Fuga sunt rerum adipisci at et ad repellendus sint velit ducimus.
</p>
</div>
</div>
<div class="project-methodology-list">
<div class="methodologyBullet"> </div>
<div class="project-methodology-listContent">
<h4 class="project-methodology-listCount">3</h4>
<h4>
Title
</h4>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, enim nam! Quisquam aliquid, harum reiciendis deleniti minima natus veniam. Fuga sunt rerum adipisci at et ad repellendus sint velit ducimus.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
【讨论】:
以上是关于移动问题,修改引导类或错误的媒体查询的主要内容,如果未能解决你的问题,请参考以下文章