链接移动视图由大到小

所以我努力让我的一些诗有一个电子书风格布局的网上组合。我在移动视图中有一个奇怪的问题，我似乎无法修复。在“确认”页面上，链接文字比常规文字小。我在这些链接中使用了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="http://rads.stackoverflow.com/amzn/click/B00FDWVIHO" 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>

来源

2017-07-02 Wirginia Voolf

您可以使用@media查询在CSS改变取决于屏幕的大小的页面的布局。

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

你基本上只需粘贴你所有的CSS代码，您希望根据屏幕大小改变，只是改变的值;在这种情况下，请粘贴CSS并参考链接，然后更改'font-size：12px'值。

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

编辑：

您正在使用的字体大小的值都非常小，加上了8px将是非常小的，无论屏幕尺寸是什么。我倾向于在手机屏幕上保留10-12px的标准文本;取决于它是什么。

来源

2017-07-02 21:30:20 MHamer5

谢谢！这解决了链接大小问题。从另一篇文章中获得的小字体大小表示这些字体适合不同的屏幕尺寸。 –

链接移动视图由大到小

回答

相关问题