Javascript 如何在手机上使h1报头更具响应性_Javascript_Html_Css

Javascript 如何在手机上使h1报头更具响应性

javascript html css

Javascript 如何在手机上使h1报头更具响应性,javascript,html,css,Javascript,Html,Css,我有这个网站：https://acanhs.org该网站看起来棒极了，但这种情况发生在手机上文本框标题占据了大部分空间。我能做些什么来解决这个问题这是我的html： <body> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+Ibb

我有这个网站：

https://acanhs.org

该网站看起来棒极了，但这种情况发生在手机上

文本框标题占据了大部分空间。我能做些什么来解决这个问题

这是我的html：

<body>
    <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.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
    
    <img src="logo.png" width="100" height="100" alt="HTML tag">
    <p class="bluebackground">&emsp;</p>
    <nav>
        <ul class="nav">
          <li class="navlist"><a class="active" href="index.html">Home</a></li>
          <li class="navlist"><a class="active" href="boyshome.html">Boys Campus</a></li>
          <li class="navlist"><a class="active" href="girlshome.html">Girls Campus</a></li>
          <li class="navlist"><a class="active" href="calculator.html">GPA Calculator</a></li>
        </ul>
    </nav>
    <p class="bluebackground">&emsp;</p>
    <br>
    <div class="w3-content w3-section responsive">

        <div class="mySlides w3-animate-top responsive" style="--background-image: url('homepagepictures/81463156_472179973704673_8295529433598935850_n(1).jpg')" >
        </div>

        <div class="mySlides w3-animate-bottom responsive" style="--background-image: url('homepagepictures/097f1e08-ebfe-434a-bc68-8020d02cee6e.JPG')">
        </div>

        <div class="mySlides w3-animate-top responsive" style="--background-image: url('homepagepictures/8291878a-b5ad-4003-8cc6-de7baafd84a0.JPG')">
        </div>
        
        <div class="mySlides w3-animate-bottom responsive" style="--background-image: url('homepagepictures/27890996_211176766129569_6923967286697000960_n.jpg')">
        </div>
        
        <div class="mySlides w3-animate-top responsive" style="--background-image: url('homepagepictures/42914143_364663130939605_1259772328364992140_n.jpg')">
        </div>

        <div class="mySlides w3-animate-bottom responsive" style="--background-image: url('homepagepictures/42947322_373232869884042_7326776160519321694_n.jpg')">
        </div>

        <div class="mySlides w3-animate-top responsive" style="--background-image: url('homepagepictures/44689929_944494762409958_8911408401400786089_n.jpg')">
        </div>

        <div class="mySlides w3-animate-bottom responsive" style="--background-image: url('homepagepictures/fd2b6c09-19b7-42ad-b7fb-bce6dc983690.JPG')">
        </div>

        <div class="mySlides w3-animate-top responsive" style="--background-image: url('homepagepictures/IMG_6922.jpg')">
        </div>

        <div class="mySlides w3-animate-bottom responsive" style="--background-image: url('homepagepictures/IMG_6932.jpg')" >
        </div>


    </div>
    <br>
    <br>
    <script src="slideshow.js"></script>
    <style>.sameborder
        {
            background-color:#F0E68C;
            width: 1200px;
            border: 10px solid;
            padding: 20px;
            margin: 20px;
        }</style>
    <center>
    <div class="sameborder">
        <h1 class="Welcome responsive">Welcome To The National </h1>
        <h1 class="Welcome responsive">Honor Society Website!</h1>
        
    </div>
    </header>
    <br>
    </center>
    <h3 class="message" style="margin-left: 20px;">Our Message</h3>
    <h3 id="messagetext" align="justify" class="wiki-content">&emsp;&emsp;"Long before National Honor Society was available in the American Creativity Academy, students sought after an opportunity to create, inspire, and open the doors for creativity. With a heritage of respect to individuality and personal interest, the National Honor Society offered a platform for creation and student ingenuity. Today, the dream of a boy and a girl who grew between the walls of ACA turned into reality: they can finally create and enjoy creation for a respected audience!</h3>
    <h3 id="messagetext" align="justify" class="wiki-content">&emsp;&emsp;The National Honor Society is a community by students within the campus that works towards creating a better school and local environment. We believe that every act of kindness, no matter how insignificant it may seem, has a drastic impact on a person and starts a ripple of kind-hearted acts among the people. The NHS creates opportunities for its members in volunteering within and off the campus and raising awareness for global issues, which makes them more productive, responsible, and engaged citizens. We try to make a difference by inspiring and supporting the people around us whenever we can.</h3>
    <h3 id="messagetext" align="justify" class="wiki-content">&emsp;&emsp;The NHS team is more than all of its members; although the impact of one person is limited, working as a team allows us to achieve our goal and leave behind a great mark. We envision a kinder society where people are keen on helping others, and will work until that vision is achieved."</p>
    <h3 id="messagetext" align="justify" class="wiki-content">- By the NHS Team</h3>


&emsp






&emsp






sameborder先生
{
背景色：#F0E68C；
宽度：1200px；
边界：10px固体；
填充：20px；
利润率：20px；
}
欢迎来到国家公园
荣誉协会网站！


我方文电
&emsp&emsp；“早在美国创意学院成立国家荣誉协会之前，学生们就一直在寻找机会来创造、激励和打开创造力之门。国家荣誉协会秉承尊重个性和个人兴趣的传统，为创造和学生创造力提供了一个平台。如今，一个在ACA的墙壁之间成长的男孩和女孩变成了现实：他们终于可以为受尊敬的观众创造并享受创造！
&emsp；&emsp；国家荣誉协会是一个由校园内的学生组成的社区，致力于创造一个更好的学校和当地环境。我们相信，每一个善意的行为，无论看起来多么微不足道，都会对一个人产生巨大的影响，并在人们中间引发一连串善意的行为。NHS创造了机会我们鼓励其成员在校内和校外开展志愿活动，提高对全球问题的认识，这使他们更富有成效、更负责任、更积极参与。我们尽可能地通过激励和支持周围的人，努力有所作为。
&NHS团队比所有成员都重要；虽然一个人的影响力有限，但团队合作让我们能够实现目标并留下好成绩。我们设想一个更友善的社会，人们乐于帮助他人，并将努力工作，直到实现这一愿景。”
-由NHS团队提供

如何使标题适合屏幕，而不强制用户缩小以查看文本？

似乎是将

设置为1200px引起了问题。建议将其改为一个百分比（可能宽度：80%）。
只需在Css中添加以下内容：
.same border h1{

font-size: 2vh; /* Can change value as per your choice..  */

/*  That's It! */

}


我想那会有用的。
你没有精确，但我想问题不在于文本的大小，而在于标题的宽度。因此，我建议您以这种方式进行管理：

在中心添加一个类
以设置宽度：100%在上面

将您的类sameborder
设置如下：

演示：

正文{
保证金：0；
}
.sameborder集装箱{
宽度：100%；
}
sameborder先生{
背景色：#F0E68C；
最大宽度：1200px；
宽度：100%；
边界：10px固体；
填充：20px；
保证金：自动；
框大小：边框框；
字体大小：2vw；
}

&emsp






&emsp






欢迎来到国家公园
荣誉协会网站！


我方文电
&emsp&emsp；“早在美国创意学院成立国家荣誉协会之前，学生们就一直在寻找机会来创造、激励和打开创造力之门。国家荣誉协会秉承尊重个性和个人兴趣的传统，为创造和学生创造力提供了一个平台。如今，一个在ACA的墙壁之间成长的男孩和女孩变成了现实：他们终于可以为受尊敬的观众创造并享受创造！
&emsp；&emsp；国家荣誉协会是一个由校园内的学生组成的社区，致力于创造一个更好的学校和当地环境。我们相信，每一个善意的行为，无论看起来多么微不足道，都会对一个人产生巨大的影响，并在人们中间引发一连串善意的行为。NHS创造了机会我们鼓励其成员在校内和校外开展志愿活动，提高对全球问题的认识，这使他们更富有成效、更负责任、更积极参与。我们尽可能地通过激励和支持周围的人，努力有所作为。
&NHS团队比所有成员都重要；虽然一个人的影响力有限，但团队合作让我们能够实现目标并留下好成绩。我们设想一个更友善的社会，人们乐于帮助他人，并将努力工作，直到实现这一愿景。”
-NHS团队指出，问题在于CSS样式中，您实际上指定了sameborder类的像素宽度。（1200像素）
相反，您可以尝试将其相应地设置为设备的宽度。您可以使用百分比来完成，如下所示：
.sameborder
        {
            background-color:#F0E68C;
            
            /* width: 1200px; */
            /* try this one: */
            
            width: 90%; 
            
            /* You will see if it fits 
            the screen or maybe you should do 
            less percentage*/
            
            border: 10px solid;
            padding: 20px;
            margin: 20px;
        }

这是行不通的。国际空间站
.sameborder
        {
            background-color:#F0E68C;
            
            /* width: 1200px; */
            /* try this one: */
            
            width: 90%; 
            
            /* You will see if it fits 
            the screen or maybe you should do 
            less percentage*/
            
            border: 10px solid;
            padding: 20px;
            margin: 20px;
        }