Links Größe in der mobilen Ansicht

Question

Also arbeite ich an einem Online-Portfolio von einigen meiner Gedichte, die eine E-Book-inspirierte Layout hat. Ich habe ein seltsames Problem in der mobilen Ansicht, das ich nicht ganz beheben kann. Auf der Seite "Danksagungen" ist der Linktext kleiner als normaler Text. Ich verwende ID-Tags mit diesen Links, so dass sie anders formatiert sind (Titel sind kursiv, Publikationen sind fett). Durch Hinzufügen dieses Bit zu dem Header macht der Text alle die gleiche Größe:

<style> 

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

</style> 

Das Problem ist, dass dann die gesamte Seite zeigt kleiner als Ich mag würde es, und ich denke, dass es schwieriger ist, auf einem Bildschirm zu lesen . Die andere Sache, die ich erkannte, ist, dass es möglicherweise ein Problem mit allen Links gibt, aber diese sind die einzigen, die bemerkbar sind, da sie mit normalem Text eingebettet sind (während die anderen nicht sind). Ich habe alles ausprobiert, was ich mir vorstellen kann und kann es nicht beheben, aber dies ist auch das erste Mal, dass ich die @ media-Tags verwende, also bin ich mir sicher, dass mir etwas fehlt.

Irgendwelche Ideen, was verursacht dies? Hier ist a live link auf der Seite, damit Sie in der Lage sein zu sehen, worüber ich spreche, und ich schließe Code unten ein.

Hier ist die 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; 
    } 



} 

Und hier ist der 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> 

Answer 1

Sie können @media Abfragen in CSS ändern das Layout der Seite abhängig von der Größe des Bildschirms verwenden.

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

Sie fügen im Grunde nur alle Ihre CSS-Code, die Sie je nach Bildschirmgröße ändern möchten und nur die Werte ändern; In diesem Fall fügen Sie das CSS ein, indem Sie auf Ihre Links verweisen und ändern Sie einfach den Wert "font-size: 12px".

Damit können Sie die Größe des Textes ändern, wenn der Browser des Endbenutzers 480px oder weniger ist. Wenn Sie dasselbe für Tablet-Geräte tun möchten, verwenden Sie 768px.

Edit:

Die Werte Sie für die Schriftgröße verwenden, sind sehr klein, wird 8px sehr klein sein, egal, was die Bildschirmgröße ist. Ich bleibe bei 10-12px für Standardtext auf mobilen Bildschirmen; davon abhängig, was es ist.