Html 使元素适合mobile first/媒体查询的问题
我从未完成我的网络集成教育，但我现在是一名mediagraphics实习生，我愿意用css和html编写一些代码。因此，我非常生疏，这个项目是一个知识的更新，因为它一直是一个适当的项目。所以请友善点 我使网站响应，但我有一个问题，为手机屏幕大小编码。 在“我的内容”右侧，背景图像继续显示，允许您横向滚动。我根本不知道是什么原因造成的。图像和所有内容都经过编辑以适应那里的宽度 我有一个怀疑，我可能完全弄乱了像素的宽度。我已经使它适合屏幕，但我是否应该忘记这一点，并使用手机屏幕的实际宽度？看起来很小，1090px的宽度很好，只是背景推到了一边 这是我用于手机的媒体查询的css代码Html 使元素适合mobile first/媒体查询的问题,html,css,media,Html,Css,Media,我从未完成我的网络集成教育，但我现在是一名mediagraphics实习生，我愿意用css和html编写一些代码。因此，我非常生疏，这个项目是一个知识的更新，因为它一直是一个适当的项目。所以请友善点 我使网站响应，但我有一个问题，为手机屏幕大小编码。 在“我的内容”右侧，背景图像继续显示，允许您横向滚动。我根本不知道是什么原因造成的。图像和所有内容都经过编辑以适应那里的宽度 我有一个怀疑，我可能完全弄乱了像素的宽度。我已经使它适合屏幕，但我是否应该忘记这一点，并使用手机屏幕的实际宽度？看起来很小
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Splitters */
.splitter1 {
visibility: hidden;
height:0;
width:0;
z-index:1000;
}
.splitter1mobile {
visibility: visible;
height:250px;
width:1090px;
margin:0;
padding:0;
z-index:1000;
}
.splitter2 {
visibility: hidden;
height:0;
width: 0;
z-index:1000;
}
.splitter2mobile {
visibility:visible;
height:250px;
width:1090px;
margin:0;
padding:0;
z-index:1000;
}
.splitter3 {
visibility: hidden;
height:0;
width: 0;
z-index:1000;
}
.splitter3mobile {
visibility: visible;
height:250px;
width:1090px;
margin:0 0 7px 0;
padding:0;
z-index: 1000;
}
.splitter4 {
visibility: hidden;
width: 0;
height: 0;
}
.splitter4mobile {
visibility: visible;
height:250px;
width:1090px;
margin:-2px 0 0 0;
padding:0;
z-index: 1000;
}
.orangesplitter {
height:100%;
width:100%;
margin-top:-17px;
margin-bottom:-11px;
}
.greysplitter {
height:239px;
width:100%;
margin:-19px 0 26px 0;
}
footer {
width:86.5%;
}
.Element-header {
transform: translate3d(0,0,0);
}
.Element-header--fixed {
top: 0;
position: fixed;
}
/*------------- Body --------------*/
.fysphone {
margin-left:57px;
margin-top:112px;
visibility: visible;
width:56%;
height:45%;
}
.fysphone img {
visibility: visible;
width:100%;
height:500px;
}
.fysimgbox {
display:none;
}
.jonimgbox {
visibility: hidden;
width:0;
height:0;
}
.contentwrapper {
width:100%;
display:inline-block;
}
.textbox {
width:90%;
}
.jonimgboxphone {
margin-top:22px;
}
.jonnicephone {
margin:0 0 0 100px;
}
.jontitelphone {
margin-left:199px;
}
header {
transform: translate3d(0,0,0);
z-index: 1000;
padding:0;
margin:0;
width:1090px;
height:265px;
position:fixed;
box-shadow:0 5px 15px 0 #7d7b7c;
}
body{
padding:0;
margin:0 auto;
width:1090px;
height:8227px;
background-image: url(img/wallbgfadedphone.png);
background-repeat:repeat;
background-blend-mode: overlay;
}
.imgmbox {
margin-left:0;
margin-right:10px;
}
/*----- Google Maps -----*/
iframe {
margin-top:150px;
margin-right:20px;
width:500px;
height:350px;
}
.wrapper {
margin: 0 auto;
width:100%;
height: 8227px;
}
/*------------- Header ------------*/
/*------------- Header Navbar ------------*/
.Hnavbar {
margin-top:0;
height:101px;
width:100%;
box-shadow: inset 0 0 0 1000px rgba(125,123,124,.9);
background-image:url(img/wallbg.jpg);
}
.nav1 {
margin-left:-26px;
}
nav ul {
height:101px;
float:left;
margin:0;
width:100%;
}
nav ul li {
margin-left:30px;
margin-top:18px;
float:left;
height:30px;
list-style: none;
border-radius: 9px;
}
nav ul li a {
font-family:Exo;
color: #dedede;
padding:5px 23px 5px 23px;
border-top:1px solid #dedede;
border-bottom:1px solid #dedede;
text-decoration: none;
text-align: center;
font-size: 40px;
}
.fblink {
width:50px;
height:50px;
float:left;
margin-left:150px;
margin-top:15px;
display:none;
}
.fbicon:hover {
opacity:1.0;
}
/*** Content Block ***/
.contentblock {
width:100%;
height:1200px;
background-color:rgb(255,255,255,0.8);
display:inline-block;
opacity:0.9;
}
.contentblock1 {
width:100%;
height:1239px;
background-color:rgb(255,255,255,0.8);
display:flex;
opacity:0.9;
}
.contentblock2 {
display:inline-block;
width: 100%;
height:1971px;
background-color:rgb(255,255,255,0.8);
opacity:0.9;
margin-top:10px;
}
#contentblock3 {
width: 100%;
height:1120px;
background-color:rgb(255,255,255,0.8);
display:inline-block;
opacity:0.9;
}
/*** Anchor Menupoint Scrollpositioner ***/
.anchor {
display:none;
height:265px;
margin-top: -265px;
visibility:hidden;
}
/*** Om Text ***/
.textbox p {
font-family:Exo-Regular;
width:100%;
margin:0 auto 0 35px;
font-size:33px;
font-weight: 600;
color:#7d7b7c;
padding:0;
}
/*** Fys Text ***/
.fysbox {
font-family:Exo-Regular;
width:100%;
height:850px;
color:#7d7b7c;
padding:0;
}
.fysbox h2 {
font-size:40px;
margin-left:35px;
}
.fysbox p {
font-family:Exo-Regular;
width:90%;
margin:0 0 0 35px;
font-size:33px;
font-weight: 600;
color:#7d7b7c;
padding:0;
}
.fysbox ul li {
font-size:33px;
font-weight:600;
}
.textwrapper {
width:100%;
padding:20px;
}
/** Træning Text **/
.traeningbox p {
font-family:Exo-Regular;
width:100%;
margin:0 auto 0 35px;
font-size:33px;
font-weight:600;
color:#7d7b7c;
padding:0;
}
.traeningbox h2 {
font-size: 40px;
margin-left:35px;
}
.traeningbox {
width:90%;
}
/*---- Priser Text ----*/
.textboxpris {
float:left;
font-family:Exo-Regular;
width:350px;
margin:0 0 0 35px;
font-size:24px;
font-weight:600;
color:#7d7b7c;
padding:20px;
}
.textboxpris p {
font-size:33px;
}
.prish {
width:188px;
}
.pristext {
width:757px;
}
.textboxpris h2 {
font-size:40px;
}
.pristext {
font-size: 26px;
font-weight: 600;
margin-top:100px;
}
.prispunkt {
font-size:26px;
}
.textwrapperpris {
width:872px;
}
.textwrapperpris h2 {
}
.prisv {
float:left;
width:570px;
height:200px;
}
.prisimgbox {
visibility: hidden;
width:0;
height:0;
}
/*--- Kontakt text ---*/
.kontaktbox {
margin:0 0 0 98px;
float:left;
width:852px;
height:600px;
padding:0px;
font-family: Exo-Regular;
font-size:33px;
font-weight:600;
}
.kontaktbox h2 {
font-size: 40px;
}
iframe {
display:none;
}
.traeningimgbox {
visibility: hidden;
width:0;
height:0;
}
footer {
width:905px;
}
}
And this is my HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slagelse Sportsklinik</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<a name="top"></a>
<div class="wrapper">
<header>
<div class="Hlogobox">
<a href="index.html"><img src="img/logowhite.png" alt=""></a>
</div>
<nav class="Hnavbar">
<ul>
<li class="nav1"><a href="#top"><span>Home</span></a></li>
<li><a href="#fysmenu"><span>Fysioterapi</span></a></li>
<li><a href="#træningmenu"><span>Træning</span></a></li>
<li><a href="#prismenu"><span>Priser</span></a></li>
<li class="nav5"><a href="#kontaktmenu"><span>Kontakt</span></a></li>
<a class="fblink" target="_blank" href="https://www.facebook.com/slagelsesportsklinik"><img class="fbicon" src="img/icons/facebook.png" alt=""></a>
</ul>
</nav>
</header>
<main>
<div class="contentblock1">
<div class="contentwrapper">
<div class="jonimgboxphone">
<img class="jontitelphone" src="img/jontitel.png" alt="">
<br>
<img class="jonnicephone" src="img/jonnice.png" alt="">
</div>
<div class="textbox">
<p>
<b>Slagelse Sportsklinik</b> startede i 2017 af fysioterapeut Jon Ahrensbøll med ønsket om at ville starte en klinik, der leverede hurtige og markante resultater, der skulle sikre hurtig tilbagevenden til idræt eller arbejde.
<br>
<br>
<span class="jonahrensboll"><b>Jon Ahrensbøll</b></span> har igennem 18 år arbejdet som fysioterapeut på forskellige klinikker med alle typer af patienter. De senere år har patientgruppen primært været idrætsfolk primært indenfor triatlon, løb og cykling. Jon Ahrensbøll er samtidigt tilknyttet Gørlev Fysioterapi og Idrætsklinik som fysioterapeut med fysioterapeutisk ansvar for både Vestsjællands Idrætsefterskole og Gørlev Idrætsefterskole.
</p>
</div>
<div class="jonimgbox">
<img class="jontitel" src="img/jontitel.png" alt="">
<img class="jonnice" src="img/jonnice.png" alt="">
</div>
</div>
</div>
<div class="orangesplitter">
<img class="splitter1" src="img/orangesplitter1.png" alt="">
<img class="splitter1mobile" src="img/orangesplitter1mobile.png" alt="">
</div>
<a name="fysmenu"></a>
<span class="anchor" id="section2"></span>
<div class="contentblock2">
<div class="totalwrap">
<div class="fysphone">
<img class="img" src="img/jonbrugerlaser.png" alt="">
</div>
<div class="fysbox">
<div class="textwrapper">
<h2>Fysioterapi</h2>
<p>
Hos Slagelse Sportsklinik udfører vi fysioterapeutiske behandlinger af høj kvalitet. Vi har en høj grad af information om både tests og behandling, og vi tillægger altid et holistisk perspektiv i vores behandlinger.
<br>
<br>
For at opnå størst mulig positiv effekt benytter vi forskellige fysioterapeutiske, osteopatiske og kiropraktiske manuelle teknikker, ligesom vi ofte inddrager forskellige former for træningsøvelser.
<br>
<br>
Udover manuelle teknikker og træningsøvelser benytter vi desuden bl.a.
</p>
<ul>
<li>IMS (Intra Muskulær Stimulation) dvs. behandling med nåle, hvorved bl.a. muskulatur afspændes hurtigt.</li>
<li>Kinesiotape, dvs. optapening med hyperelastisk tape, der på en gang støtter og bibeholder fuld funktion af både muskler og led.</li>
<li>High Power Laser, dvs. laserbehandling, der skaber en kemisk modulering af vævet, så opheling sker markant hurtigere</li>
</ul>
</div>
</div>
<div class="fysimgbox">
<img class="imgfys" src="img/jonbrugerlaser.png" alt="">
</div>
</div>
</div>
<div class="greysplitter"><img class="splitter2" src="img/greysplitter1.png" alt="">
<img class="splitter2mobile" src="img/greysplitter1mobile.png" alt="">
</div>
<a name="træningmenu"></a>
<span class="anchor" id="section2"></span>
<div class="contentblock3" id="contentblock3">
<div class="traeningbox">
<div class="textwrapper">
<h2>Træning</h2>
<p>
Hos Slagelse Sportsklinik tilbydes træning på små hold (max. 5 personer). Vi har forskellige former for holdtræning, og ens for dem alle er, at der er fokus på CORE, stabilitet og -ikke mindst- funktionalitet. Træningen er målrettet den enkelte deltager, således at alle uanset niveau vil blive udfordret.
<br>
<br>
Vi har valgt små hold ud fra ideen om, at på små hold er det intensiv, nærmest personlig træning samtidigt med, at man fortsat kan være social.
<br>
<br>
På alle hold benyttes styrke- og udspændingsøvelser hentet fra Pilates, Yoga og CORE, ligesom der benyttes træning i TRX, dvs. træning i slynger med egen kropsvægt som modstand.
</p>
</div>
</div>
<div class="traeningimgbox">
<img src="img/grittoneddown.png" alt="">
<img class="pushimg" src="img/stretch.png" alt="">
</div>
</div>
<div class="orangesplitter">
<img class="splitter3" src="img/orangesplitter2.png" alt="">
<img class="splitter3mobile" src="img/orangesplitter2mobile.png" alt="">
</div>
<a name="prismenu"></a>
<span class="anchor" id="section2"></span>
<div class="contentblock">
<div class="textboxpris">
<div class="textwrapperpris">
<h2>Priser</h2>
<p class="prisv">
Fysioterapeutisk behandling pr. gang <br><br>
Træning pr. gang <br><br>
Træningsklippekort - 10 gange <br><br>
Behandlingsklippekort - 10 gange <br><br>
</p>
<p class="prispunkt">
<b>•</b><br><br>
<b>•</b><br><br>
<b>•</b><br><br>
<b>•</b><br><br>
</p>
<p class="prish">
<b>kr. 275,00</b> <br><br>
<b>kr. 45,00 </b><br><br>
<b>kr. 400,00</b> <br><br>
<b>kr. 2500,00</b> <br><br>
</p>
<p class="pristext">
Slagelse Sportsklinik har <b>ikke</b> overenskomst med Den Offentlige Sygesikring, så tilskud hertil kan ikke opnås. Dette betyder samtidigt, at der ikke kræves henvisning fra egen læge for at kunne få behandling hos Slagelse Sportsklinik.
</p>
</div>
</div>
<div class="prisimgbox"><img src="img/transaction.png" alt="">
</div>
</div>
<div class="greysplitter">
<img class="splitter4" src="img/greysplitter2.png" alt="">
<img class="splitter4mobile" src="img/greysplitter2mobile.png" alt="">
</div>
<a name="kontaktmenu"></a>
<span class="anchor" id="section2"></span>
<div class="contentblock" id="contentblock5">
<div class="kontaktbox">
<h2>Kontakt</h2>
<p>
Du kan kontakte klinikken på følgende måder:
</p>
<ul>
<li><p><b>Telefon</b></p></li>
<li><p><b>Mail</b></p></li>
<li><p><b>Snailmail</b></p></li><br><br>
<li><p><b>Facebook</b></p></li>
</ul>
<ul>
<li><p>2844 0023</p></li>
<li><p>slagelsesportsklinik@gmail.com</p></li>
<li><p>Slagelse Sportsklinik <br>
Nytorv 4, 1. sal <br>
4200 Slagelse</p></li>
<li><a target="_blank" href="https://www.facebook.com/slagelsesportsklinik">www.facebook.com/slagelsesportsklinik</a></li>
</ul>
</div>
<iframe
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDXNF-E5Se1Suc6FWGmQWoH_bcpHoSwEEs
&q=Nytorv4+Slagelse,Slagelse+DK" allowfullscreen>
</iframe>
</div>
</main>
<footer>
<div class="footerleft">
<adress>Slagelse Sportsklinik</adress><br>
<adress>Nytorv 4, 1. Sal</adress><br>
<adress>4200 Slagelse</adress><br>
</div>
<div class="footerright">
<img class="footericon" src="img/icons/tlf.png" alt=""><adress>2844 0023</adress><br><br>
<img class="footericon" src="img/icons/mail.png" alt=""><adress>slagelsesportsklinik@gmail.com</adress><br><br>
<img class="footericon" src="img/icons/fbsort.png" alt=""><adress><a target="_blank" href="https://www.facebook.com/slagelsesportsklinik">www.facebook.com/slagelsesportsklinik</a></adress>
</div>
</footer>
</div>
</body>
</html>
@仅媒体屏幕和（最小设备宽度：320px）和（最大设备宽度：480px）{
/*分离器*/
.拆分器1{
可见性：隐藏；
身高：0；
宽度：0；
z指数：1000；
}
.Splitter1手机{
能见度：可见；
高度：250px；
宽度：1090px；
保证金：0；
填充：0；
z指数：1000；
}
.拆分器2{
可见性：隐藏；
身高：0；
宽度：0；
z指数：1000；
}
.Splitter2手机{
能见度：可见；
高度：250px；
宽度：1090px；
保证金：0；
填充：0；
z指数：1000；
}
.拆分器3{
可见性：隐藏；
身高：0；
宽度：0；
z指数：1000；
}
.拆分器3移动设备{
能见度：可见；
高度：250px；
宽度：1090px；
边际：0.7px 0；
填充：0；
z指数：1000；
}
.拆分器4{
可见性：隐藏；
宽度：0；
身高：0；
}
.Splitter4移动电话{
能见度：可见；
高度：250px；
宽度：1090px；
保证金：-2px0；
填充：0；
z指数：1000；
}
橘子垃圾{
身高：100%；
宽度：100%；
利润上限：-17px；
边缘底部：-11px；
}
格雷斯普利特先生{
高度：239px；
宽度：100%；
保证金：-19px 0 26px 0；
}
页脚{
宽度：86.5%；
}
.元素标题{
变换：translate3d（0,0,0）；
}
.Element标头--已修复{
排名：0；
位置：固定；
}
/*-------------身体--------------*/
费斯丰先生{
左边距：57px；
边缘顶端：112px；
能见度：可见；
宽度：56%；
身高：45%；
}
.fysphone img{
能见度：可见；
宽度：100%；
高度：500px；
}
.fysimgbox{
显示：无；
}
jonimgbox先生{
可见性：隐藏；
宽度：0；
身高：0；
}
.contentwrapper{
宽度：100%；
显示：内联块；
}
.文本框{
宽度：90%；
}
.jonimgboxphone{
边缘顶部：22px；
}
琼斯先生，电话{
利润率：0 100像素；
}
jontitelphone先生{
左边距：199px；
}
标题{
变换：translate3d（0,0,0）；
z指数：1000；
填充：0；
保证金：0；
宽度：1090px；
高度：265px；
位置：固定；
盒影：0 5px 15px 0#7d7b7c；
}
身体{
填充：0；
保证金：0自动；
宽度：1090px；
高度：8227px；
背景图片：url（img/wallbgfadedphone.png）；
背景重复：重复；
背景混合模式：叠加；
}
.imgmbox{
左边距：0；
右边距：10px；
}
/*-----谷歌地图-----*/
iframe{
边缘顶部：150px；
右边距：20px；
宽度：500px；
高度：350px；
}
.包装纸{
保证金：0自动；
宽度：100%；
高度：8227px；
}
/*-------------标题------------*/
/*-------------标题导航栏------------*/
海纳瓦尔先生{
边际上限：0；
高度：101px；
宽度：100%；
盒影：插入0 1000px rgba（125123124.9）；
背景图片：url（img/wallbg.jpg）；
}
.导航1{
左边距：-26px；
}
导航ul{
高度：101px；
浮动：左；
保证金：0；
宽度：100%；
}
李国荣{
左边距：30px；
边缘顶部：18px；
浮动：左；
高度：30px；
列表样式：无；
边界半径：9px；
}
海军ulli a{
字体系列：Exo；
颜色：#dedede；
填充：5px23px 5px23px；
边框顶部：1px实心#dedede；
边框底部：1px实心#dedede；
文字装饰：无；
文本对齐：居中；
字体大小：40px；
}
.fblink{
宽度：50px；
高度：50px；
浮动：左；
左边距：150像素；
边缘顶部：15px；
显示：无；
}
.fbicon:悬停{
不透明度：1.0；
}
/***内容块***/
.contentblock{
宽度：100%；
高度：1200px；
背景色：rgb（255255,0.8）；
显示：内联块；
不透明度：0.9；
}
.contentblock1{
宽度：100%；
高度：1239px；
背景色：rgb（255255,0.8）；
显示器：flex；
不透明度：0.9；
}
.contentblock2{
显示：内联块；
宽度：100%；
高度：1971px；
背景色：rgb（255255,0.8）；
不透明度：0.9；
边缘顶部：10px；
}
#内容块3{
宽度：100%；
高度：1120px；
背景色：rgb（255255,0.8）；
显示：内联块；
不透明度：0.9；
}
/***锚定菜单点定位器***/
.主播{
显示：无；
高度：265px；
边缘顶部：-265px；
可见性：隐藏；
}
/***Om文本***/
.textbox p{
字体系列：Exo-Regular；
宽度：100%；
保证金：0自动0 35px；
字体大小：33px；
字号：600；
颜色：#7d7b7c；
填充：0；
}
/***F
.wrapper {
overflow:hidden;
width:100%;
max-width:1200px; // or whatever you want
display:block;
margin: 0 auto;
}
header {
width:100%;
}