我遇到了mediaquery的问题。我尝试用chrome开发工具在不同的设备上进行设计。但是却找不到任何帮助来解决这个问题。
document.addEventListener( 'DOMContentLoaded', function () {
new Splide( '#secondary-slider', {
type : 'loop',
perPage : 1,
autoplay : true,
pauseOnHover: true,
interval : 4000
} ).mount();
} );.header{
position: relative;
margin: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.header-text{
text-align: center;
font-family: monospace;
font-size: 22px;
}
.header .img{
float: left;
margin-left: 10px;
}
.header .contact-us{
float: right;
}
.fa-2x{
font-size: 24px;
color: black;
}
.container{
width: 100%;
padding: 0px;
}
.splide__slide img {
width : 100%;
height: auto;
object-fit: cover;
}
#secondary-slider{
display: flex;
width:100%;
height:100%;
}
.header .submit{
float: right;
}
.contact-us .email{
margin-right: 20px;
}
@media only screen and (max-width: 600px){
body {background: red;}
.splide__slide img {
width : 100%;
height: 100%;
}
.header-text{
text-align: center;
font-family: monospace;
font-size: 22px;
margin-top: 10px;
}
i{
vertical-align: middle;
}
.contact-us .email{
margin-right: 2px;
}
}<html>
<head>
<title>
Akhil Dali
</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css"/>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="header">
<a class="img" href="https://instagram.com/show_house_full" target="_blank"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i></a>
<h2 class="header-text">Show House Full</h2>
<div class="contact-us">
<a class="email" href="mailto:ashishpise111@gmail.com"><i class="fa fa-envelope-o fa-2x" aria-hidden="true"></i></a>
<a class="whatsapp" href="tel:7666149649"><i class="fa fa-whatsapp fa-2x" aria-hidden="true"></i></a>
</div>
</div>
</nav>
<div id="secondary-slider" class="splide">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg">
</li>
<li class="splide__slide">
<img src="https://static.toiimg.com/thumb/msid-24183773,width-1070,height-580,resizemode-75,imgsize-24183773,pt-32,y_pad-40/24183773.jpg">
</li>
<li class="splide__slide">
<img src="https://i.pinimg.com/originals/ca/76/0b/ca760b70976b52578da88e06973af542.jpg">
</li>
</ul>
</div>
</div>
</body>
<script>
</script>
</html>我只是想要适当的mediaquery和mediaquery的解释，这将有助于我了解如何应对，如果我遇到类似的问题。
您可以这样使用媒体查询:
CSS
@media screen and (max-width: 860px) {
#header {font-size: 20px;} /* random rules */
}
HTML把它放到你的文档中。
<meta name="viewport" content="width=device-width" />
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries