為什么 CSS 樣式表在移動設備上不起作用？
[英]Why doesn't CSS stylesheet work on mobile?
問題描述
我是 webdev 的初學者。 我正在使用 bootstrap 為按摩治療師開發一個網站。 問題是我的 CSS 樣式沒有出現在移動設備上。 背景和引導導航欄消失。 我使用 PNG 文件制作大徽標，但也不會在移動設備上顯示。 我嘗試在移動設備上使用 chrome。
這是 HTML 頁面：
<!DOCTYPE html>
<html lang="hu de">
<head>
<meta charset="utf-8">
<title>Massage for You</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--CSS Stylesheets-->
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Righteous&display=swap" rel="stylesheet">
<!--Scripts-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/c79cd4e211.js" crossorigin="anonymous"></script>
<!--This script is the language toggler-->
<script type="text/javascript">
var arrLang = {
"hungarian": {
"aboutme": "Bemutatkozó",
"massage": "Masszázs",
"contact": "Foglalás",
"citation": "A masszázsra fordított idő sohasem elvesztegetett.",
"introductiontitle": "Bemutatkozás"
},
"german": {
"aboutme": "Einführung",
"massage": "Massagen",
"contact": "Kontakt",
"citation": "Die Zeit, die eine Massage dauert, ist niemals verschwendet.",
"introductiontitle": "Vorstellung"
}
};
$(document).ready(function() {
// The default language is German
var lang = "hungarian";
$(".lang").each(function(index, element) {
$(this).text(arrLang[lang][$(this).attr("key")]);
});
});
// get/set the selected language
$(function() {
$(".translate").click(function() {
var lang = $(this).attr("id");
$(".lang").each(function(index, element) {
$(this).text(arrLang[lang][$(this).attr("key")]);
});
});
});
</script>
</head>
<body>
<!-- Nav Bar: It has two functions. Switch between languages and menu bar for each block of the page-->
<div class="background1">
<div class="navbar navbar-expand navbar-dark fixed-top flex-column flex-md-row bd-navbar">
<div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav fex-row">
<li class="nav-item">
<a class="lang nav-link" key="aboutme" href="#about-me"></a>
</li>
<li class="nav-item">
<a class="lang nav-link" key="massage" href="#massage"></a>
</li>
<li class="nav-item">
<a class="lang nav-link" key="contact" href="#contact"></a>
</li>
</ul>
</div>
<ul class="navbar-nav ml-md-auto">
<li class="nav-item">
<a class="translate nav-link" id="hungarian" href="#">HU</a>
</li>
<li class="nav-item">
<a class="translate nav-link" id="german" href="#">DE</a>
</li>
</ul>
</div>
<div class="container logocontainer">
<div class="row align-self-center">
<div class="col-md-auto">
<img class="logo" src="IMG/massage4U-3K62CX-300dpi.png" alt="Massage for You">
</div>
</div>
</div>
</div>
<div class="container-fluid" id="about-me">
<h3 class="lang section-title" key="introductiontitle"></h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and morerecently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
<div class="background2">
</div>
<div class="background3">
</div>
</body>
</html>
這是 CSS 樣式表：
body, html {
height: 100%;
margin: 0;
background-color: #fbf0f0;
}
/*Navbar section Styling navbar items and language switcher.*/
.navbar {
background-color: #7c7575;
opacity: 0.8;
}
.navbar-image {
padding-left: 30px;
margin-bottom: 20px;
}
.navbar-image {
width: 180px;
}
.nav-item {
padding: 0 10px;
color: #fbf0f0;
}
/*Background properties. Parallax effect*/
.background1 {
background-image: url(../IMG/backgroundimg1.jpg);
min-height: 100%;
}
.background2 {
background-image: url(../IMG/backgroundimg2.jpg);
min-height: 800px;
}
.background3 {
background-image: url(../IMG/backgroundimg3.jpg);
min-height: 800px;
}
.background1, .background2, .background3 {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/*Turn off parallax on mobile devices*/
@media only screen and (max-device-width: 1024px) {
.background1, .background2, .background3 {
background-attachment: scroll;
}
}
.logocontainer {
padding-top: 60px;
}
.logo {
max-width: 90%;
height: auto;
padding-top: 40px;
opacity: 0.6;
}
1 個解決方案
解決方案1
0 2020-06-28 11:53:35
我解決了這個問題。 原因是移動瀏覽器使用的基於 ID 的 URL 協議。 此內容協議不起作用，也不會加載任何其他文件（css 表）。
外部樣式表中的樣式不起作用。 也許網站沒有加載樣式表。 但為什么？
[英]Styles in external stylesheet do not work. Maybe the website doesn't load the stylesheet. But why?
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}"> 不工作
[英]<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}"> doesn't work
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.