因此，起初分辨率与移动设备宽度完美匹配，但是在更改背景图像后，由于某种奇怪的原因，宽度突然不适合现在的确切设备长度。我尝试将分支重置到分辨率良好的位置，但仍然不起作用。
编辑:
正如您在我的屏幕中看到的，屏幕右侧有一些空白，我正在尝试删除该部分。
这似乎也不是边距或填充问题，因为 html 实体本身不符合设备的宽度
有人可以帮我解决这个问题吗？如果需要，我愿意提供更多信息
这是我的索引文件
{% load static %}
<!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>Sanskar Handicrafts</title>
<link rel="stylesheet" href="{% static 'website/fontawesome-5.5/css/all.min.css' %}" />
<link rel="stylesheet" href="{% static 'website/slick/slick.css' %}">
<link rel="stylesheet" href="{% static 'website/slick/slick-theme.css' %}">
<link rel="stylesheet" href="{% static 'website/magnific-popup/magnific-popup.css' %}">
<link rel="stylesheet" href="{% static 'website/css/bootstrap.min.css' %}" />
<link rel="stylesheet" href="{% static 'website/css/style.css' %}" />
<style>
* {
margin: 0;
padding: 0;
}
#view > a{
color: #FFF;
}
.flex-box{
display: flex;
flex-wrap:wrap;
justify-content: space-around;
padding-top: 40px;
}
.flex-img{
max-width: 500px;
max-height: 400px;
padding: 20px;
}
.flex-text{
padding: 20px;
max-width: 500px;
}
.flex-rev{
flex-direction: row-reverse;
}
</style>
</head>
<body>
<!-- Hero section -->
<section id="infinite" class="text-white tm-font-big tm-parallax">
<!-- Navigation -->
<nav class="navbar navbar-expand-md tm-navbar scroll" id="tmNav">
<div class="tm-next">
<a href="#infinite" class="navbar-brand" style="background: white;color: #369;width: 100%;padding-left: 10px;">
Sanskar Handicrafts</a>
</div>
<div class="container" style="display:grid; padding-left: 0; margin-left: 0;">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars navbar-toggler-icon"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link tm-nav-link" href="#infinite">Home</a>
</li>
<li class="nav-item">
<a class="nav-link tm-nav-link" href="#whatwedo">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link tm-nav-link" href="#gallery">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link tm-nav-link" href="making" id="making">Making</a>
</li>
<li class="nav-item">
<a class="nav-link tm-nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- <div class="tm-next tm-intro-next">
<a href="#whatwedo" class="text-center tm-down-arrow-link">
<i class="fas fa-2x fa-arrow-down tm-down-arrow"></i>
</a>
</div> -->
</section>
<br>
<section id="whatwedo" class="tm-section-pad-top" style="padding-top:50px; padding-bottom: 0px;">
<div class="container">
<div class="row tm-content-box"><!-- first row -->
<div class="col-lg-12 col-xl-12">
<div class="tm-intro-text-container">
<h2 class="tm-text-primary mb-4 tm-section-title">About Us</h2>
<p class="mb-4 tm-intro-text">
Handicrafts of Nepal itself is needless of any introduction. In every corner of Kathmandu valley, you will find masterpieces of crafts and arts. The skill and techniques and excellent craftsmanship have been handed down from generation to generation, which represents the talent and skill of craftsmen and reflects the social, religious, and cultural values found in different parts of the country.</p>
</div>
</div>
<div class="col-lg-12 col-xl-12">
<div class="tm-intro-text-container">
<p class="mb-4 tm-intro-text">
Handicrafts of Nepal, itself is needless of any introduction. In each and every
corner of Kathmandu valley you will find the masterpieces of crafts and arts.
The skill and techniques, the excellent craftsmanship have been handed down
from generation to generation which represents the talent and skill of
craftsmen and also reflects the social, religious and cultural values found in
different parts of the country.
<b>Sanskar Handicrafts</b> is the place where you might find the statues with
excellence craftmanship. <b>Sanskar Handicrafts</b> is a gallery affiliated to <b>Siddhi
Hastakala Udhyog</b>, a renowned name for fine arts and crafts.</p>
</div>
</div>
</div><!-- first row -->
<div class="flex-box">
<div><img src="{% static 'website/img/Gramps.JPG' %}" alt="" class="flex-img"></div>
<div class="flex-text">
<h5>Our respected grandfather</h5>
<p>The legendary artisan, Late Mr. <b>SIDDHI RAJ SHAKYA</b>, needs no introduction. He is a big name, a brand, in the world of arts and crafts. His work and his contribution to art and culture is impeccable.</p>
</div>
</div>
<div class="flex-box flex-rev">
<div><img src="{% static 'website/img/Man1.jpg' %}" alt="" class="flex-img"></div>
<div class="flex-text">
<h5>Senior Sculptor of our firm</h5>
<p>His son, our father, Senior Sculptor of our firm, Siddhi Hastakala Udhyog, Mr. <b>Siddhi Ratna Shakya</b>, well inherited the skill of sculpting, the talent.</p>
</div>
</div>
<div class="flex-box">
<div><img src="{% static 'website/img/Man0.JPG' %}" alt="" class="flex-img"></div>
<div class="flex-text">
<h5>Proprietor of Siddhi Hastakala Udhyog</h5>
<p>The skill, techniques, and talent have been passed down from generation to generation. His grandson, Mr. <b>Sabin Shakya</b>, being the 4th generation to this elite group, proprietor of Siddhi Hastakala Udhyog, has been continuing the family's legacy. </p>
</div>
</div>
</div>
</section>
<section id="testimonials" class="tm-section-pad-top tm-parallax-2" style="background-image: none; display: none;">
</section>
<section id="gallery" class="tm-section-pad-top" style="padding-top: 30px">
<div class="container tm-container-gallery">
<div class="row">
<div class="text-center col-12">
<h2 class="tm-text-primary tm-section-title mb-4">Gallery</h2>
<p class="mx-auto tm-section-desc">
Praesent sed pharetra lorem, blandit convallis mi. Aenean ornare elit ac metus lacinia, sed iaculis nibh semper. Pellentesque est urna, lobortis eu arcu a, aliquet tristique urna.
</p>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="mx-auto tm-gallery-container">
<div class="grid tm-gallery">
{% for image in images %}
<a href="{{image.img.url}}">
<figure class="effect-honey tm-gallery-item">
<img src="{{image.img.url}}" alt="{{image.name}}" class="img-fluid">
</figure>
</a>
{% endfor %}
</div>
</div>
</div>
</div>
<div id='view'>
<a href="gallery"> View All</a>
</div>
</div>
</section>
<!-- Contact -->
<section id="contact" class="tm-section-pad-top tm-parallax-2" style="padding-top:80px">
<div class="container tm-container-contact">
<div class="row">
<div class="text-center col-12">
<h2 class="tm-section-title mb-4">Contact Us</h2>
<p class="mb-5">
Proin enim orci, tincidunt quis suscipit in, placerat nec est. Vestibulum posuere faucibus posuere. Quisque aliquam velit eget leo blandit egestas. Nulla id posuere felis, quis tristique nulla.
</p><br>
</div>
<div class="col-sm-12 col-md-6">
<form action="/submitted" method="POST">{% csrf_token %}
<input id="name" name="name" type="text" placeholder="Your Name" class="tm-input" required />
<input id="email" name="email" type="email" placeholder="Your Email" class="tm-input" required />
<textarea id="message" name="message" rows="8" placeholder="Message" class="tm-input" required></textarea>
<button type="submit" class="btn tm-btn-submit">Submit</button>
</form>
</div>
<div class="col-sm-12 col-md-6">
<div class="contact-item">
<a rel="nofollow" href="mailto:<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fc919d9590bc9f93918c9d9285d29f9391" rel="noreferrer noopener nofollow">[email protected]</a>" class="item-link">
<i class="far fa-2x fa-envelope mr-4"></i>
<span class="mb-0"><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d3beb2babf93b0bcbea3b2bdaafdb0bcbe" rel="noreferrer noopener nofollow">[email protected]</a></span>
</a>
</div>
<div class="contact-item">
<a rel="nofollow" href="https://www.google.com/maps" class="item-link">
<i class="fas fa-2x fa-map-marker-alt mr-4"></i>
<span class="mb-0">Our Location</span>
</a>
</div>
<div class="contact-item">
<a rel="nofollow" href="tel:0100200340" class="item-link">
<i class="fas fa-2x fa-phone-square mr-4"></i>
<span class="mb-0">255-662-5566</span>
</a>
</div>
<div class="contact-item"> </div>
</div>
</div><!-- row ending -->
</div>
<footer class="text-center small tm-footer">
<p class="mb-0">
Copyright © 2021 Company Name
</footer>
</section>
<script src="{% static 'website/js/jquery-1.9.1.min.js' %}"></script>
<script src="{% static 'website/slick/slick.min.js' %}"></script>
<script src="{% static 'website/magnific-popup/jquery.magnific-popup.min.js' %}"></script>
<script src="{% static 'website/js/easing.min.js' %}"></script>
<script src="{% static 'website/js/jquery.singlePageNav.min.js' %}"></script>
<script src="{% static 'website/js/bootstrap.min.js' %}"></script>
<script>
function getOffSet(){
var _offset = 450;
var windowHeight = window.innerHeight;
if(windowHeight > 500) {
_offset = 400;
}
if(windowHeight > 680) {
_offset = 300
}
if(windowHeight > 830) {
_offset = 210;
}
return _offset;
}
function setParallaxPosition($doc, multiplier, $object){
var offset = getOffSet();
var from_top = $doc.scrollTop(),
bg_css = 'center ' +(multiplier * from_top - offset) + 'px';
$object.css({"background-position" : bg_css });
}
// Parallax function
// Adapted based on https://codepen.io/roborich/pen/wpAsm
var background_image_parallax = function($object, multiplier, forceSet){
multiplier = typeof multiplier !== 'undefined' ? multiplier : 0.5;
multiplier = 1 - multiplier;
var $doc = $(document);
// $object.css({"background-attatchment" : "fixed"});
if(forceSet) {
setParallaxPosition($doc, multiplier, $object);
} else {
$(window).scroll(function(){
setParallaxPosition($doc, multiplier, $object);
});
}
};
var background_image_parallax_2 = function($object, multiplier){
multiplier = typeof multiplier !== 'undefined' ? multiplier : 0.5;
multiplier = 1 - multiplier;
var $doc = $(document);
$object.css({"background-attachment" : "fixed"});
$(window).scroll(function(){
if($(window).width() > 768) {
var firstTop = $object.offset().top,
pos = $(window).scrollTop(),
yPos = Math.round((multiplier * (firstTop - pos)) - 186);
var bg_css = 'center ' + yPos + 'px';
$object.css({"background-position" : bg_css });
} else {
$object.css({"background-position" : "center" });
}
});
};
$(function(){
// Hero Section - Background Parallax
background_image_parallax($(".tm-parallax"), 0.30, false);
background_image_parallax_2($("#contact"), 0.80);
background_image_parallax_2($("#testimonials"), 0.80);
// Handle window resize
window.addEventListener('resize', function(){
background_image_parallax($(".tm-parallax"), 0.30, true);
}, true);
// Detect window scroll and update navbar
$(window).scroll(function(e){
if($(document).scrollTop() > 120) {
$('.tm-navbar').addClass("scroll");
}
});
// Close mobile menu after click
$('#tmNav a').on('click', function(){
$('.navbar-collapse').removeClass('show');
})
// Scroll to corresponding section with animation
$('#tmNav').singlePageNav({
'easing': 'easeInOutExpo',
'speed': 600
});
// Add smooth scrolling to all links
// https://www.w3schools.com/howto/howto_css_smooth_scroll.asp
$("a").on('click', function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 600, 'easeInOutExpo', function(){
window.location.hash = hash;
});
} // End if
});
// Pop up
$('.tm-gallery').magnificPopup({
delegate: 'a',
type: 'image',
gallery: { enabled: true }
});
$('.tm-testimonials-carousel').slick({
dots: true,
prevArrow: false,
nextArrow: false,
infinite: false,
slidesToShow: 3,
slidesToScroll: 1,
responsive: [
{
breakpoint: 992,
settings: {
slidesToShow: 2
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1
}
}
]
});
// Gallery
$('.tm-gallery').slick({
dots: true,
infinite: false,
slidesToShow: 5,
slidesToScroll: 2,
responsive: [
{
breakpoint: 1199,
settings: {
slidesToShow: 4,
slidesToScroll: 2
}
},
{
breakpoint: 991,
settings: {
slidesToShow: 3,
slidesToScroll: 2
}
},
{
breakpoint: 767,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
});
</script>
<script>
document.addEventListener('DOMContentLoaded',function(){
$('ul.slick-dots').remove()
})
let url = 'http://139.59.20.1/'
$('#making').click(function(){
window.location.href = url + "making"
})
$('#view').click(function(){
window.location.href = url + "gallery"
})
</script>
<style>
a.slick-slide{
/* max-width: 220px; */
}
img.img-fluid{
min-width: 220px;
max-width: 200px;
max-height: 300px;
}
</style>
</body>
</html>
这是我的 style.css
@import url("https://fonts.googleapis.com/css?family=Raleway:100,300,400,500,700,900");
body {
font-family: "Raleway", sans-serif;
font-size: 1.2em;
color: #707070;
margin: 0;
padding: 0;
overflow-x: hidden;
}
a {
transition: all 0.3s ease;
color: #38B;
}
a:hover,
a:focus {
text-decoration: none;
color: #D40;
}
a:focus {
outline: none;
}
.btn {
padding: 8px 32px;
}
.btn:hover {
background-color: #ced4da;
}
blockquote {
font-size: 0.86em;
line-height: 1.8em;
}
.tm-section-pad-top {
padding-top: 80px;
padding-bottom: 40px;
}
.tm-content-box {
padding-top: 20px;
padding-bottom: 40px;
}
.tm-text-primary {
color: #37A;
}
.tm-font-big {
font-size: 1.25rem;
}
.tm-btn-primary {
color: white;
background-color: #369;
padding: 14px 30px;
}
.tm-btn-primary:hover,
.tm-btn-primary:focus {
color: white;
background-color: #38B;
}
/* Navbar */
.tm-navbar {
position: fixed;
width: 100%;
z-index: 1000;
background-color: transparent;
transition: all 0.3s ease;
}
.tm-navbar.scroll {
background-color: white;
border-bottom: 1px solid #e9ecef;
}
.navbar-brand {
color: white;
font-size: 1.9rem;
font-weight: bold;
}
.navbar-brand:hover,
.tm-navbar.scroll .navbar-brand:hover {
color: #38B;
}
.tm-navbar.scroll .navbar-brand {
color: #369;
}
.nav-item {
list-style: none;
}
.tm-nav-link {
color: white;
}
.tm-navbar.scroll .tm-nav-link {
color: #369;
}
.tm-navbar.scroll .tm-nav-link:hover,
.tm-navbar.scroll .tm-nav-link.current,
.tm-nav-link:hover {
color: #FFF;
background-color: #369;
}
.navbar-toggler {
border: 1px solid white;
padding-left: 10px;
padding-right: 10px;
}
.navbar-toggler-icon {
color: white;
padding-top: 6px;
}
.tm-navbar.scroll .navbar-toggler {
border: 1px solid #707070;
}
.tm-navbar.scroll .navbar-toggler-icon {
color: #707070;
}
/* Hero */
#infinite {
background-color: #222;
background-image: url(../img/infinite-loop-04.jpg);
background-repeat: no-repeat;
height: 100vh;
min-height: 375px;
position: relative;
}
@media (min-height: 600px) and (min-width: 1920px) {
#infinite {
background-size: cover;
}
}
@media (min-height: 830px) {
#infinite {
background-position: center -210px;
}
}
@media (min-height: 680px) and (max-height: 829px) {
#infinite {
background-position: center -300px;
}
}
@media (min-height: 500px) and (max-height: 679px) {
#infinite {
background-position: center -400px;
}
}
@media (max-height: 499px) {
#infinite {
background-position: center -450px;
}
}
.tm-hero-text-container {
width: 100%;
height: 100%;
display: flex;
flex-flow: column;
justify-content: center;
}
.tm-hero-text-container-inner {
margin-top: -90px;
}
.tm-hero-title {
font-size: 3.5rem;
text-shadow: 2px 2px 2px #333;
}
.tm-hero-subtitle {
text-shadow: 2px 2px 2px #333;
}
.tm-intro-next {
position: absolute;
bottom: 100px;
left: 0;
right: 0;
}
@media (max-height: 480px) {
.tm-hero-text-container-inner {
margin-top: -40px;
}
.tm-intro-next {
bottom: 20px;
}
}
.tm-down-arrow-link {
display: block;
margin-top: 18%;
}
.tm-down-arrow {
color: #FFF;
cursor: pointer;
background: #357;
padding: 15px 40px;
transition: all 0.3s ease;
}
.tm-down-arrow:hover,
.tm-down-arrow:focus {
color: #FFF;
background: #37A;
padding: 20px 50px;
}
/* Introduction */
#introduction {
padding-bottom: 100px;
}
.tm-section-title {
font-size: 2.6rem;
font-weight: normal;
}
.tm-intro-text {
font-size: 1.2rem;
}
.tm-icon {
display: block;
color: #37A;
}
.tm-continue {
padding: 20px 0 30px 0;
}
/* Testimonials */
#testimonials {
color: white;
background-image: url(../img/infinite-loop-03.jpg);
background-size: cover;
background-repeat: no-repeat;
background-size: 100%;
position: relative;
}
@media (max-width: 991px) {
#testimonials {
background-image: url(../img/infinite-loop-03-mobile.jpg);
}
}
.tm-testimonials-content {
position: relative;
z-index: 100;
}
.tm-bg-overlay {
width: 100%;
height: 100%;
background: rgba(20, 70, 80, 0.2);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
}
.tm-testimonials-carousel {
max-width: 1050px;
margin: 0 auto;
}
.tm-testimonial-item {
max-width: 290px;
margin-left: 35px;
margin-right: 35px;
}
.tm-testimonial-item img {
border-radius: 50%;
margin-bottom: 35px;
}
.tm-testimonial-item figcaption {
text-align: right;
font-style: italic;
font-size: 1.1rem;
}
/* Work */
.tm-section-desc {
max-width: 650px;
width: 100%;
font-size: 0.9rem;
}
.tm-gallery-container {
padding-top: 70px;
}
.tm-gallery-item {
}
.slick-dots {
bottom: -65px;
}
.slick-dots li {
margin: 0 13px;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before,
.slick-dots li.slick-active button:before {
opacity: 1;
color: #3ba0dd;
}
.tm-testimonials-carousel .slick-dots li button:before {
color: white;
opacity: 0.5;
}
.tm-testimonials-carousel .slick-dots li button:hover:before,
.tm-testimonials-carousel .slick-dots li button:focus:before,
.tm-testimonials-carousel .slick-dots li.slick-active button:before {
color: white;
opacity: 1;
}
.slick-dots li button:before {
font-size: 18px;
}
/* Hover Effect */
/* Common style */
.grid figure {
position: relative;
float: left;
overflow: hidden;
background: #3085a3;
text-align: center;
cursor: pointer;
}
.grid figure img {
position: relative;
display: block;
min-height: 300px;
max-width: 200px;
opacity: 0.8;
}
.grid figure figcaption {
padding: 2em;
color: #fff;
text-transform: uppercase;
font-size: 1.25em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.grid figure figcaption::before,
.grid figure figcaption::after {
pointer-events: none;
}
.grid figure figcaption,
.grid figure figcaption > a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
}
.grid figure h2 {
word-spacing: -0.15em;
font-size: 0.9em;
font-weight: 300;
}
.grid figure h2 span {
font-weight: 600;
}
.grid figure h2,
.grid figure p {
margin: 0;
}
.grid figure p {
letter-spacing: 1px;
font-size: 68.5%;
}
/*---------------*/
/***** Honey *****/
/*---------------*/
figure.effect-honey {
background: #4a3753;
max-width: 220px;
}
figure.effect-honey img {
opacity: 1;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
figure.effect-honey:hover img {
opacity: 0.4;
}
figure.effect-honey figcaption::before {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 10px;
background: #38C;
content: "";
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
figure.effect-honey h2 {
position: absolute;
bottom: 0;
left: 0;
padding: 1em 1.5em;
width: 100%;
text-align: left;
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
}
figure.effect-honey h2 i {
font-style: normal;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
}
figure.effect-honey figcaption::before,
figure.effect-honey h2 {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
}
figure.effect-honey:hover figcaption::before,
figure.effect-honey:hover h2,
figure.effect-honey:hover h2 i {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.tm-container-gallery {
padding-top: 30px;
}
/* Contact */
#contact {
color: white;
background-color: #001828;
/* background-image: url(../img/infinite-loop-03.jpg); */
background-position: center;
background-repeat: no-repeat;
min-height: 980px;
position: relative;
padding-bottom: 50px;
padding-top: 100px;
}
.contact-item {
margin-left: 20px;
margin-bottom: 50px;
}
.item-link {
display: flex;
align-items: center;
}
.item-link i,
.item-link span {
color: white;
transition: all 0.3s ease;
}
.item-link:hover i,
.item-link:hover span {
color: #3496d8;
}
.tm-input {
margin: 0 0 20px 0;
width: 90%;
padding: 8px 20px;
border-radius: 6px;
border: 1px solid white;
background: transparent;
color: white;
}
.tm-btn-submit {
font-size: 0.9em;
color: #fff;
background-color: #369;
width: 50%;
margin-bottom: 60px;
}
.tm-btn-submit:hover {
color: #fff;
background-color: #38B;
}
::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: white;
opacity: 1; /* Firefox */
}
:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: white;
}
::-ms-input-placeholder {
/* Microsoft Edge */
color: white;
}
.tm-footer {
position: absolute;
bottom: 35px;
left: 0;
right: 0;
padding: 0 15px;
}
.tm-footer a {
color: #fff;
}
.tm-footer a:hover {
color: #9CF;
}
.tm-footer-link {
color: white;
}
.tm-footer-link:hover,
.tm-footer-link:focus {
color: #38B;
text-decoration: none;
}
p {
line-height: 1.9;
}
@media (min-width: 768px) {
.tm-intro-text-container {
padding-left: 0px;
}
.navbar-expand-md .navbar-nav .nav-link {
padding-right: 30px;
padding-left: 30px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1275px;
}
.tm-container-gallery {
max-width: 1290px;
}
.tm-container-contact {
max-width: 1063px;
}
}
@media (max-width: 991px) {
.tm-intro-text-container {
padding-left: 15px;
padding-top: 30px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.tm-intro-img {
display: block;
margin-left: auto;
margin-right: auto;
}
.tm-btn-submit {
margin-left: 0;
margin-top: 20px;
}
}
@media (max-width: 767px) {
.navbar-nav {
max-width: 200px;
text-align: right;
}
.navbar-collapse {
background-color: rgb(255, 255, 255);
padding: 10px;
border-radius: 3px;
}
.navbar-collapse .nav-link {
color: #707070;
padding-right: 20px;
}
}
@media (max-width: 480px) {
.tm-gallery-container {
max-width: 220px;
margin-left: auto;
margin-right: auto;
}
.tm-gallery-container-2 {
max-width: 350px;
}
.slick-dots li {
margin: 0 8px;
}
.tm-gallery-item {
margin: 0;
}
}
最佳答案
尝试从 flex-img 类中删除 max-width: 500px; 并向其添加 width: 100%; 。请参阅下面的图片了解更多信息。
上图显示错误，下图显示解决方案。
谢谢并致以最诚挚的问候!
关于javascript - 为什么我的网站屏幕分辨率与移动设备的屏幕尺寸不匹配？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/71909964/