html - 移动 View 中的链接尺寸缩小

Question

因此，我正在努力制作一个在线作品集，其中包含我的一些诗歌，其布局受电子书启发。我在移动 View 中遇到一个奇怪的问题，我似乎无法完全解决。在“致谢”页面上，链接文本比常规文本小。我在这些链接中使用 ID 标签，以便它们的格式不同(标题为斜体，出版物为粗体)。将此位添加到标题会使所有文本的大小相同:

<style>

body {
    -webkit-text-size-adjust: 100%
}

</style>

问题是整个页面显示得比我想要的要小，而且我认为在屏幕上阅读起来更困难。

我意识到的另一件事是所有链接都可能存在问题，但这些是唯一值得注意的链接，因为它们嵌入了常规文本(而其他链接则没有)。我已经尝试了我能想到的所有方法，但无法修复它，但这也是我第一次使用 @media 标签，所以我确定我遗漏了一些东西。

关于造成这种情况的原因有什么想法吗？这是 a live link到页面，这样你就可以看到我在说什么，我在下面包含了一些代码。

这是 CSS:

    /* color reference

  lilac - #D8BFD8
  dark gray - #74756a

*/




/* cover */

#moon {

  width: 300px;
  height: 300px;
  border-radius: 50%;
  box-shadow: 30px 15px 3px 0 #D8BFD8;
}



#title {
      font-family: "Geo";
    font-size: 92px;
    color: #74756a;
    letter-spacing: 40px;
    text-transform: uppercase;
    text-shadow: -2px 0 1px rgba(255,0,255,0.5) , 0px 0 1px rgba(155,155,155,0.5) ;
    display: inline-block;

}

#by {
    font-family: "Geo";
    font-size: 24px;
    color: #74756a;
    /* font-weight: lighter; */
    letter-spacing: 20px;
    text-transform: none;

        /*taller*/
    display: inline-block;
    transform: scaleY(1.1);  
}

.button {
  font-family: "Geo";
  border-radius: 4px;
  background-color: transparent;
  border: none;
  color: #D8BFD8;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button a {
  font-family: "Geo";
  border-radius: 4px;
  background-color: transparent;
  border: none;
  color: #D8BFD8;
  text-align: center;
  font-size: 28px;
}


.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}


.splash {background: linear-gradient(266deg, #4e0846, #9f8c98, #d8d8bf, #ffffff);
background-size: 800% 800%;

-webkit-animation: AnimationName 30s ease infinite;
-moz-animation: AnimationName 30s ease infinite;
animation: AnimationName 30s ease infinite;}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 51%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 51%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName { 
    0%{background-position:0% 50%}
    50%{background-position:100% 51%}
    100%{background-position:0% 50%}
}

/* Body Fonts */

@font-face {
    font-family: Geo;
    src: url(geo.ttf);
}

body {
    font-size: 18px;
}

p {
  font-family: "Geo";

  text-align: left;
  margin-left: auto;
  margin-right: auto;
  width: 30em;

}





/* TOC, Coming Soon & Acknowledgements */

p#contents {
  font-family: "Geo";
  text-align: left;
  margin-left: 40%;
  width: 100em;

}



a#ack {
    text-decoration: none;
    font-family: "Geo";
    font-weight: lighter;
    font-style: italic;
    color: #74756a;

}

a#ack:hover {
   color: #D8BFD8;
}

}

#low {

  font-family: "Geo";
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10%;
  width: 30em;
}

a#soon {
    text-decoration: none;
    font-weight: bold;
    color: #74756a;
    padding: 0;
}

 a#soon:hover {
    color: #D8BFD8;
}





/* headers */

h1 {
    display: inline;
    font-family: "Geo";
    font-size: 42px;
    color: #74756a;
    /* font-weight: lighter; */
    letter-spacing: 10px;
    text-transform: uppercase;

    text-shadow: -2px 0 1px rgba(255,0,255,0.5) , 0px 0 1px rgba(155,155,155,0.5) ;

        /*taller*/
    display: inline-block;
    transform: scaleY(1.1);


}

h2 {
    display: inline;
    font-family: "Geo";

    color: #74756a;
    font-weight: lighter; 
    letter-spacing: 3px;

}


h3 {
    display: inline;
    font-family: "Geo";
    font-size: 34px;
    color: #74756a;
    font-weight: lighter; 
    letter-spacing: 3px;


}


h4{
  text-align: center;
  font-family: "Geo";

  color: #74756a;
}

/* Arrows */

#left {
    position: absolute;
    top: 50%;
    left: 5%;
    -moz-transform: translateX(-5%) translateY(-50%);
    -webkit-transform: translateX(-5%) translateY(-50%);
    transform: translateX(-5%) translateY(-50%);
}

#right {
    position: absolute;
    top: 50%;
    right: 5%;
    -moz-transform: translateX(-5%) translateY(-50%);
    -webkit-transform: translateX(-5%) translateY(-50%);
    transform: translateX(-5%) translateY(-50%);
}

a {
    text-decoration: none;
    font-family: "Geo";
    font-weight: bold;
    display: inline-block;
    color: #74756a;
}

a:hover {
    color: #D8BFD8;

}


}

.round {
    border-radius: 50%;
}


/* Social Media Icons */

.header {
  text-align: center;
}

#menu-outer {
  height: 25px;
  background: url(images/bar-bg.jpg) repeat-x;
}

.table {
  display: table;   /* Allow the centering to work */
  margin: 0 auto;
}

ul#social-media-list{
  min-width: 300px;
  list-style: none;
  padding-top: 5px;
  }

ul#social-media-list li {
  display: inline;
}

ul#social-media-list a:hover {
  border-bottom: 5px solid #D8BFD8;
  border-right: 5px solid #D8BFD8;
}




/*Formal Anomolies<*/

.jty {

      text-align: justify;
      text-indent: 0;
  font-family: "Geo";


}


.ery {

  font-family: "Geo";

  text-align: left;
  margin-left: 35%;

}


/*mobile*/

@media (min-width: 858px) {
    html {
        font-size: 12px;
    }


}

@media (min-width: 780px) {
    html {
        font-size: 11px;
    }


}

@media (min-width: 702px) {
    html {
        font-size: 10px;
    }


}

@media (min-width: 724px) {
    html {
        font-size: 9px;
    }


}

@media (max-width: 623px) {
    html {
        font-size: 8px;
    }



}

这是 HTML:

<html>
<head>
<title>Stephanie Lane Sutton | Acknowledgements</title>
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
<meta name="viewport" content="initial-scale=0.50, maximum-scale=3, width=device-width, user-scalable=yes" />
<link rel="stylesheet" href="ebook.css" type="text/css">

<!DOCTYPE html 
      PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon" 
      type="image/png" 
      href="flwr.png">


<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="functions.js"></script>

<style>

    body {
        -webkit-text-size-adjust: 100%
    }

</style>

</head>
<body>
<div id="wrapper">
<center><h3>Acknowledgements</h3>
</center>
<p><br>
Thanks to the following publications which first published these poems: 

<br><br><br>
<a href="murmuration.html" id="ack">Murmuration</a> and <a href="spit.html" id="ack">Spit</a> were originally published in <a href="http://arseniclobster.magere.com/archive/issuefortyone/index.html" id="soon">Arsenic Lobster</a>. <br><br>

<a href="hyperv.html" id="ack">Hypervigilance (w/ Emily Dickinson)</a> was originally published in <a href="https://rads.stackoverflow.com/amzn/click/com/B00FDWVIHO" rel="nofollow noreferrer" id="soon">Day One</a>. <br><br>

<a href="death.html" id="ack">Death Visits as Often as a Distant Relative</a> was originally published in <a href="http://districtlit.com/post/112434612956/sutton" id="soon">District Lit</a>.<br><br>

<a href="er.html" id="ack">Emergency Department Aftercare Instructions</a> is forthcoming in <a href="http://www.dreampoppress.net/" id="soon">Dream Pop Press</a>. <br><br>

<a href="transitive.html" id="ack">A Transitive Verb</a> was originally published in <a href="http://www.cooprenner.com/2012/11/Trans.html" id="soon">elimae</a>.<br><br>

<a href="slammer.html" id="ack">Slammer</a> was originally published in <a href="https://thefemlitmagazine.wordpress.com/2015/11/26/slammer-stephanie-lane-sutton/" id="soon">The Fem</a>.</br><br>

<a href="loureed.html" id="ack">The Day Lou Reed Died</a> was originally published in <a href="http://www.freezeraypoetry.com/stephanie-lane-sutton.html" id="soon">FreezeRay Poetry</a><br><br>

<a href="revocation.html" id="ack">Revocation</a> was originally published in <a href="http://www.heartjournalonline.com/stephanie/" id="soon">HEArt Journal Online</a>.<br><br>

<a href="afterall.html" id="ack">After All</a> is forthcoming in <a href="http://www.littletell.org/" id="soon">littletell</a>.<br><br>

<a href="band.html" id="ack">In Middle School Band</a> was originally published in <a href="http://www.moonsickmagazine.com/two-poems-by-stephanie-lane-sutton.html" id="soon">Moonsick Magazine</a><br><br>

<a href="eurydice.html" id="ack">Eurydice In Hell</a> was originally published in <a href="http://www.thrushpoetryjournal.com/september-2014-stephanie-lane-sutton.html" id="soon">THRUSH Poetry Journal</a>. <br><br>

<a href="hysteria.html" id="ack">Hysteria</a> was originally published in <a href="http://www.tinderboxpoetry.com/hysteria" id="soon">Tinderbox Poetry Journal</a>.<br><br>





<center><a href=index.html>&#8962;</a></center>



</p>

<div id="left"><a href="er.html" class="previous round">&#8249;</a></div>

</div>
<br><br>
<br><br>



</div>

<div id="social-media-list">
  <div class="table">
    <ul id="social-media-list">

        <li>
            <a href=http://www.facebook.com/stephanielanesutton><img src=facebook.png></a> 
        </li>

        <li>
            <a href=http://twitter.com/StephanieLaneS><img src=twitter.png></a> 
        </li>

        <li>
            <a href=http://www.instagram.com/disorderliness/><img src=instagram.png></a> 
        </li>

        <li>
            <a href=http://github.com/wirginiavoolf><img src=github.png></a> 
        </li>

    </ul>





</div>




</body>

Answer 1

您可以在 CSS 中使用 @media 查询来根据屏幕大小更改页面布局。

@media screen and (min-width: 480px) {
    a { 
        font-size: 12px
    }
}

您基本上只需粘贴所有您希望根据屏幕尺寸更改的 CSS 代码，然后更改值即可；在这种情况下，粘贴引用您的链接的 CSS 并仅更改“字体大小:12px”值。

这将允许您在最终用户浏览器屏幕为 480 像素或更小时调整文本大小。如果您想对平板设备执行相同的操作，请使用 768px。

编辑:

您为字体大小使用的值非常小，无论屏幕大小如何，8px 都将非常小。对于移动屏幕上的标准文本，我倾向于坚持使用 10-12 像素；取决于它是什么。