2017-07-02 67 views
0

所以我努力讓我的一些詩有一個電子書風格佈局的網上組合。我在移動視圖中有一個奇怪的問題,我似乎無法修復。在「確認」頁面上,鏈接文字比常規文字小。我在這些鏈接中使用了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> 

回答

0

您可以使用@media查詢在CSS改變取決於屏幕的大小的頁面的佈局。

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

你基本上只需粘貼你所有的CSS代碼,您希望根據屏幕大小改變,只是改變的值;在這種情況下,請粘貼CSS並參考鏈接,然後更改'font-size:12px'值。

這將允許您調整文本時,最終用戶的瀏覽器屏幕480像素或更低。如果您想對平板電腦設備執行相同操作,請使用768px。

編輯:

您正在使用的字體大小的值都非常小,加上了8px將是非常小的,無論屏幕尺寸是什麼。我傾向於在手機屏幕上保留10-12px的標準文本;取決於它是什麼。

+0

謝謝!這解決了鏈接大小問題。從另一篇文章中獲得的小字體大小表示這些字體適合不同的屏幕尺寸。 –