javascript - 如何针对移动用户优化我的网站?
问题描述
所以,制作了我的网站,也尝试为移动用户优化它,但没有运气。请注意,我是网站开发的初学者,自学成才。我是来学习的 :) 遵循了一些指南/教程,我自己的东西等等。我愿意接受建议和建设性的批评:) 提前致谢!
我会在这里粘贴所有内容:
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
burger.addEventListener('click', () => {
//Toggle Nav
nav.classList.toggle('nav-active');
//Animate Links
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = '';
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.3}s`
}
});
//Burger Animation
burger.classList.toggle('toggle');
});
}
navSlide();
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
nav{
display: flex;
justify-content: space-around;
align-items: center;
min-height: 4vh;
background-color: #a44949;
font-family: 'Poppins', sans-serif;
}
.logo{
color: rgb(241, 241, 241);
text-transform: uppercase;
letter-spacing: 3px;
font-size: 20px;
}
.nav-links{
display: flex;
width: 30%;
justify-content: space-around;
}
.nav-links li{
list-style: none;
}
.nav-links a{
color: rgb(241, 241, 241);
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
width: 25px;
height: 3px;
background-color: rgb(241, 241, 241);
margin: 5px;
transition: all 0.3s ease;
}
@media screen and (max-width:1024px){
.nav-links{
width: 45%;
}
}
@media screen and (max-width:768px){
body{
overflow-x: hidden;
}
.nav-links{
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #a44949;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li{
opacity: 0;
}
.burger{
display: block;
}
.banner{
width: 50%;
}
}
.nav-active{
transform: translateX(0%);
}
@keyframes navLinkFade{
from{
opacity: 0;
transform: translateX(50px);
}
to{
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1{
transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2{
opacity: 0;
}
.toggle .line3{
transform: rotate(45deg) translate(-5px,-6px);
}
.banner{
width: 100%;
}
.text-box{
display: flex;
position: fixed;
background: rgb(250, 250, 250);
margin-top: -4px;
margin-left: 240px;
margin-right: 240px;
justify-content: space-around;
min-height: 100vh;
}
.text-uvod{
font-family: 'Poppins', sans-serif;
font-size: 28px;
letter-spacing: 2px;
color: black;
text-align: center;
font-weight: bold;
}
.footer{
display: grid;
grid-template-rows: repeat(1, min-content);
grid-auto-flow: column;
position: fixed;
bottom: 0;
width: 74.48%;
margin-left: 240px;
margin-right: 240px;
justify-content: space-around;
min-height: 28vh;
background-color: #a44949;
font-family: 'Poppins', sans-serif;
color: rgb(241, 241, 241);
}
.footer-list{
display: block;
justify-content: space-around;
list-style: none;
letter-spacing: 1px;
font-family: 'Poppins', sans-serif;
}
.heder{
justify-content: space-around;
letter-spacing: 1px;
padding-top: 30px;
padding-bottom: 50px;
}
.mapouter{
position: relative;
text-align: right;
padding-top: 7px;
height: 250px;
width: 250px;
}
.gmap_canvas{
overflow: hidden;
background: none;
height: 250px;
width: 250px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>MD Auto Delovi</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav>
<div class="logo">
<h4>Rakić MD</h4>
</div>
<ul class="nav-links">
<li>
<a href="#">O nama</a>
</li>
<li>
<a href="#">Kontakt</a>
</li>
<li>
<a href="#">Lokacija</a>
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<img src="pics/banner.png" class="banner">
<script src="app.js"></script>
<div class="text-box">
<p class="text-uvod">Auto Delovi Rakić, bavimo se putničkim i teretnim programom. Cilj nam je da zadovoljimo kupca sa cenama i kvalitetom proizvoda. Radimo sve poznate brendove.<br>
Ulja i maziva koja su nam se najbolje pokazala u prodaji su Mogul ulja za putnički i teretni program. Takođe, radimo i ostale brendove.<br>
Garancija na svaki kupljeni proizvod!<br>
Trudimo se da ispoštujemo svakog kupca sa ljubaznošću i kvalitetom delova.<br>
Hoćemo da budemo tim i da sa lakoćom rešimo svaki problem koji vas muči.<br>
Sigurni smo u sebe i mi to možemo, proverite i nećete se pokajati!<br>
Hvala na poseti,<br>
Vaši Auto Delovi Rakić MD 021</p>
</p>
</div>
<div class="footer">
<div><h4 class="heder">Kontakt</h4>
<ul class="footer-list">
<li>Mobilni : 062/329-077</li>
</ul>
</div>
<div><h4 class="heder">Podaci</h4>
<ul class="footer-list">
<li>PIB : 112295370</li>
<li>Matični broj : 66007057</li>
</ul>
</div>
<div><h4 class="heder">Radno vreme</h4>
<ul class="footer-list">
<li>Pon-Petak : 08:00-18:00h</li>
<li>Subota : 08:00-14:00h</li>
<li>Nedelja: Neradna</li>
</ul>
</div>
<div><h4 class="heder">Lokacija</h4>
<ul class="footer-list">
<li>Oslobođenja 32c, Rumenka 21201</li>
</ul>
</div>
<div class="mapouter">
<div class="gmap_canvas">
<iframe width="250" height="250" id="gmap_canvas" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d701.68692485527!2d19.739371629239997!3d45.293319842130856!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x475b137d0ce980cd%3A0x17a15ebc1c9edeb6!2sRaki%C4%87%20MD%20Auto%20Delovi!5e0!3m2!1sen!2sus!4v1615383981122!5m2!1sen!2sus" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
</div>
</div>
</div>
</body>
</html>
解决方案
将以下行添加到您的 CSS 中:
@media (max-width: 1200px) {
.text-box {
margin: 0 6px;
}
.text-uvod {
font-size: 16px;
}
.footer {
width: 100%;
margin: 0;
}
}
@media仅用于在满足特定条件时应用样式。在这种情况下,只有当窗口的宽度小于 1200 像素时,才会应用使页脚和文本框填满整个屏幕的样式。
推荐阅读
- json - JSON 数据未显示在 Ionic HTML 文件中
- lua - Tarantool 预读限制已达到警告
- android - 我在通过 cordova build 构建 android 时遇到问题
- node.js - 无法访问对象内部的数据
- c# - 更新 DataGrid 中的行后 SaveChanges() 引发异常 [C#][WPF]
- tensorflow-lite - 如何通过谷歌对 USB Accelerator 珊瑚 beta 进行基准测试?
- r - 用 NA 替换一行数据框中的第一个重复数据
- rpm - 将 rpmbuild 目录更改为 /var/lib/jenkins/rpmbuild/
- git - 将文件添加回主分支,该分支在还原中被删除
- python - 为什么我的脚本无法解析子目录中的 xml 文件?