Question

大约3个月以来，我开始以软件开发人员的身份学习。我们需要建立一个驾驶学校的网站，以一个由四个人组成的团队进行一个项目。我有一台14英寸的笔记本电脑，它们有一台更大的笔记本电脑，当我们将文件相互发送并打开时，网站看起来并不像它应该的样子。该图像不是完整尺寸，但是在编写它的笔记本电脑上可以。文本大部分没有响应。

主页上的图像称为：#homeAfbeelding 其上的文字称为：#tekstHome，＃tekstHome2和＃tekstHome3

金色下的文字：#tekstreden等...

有什么主意如何使其具有响应性？这对我和我的团队的研究真的很有帮助。我已经尝试了很多方法，但是对我来说不起作用。

谢谢！ `

<title>Rijschool Wummy</title>

    <link rel="stylesheet" type="text/css" href="easydrive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/x-icon" href="rijschoolafbeelding.ico" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<nav> 


    <div id="navNaam"> 
    <a href="easydrive.html"><img src="img/rijschoolafbeelding.png" id="logo" width= 60%>  </a>



    <li><a href="rijlessen.html"> Rijlessen </a> </li>
    <li><a href="tarieven.html"> Tarieven </a> </li>
    <li><a href="diploma.html"> Opleidingen </a> </li>
    <li><a href="geschiedenis.html"> Over ons </a> </li>        
    <li><a href="contact.html"> Contact </a> </li>
    <li><a href="login.html"> Inloggen </a> </li>

</nav>
    </div>

    <div id="achtergrondHome"> 
    <img src="img/snelweg13.gif"  id="homeAfbeelding"> 
    <h2 id="tekstHome"> Een rijbewijs halen is makkelijk bij ons. </h2>
    <p id="tekstHome2"> Snel uw rijbewijs halen? </p>
    <p id="tekstHome3"> Dat kan bij onze goed opgeleide rijinstructeurs! </p>
    <button onclick="afbeeldingKnop()" id="afbeeldingKnop"><a href="proefles.html">Meld je nu aan voor een gratis proefles! </button></a>

</div>

<div id="containerHome"> 
<h1 id="rijschoolTekst"> Rijschool Wummy </h1>

    <hr>

    <br>


<div id="titelReden">

<h3 id="r1"> Hoge slagingspercentage </h3>

<h3 id="r2"> Vrijblijvende proefles en opleidingsadvies </h3>


 </div>

 <div id="tekstReden"> 

 <p id="a1"> "Een professionele rijschool met een zeer hoog slagingspercentage – dat is de beste omschrijving voor Rijschool Wummy uit Amsterdam. Al jarenlang realiseren wij een  hoog slagingspercentage en hebben we aandacht voor íedere leerling. Belangrijk : slagingspercentage van Rijschool Wummy is gebaseerd op meer dan 10 eerste examens per jaar. Natuurlijk kun je ons hoge slagingspercentage eenvoudig terug vinden via de website van het CBR. </p>

<p id="a2"> "Na afloop krijg je een persoonlijk opleidingsadvies voor het behalen van je rijbewijs. Om zoveel mogelijk uit je autorijlessen te halen krijg je altijd rijles van dezelfde instructeurs/-tices en in dezelfde lesauto. Voor de rijlessen komt autorijschool Wummy je thuis ophalen en wordt je ook weer afgezet. Met onze Rijlesplanner heb je overal online toegang tot je planning, betalingen, vorderingen en theorie. </p>


</div>

<div id="titelReden2"> 

<h3 id="r3"> Faalangst rijlessen of rijangst rijlessen? </h3>
<h3 id="r4"> Modern rijlesprogramma </h3>

</div>

<div id="tekstReden2">
<p id="a3"> Voor jou hebben wij echte gespecialiseerde instructeurs en hypnotherapeuten die je kunnen helpen met het op een geruste manier behalen van je CBR-examen voor de auto! Veel mensen hebben last van een of meerdere van de onderstaande kenmerken en hebben om die reden veel moeite met het rustig rijden tijdens het CBR-examen, terwijl het tijdens de lessen eigenlijk altijd wel goed gaat. 

<br> 
    <br>

    Autorijschool Wummy heeft getrainde instructeurs die leerlingen met faalangst zeer goed kunnen begeleiden en weten wat te doen om dit soort angsten te laten verdwijnen. Het is belangrijk om vanaf de eerste rijles te werken aan deze spanning, zodat u geruster het rijexamen kunt afleggen. Naast dat onze instructeurs gespecialiseerd zijn in het geven van faalangsttrainingen bieden wij daarnaast ook de mogelijkheid tot lichte en gevorderde hypnotherapie vooraf aan het rijden. Hier gaat wel altijd een gesprek aan vooraf om de obstakels in kaart te brengen. Hierdoor weet de instructeur wat de juiste behandelmethoden zijn om toe te passen. Desgewenst kan hier nog een tweede instructeur bij aanwezig zijn.
  </p>

<p id="a4"> Wij hebben een heel moderen rijlesprogramma. Het nieuwste van het nieuwste. Alles is van 2019. Dat betekent dat wij in de meeste gevallen een gratis herexamen hebben, je hebt altijd en overal toegang tot je theorie. Waardoor je kunt leren wanneer je wilt. Zo verhogen we de slagingspercentage elk jaar. Je kan online je facturen bekijken, betalen, afspraken inplannen en je agenda bekijken voor je volgende rijles. Wel handig!

    <br> 
        <br>
Autorijschool Wummy maakt gebruik van haar eigen digitale Xpress omgeving. Via dit portaal hebben leerlingen inzicht in de gehele rijopleiding. Denk aan zelf de rijlessen inplannen en aanleren, rijles vorderingen bijhouden, voorbereiden op CBR rijexamens en betalingen verrichten. Leerlingen die gebruik maken van deze dienst hebben aantoonbaar minder rijlessen nodig, waarmee de weg naar een rijbewijs een stuk minder duur wordt gemaakt. Dit hebben we te danken aan de kwaliteit en service die onze rijschool vanuit Amsterdam verleend!
</p>
</div>

<hr> 

</div>

* {
  box-sizing: border-box;

    body{
        font-family: Arial, Open-Sans;
        margin: 0;
        padding: 0;
        overflow-x: hidden; 
        height: 0;


    }

    li{
        list-style-type: none;
    }

    a {
        text-decoration: none;
        color: black;
        font-family: Arial, Open-Sans;
        font-size: 15px;
        font-weight: bold;

    }

    a:hover{
        text-decoration: underline;
    }

    #navNaam{
        display: flex;
        justify-content: space-between;
        position: relative;
        top: 30px;
        right: 80px;
        bottom: 20px;

    }

    #logo{
        position: relative;
        display: flex;
        justify-content: space-between;
        bottom: 40px;
        left: 100px;

    }

    #tekstHome{
        position: relative;
        bottom: 350px;
        left: 330px;
        color: white;
        font-weight: bold;
        font-size: 30px;
        text-shadow: 1px 2px grey;

    }

    #tekstHome2{
        position: relative;
        bottom: 340px;
        left: 430px;
        color: white;
        font-weight: bold;
        font-size: 30px;
        text-shadow: 1px 2px grey;
    }

    #tekstHome3{
        position: relative;
        bottom: 330px;
        left: 330px;
        color: white;
        font-weight: bold;
        font-size: 30px;
        text-shadow: 1px 2px grey;


    }

    #afbeeldingKnop{
        position: relative;
        background-color: dodgerblue;
        font-weight: bold;
        width: 30%;
        height: 40px;
        border: 8px turquoise;
        bottom: 330px;
        left: 420px;
        border-radius: 12px;
    }

    #homeAfbeelding{
        max-width: 100%;
        height: 400px;

    }

    #rijschoolTekst{
        text-align: center;
    }

    #titelReden{
        display: flex;
        justify-content: space-between;
        position:relative;
    }

    #tekstReden{
        display: flex;
        justify-content: space-between;
    }

    #r1{
        left: 110px;
        position: relative;
        color: gold;

    }

    #r2{
        right: 105px;
        position: relative;
        color: gold;

    }

    #a1{
        max-width: 500px;
        position: relative;
        left: 30px;
    }

    #a2{ 
        max-width: 500px;
        position: relative;
        right: 30px;
     }


     #titelReden2{
        display: flex;
        justify-content: space-between;
     }

    #tekstReden2{
        display: flex;
        justify-content: space-between;
    }
     #r3{
        left: 70px;
        position: relative;
        color: gold;

     }

     #r4{
        right: 190px;
        position: relative;
        color: gold;

     }

     #a3{
        max-width: 500px;
        position: relative;
        left: 30px;
     }

     #a4{
        max-width: 500px;
        position: relative;
        right: 30px;
     }


     #containerHome{
        bottom: 240px;
        position: relative;
     }

Answer 1

对此最快的解决方案是在您的项目中添加引导程序。您可以按照添加字体真棒CDN链接的相同方式添加它。一旦添加了引导程序，就可以使用其网格结构来照顾响应性。通过使用引导程序，可以使它响应所有分辨率。要检查响应速度，可以在浏览器的检查器中使用移动视图。要研究botstrap，请检查以下链接：

https://getbootstrap.com/docs/4.0/layout/grid/

Answer 2

您可以使用媒体查询来使站点响应。通过以下链接获得更好的解释 Responsive web design using media queries

关于图像部分，只需添加img{max-width:100%}，以便它将根据视口在所有类型的设备上进行调整。

Answer 3

除了Tayyab Ullah的答案之外：Bootstrap是一个有针对性的框架，即它带有许多预定义的组件，颜色，大小等。

如果您想依靠自己的设计，还可以使用不受约束的框架，例如Kickoff和Tailwind，它们也更轻巧。

使网站具有响应能力？

3 个答案: