自动调整页面大小在手机和其他屏幕大小
问题描述:
我在W3学校学习CSS,我刚创建一个页面,它的工作是我想要的,但如果我使用检查元素/在手机/其他设备与较小的屏幕,它是不规则的,特别是在文字,我不知道我错过了,这里是我的代码:自动调整页面大小在手机和其他屏幕大小
<!DOCTYPE html>
<html>
<head>
<style>
/* Here You Put Code */
body {
background-image:url("http://1.bp.blogspot.com/-CYQ5F9q6YlE/VIX6zgIg8EI/AAAAAAAAGwU/nkOudSDpI18/s1600/website-background-rough-surface.jpg");
}
div {
margin:30px;
margin-top:20px;
}
.NODDOS {
font-size:60px;
position:absolute;
border:2px solid black;
box-shadow: 10px 10px 5px #888888;
padding:160px;
padding-top:50px;
padding-bottom:50px;
width:65%;
font-weight:bold;
}
.abcdefg {
font-size:30px;
}
.DONOTHACKUS {
position:absolute;
margin:30px;
margin-top:310px;
margin-left:20px;
}
.DONOTHACK {
font-size:20px;
color:black;
background:;
border:3px solid black;
padding:10px;
box-shadow: 4px 4px 5px #888888;
text-decoration:none;
}
#home {
background : #C2DFFF;
}
.DONOTHACK:hover {
position: relative;
top: -1px;
box-shadow: 4px 4px 5px #888888;
}
.DONOTHACK a.hahaha {
text-decoration: none;
color:#000000;
}
.DONOTHACK a.hahaha:link {
text-decoration: none;
color:#000000;
}
.DONOTHACK a.hahaha:visited {
text-decoration: none;
color:#000000;
}
.DONOTHACK a.hahaha:active {
color:blue;
}
.maybeimtooshy {
font-size:50px;
font-weight:bold;
}
.butimustkeeptry {
position:absolute;
margin-left:310px;
margin-top:350px;
}
.totalkwithher {
font-size:20px;
}
.alltime {
position:absolute;
margin-top:600px;
border-bottom:5px solid black;
width:94%;
}
.keeptryjustrun {
position:absolute;
margin-top:595px;
margin-left:100px;
font-weight:bold;
font-size:50px;
}
.keeptrynoshy {
font-weight:normal;
font-size:30px;
}
.ihopeshewillloveme {
height:50px;
width:300px;
}
/*-------------------*/
<!-- Mazaya Salma Zhafarina -->
<!-- I Love You -->
</style>
</head>
<body>
<div>
<div class="NODDOS">English Lesson
<p class="abcdefg">Welcome To English Lesson !</p>
</div>
<div class="DONOTHACKUS">
<div class="DONOTHACK" id="home"><a class="hahaha" href="#">Home</a></div>
<div class="DONOTHACK"><a class="hahaha" href="#">Tentang</a></div>
<div class="DONOTHACK"><a class="hahaha" href="#">Kerjakan Soal</a></div>
</div>
<div class="butimustkeeptry">
<div class="maybeimtooshy">
Siapa Kita ?
</div>
<p class="totalkwithher">
Kita adalah anggota SMP 13 Semarang yang membuat website ini untuk melatih kemampuan siswa
<p class="totalkwithher">
dalam berbahasa inggris melalui soal soal yang diberikan
</p>
</div>
</div>
<div class="keeptryjustrun">
Daftar Sekarang !
<p class="keeptrynoshy">Ayo Daftar Sekarang Dan Kerjakan Soal Untuk Menjadi Yang Terbaik !</p>
<button class="ihopeshewillloveme" href="#">Daftar Disini !</button>
</div>
</div>
</body>
</html>
有谁知道IM错过了什么? CNC中修正了一些字
答
还有很多工作要做...首先,你需要把这个在您的head
标签:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
它可以确保移动设备不只是使您的桌面网站更小(即无法缩放时无法阅读)。
接下来,你需要“媒体查询”,在你的CSS,如:
@media only screen and (max-width: 960px) {
...
[ put CSS rules for screens below 960px width in here ]
...
}
您可以使用多个媒体查询,平板电脑,大小不同等
智能手机这是不可或缺的部分 - 这是很多工作...
“搞砸”是什么意思?如果你没有告诉我们具体问题,我们无法帮助你。 – Shaggy
搞砸意味着不规则,也是文本中的问题 – diwang
如果这些类的名称是真实的,那么你应该改变它们,因为这些名称不告诉你他们做什么,因此他们是坏名字。 – Dacaspex