テキストのサイズを変更したり、CSSを移動しないようにしたい

CTRL +または - を使用すると、その下の画像のようにテキストが影響を受けないようにしたいと考えています。私はウェブキットを試しましたが、ピクセル値ではなくパーセント値を使用していましたが、うまくいきません。テキストのサイズを変更したり、CSSを移動しないようにしたい

.header { 
 
     background-color: #FFFFFF; 
 
     height: 7%; 
 
     position: fixed; 
 
     top: 0; 
 
     left: 0; 
 
     width: 100%; 
 
     box-shadow: 0px 5px 10px #424242; 
 
    } 
 
    
 
    .body { 
 
     margin: 0; 
 
     -webkit-text-size-adjust: 0; 
 
    } 
 
    
 
    .main { 
 
    } 
 
    
 
    .hub { 
 
     margin-left: 10%; 
 
     margin-right: 10%; 
 
    } 
 
    @font-face { 
 
     font-family: coolvetica; 
 
     src: url("font/coolvetica rg.ttf"); 
 
    } 
 
    
 
    .title { 
 
     font-family: coolvetica; 
 
     font-size: x-large; 
 
     line-height: 180%; 
 
     margin-top: 0.35%; 
 
     margin-bottom: 0.35%; 
 
     height: 80%; 
 
     left: 1%; 
 
     position: absolute; 
 
     display: inline-block; 
 
     vertical-align: top; 
 
     overflow: hidden; 
 
    } 
 
    
 
    .navbar { 
 
     position: fixed; 
 
     top: 2%; 
 
     left: 14%; 
 
     list-style-type: none; 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    
 
    .item { 
 
     display: inline; 
 
     float: left; 
 
    } 
 
    
 
    .label { 
 
     color: black; 
 
     text-decoration: none; 
 
     padding: 8px; 
 
    } 
 
    
 
    .title-box { 
 
     height: 100%; 
 
     line-height: 100%; 
 
    }

<html> 
 
    <head> 
 
     <title>TheShieldNetwork</title> 
 
     <link href="style.css" rel="stylesheet"> 
 
    </head> 
 
    <body class="body"> 
 
     <div class="header"> 
 
      <p class="title">TheShieldNetwork</p> 
 
      <ul class="navbar"> 
 
       <li class="item"><a class="label" href="default.asp">Home</a></li> 
 
       <li class="item"><a class="label" href="news.asp">News</a></li> 
 
       <li class="item"><a class="label" href="contact.asp">Contact</a></li> 
 
       <li class="item"><a class="label" href="about.asp">About</a></li> 
 
      </ul> 
 
     </div> 
 
     <div class="main"> 
 
      <img class="hub" width="80%" height="80%" src="img/background.png" alt="Hub"> 
 
     </div> 
 
    </body> 
 
</html>

あなたはwww.theshieldnetwork.comのウェブサイトを見ることができます。どのように私はそれを修正することができるだろうという考えを持っていますか？

出典

2016-06-01 Reese Collins

それはイメージです。そのトリックはイメージでのみ機能します。 – Gusman

テキストをイメージのように振る舞う方法はありますか？ @Gusman –

いいえ、 – Gusman

Ctrl + ORはズームイン/アウトするブラウザの方法です。これは特に人を助けるためのものです（高齢者など）。

クロム（WebKitが）バージョンまでをサポート：28.0.1500.11

-webkit-text-size-adjust: none; 
-webkit-text-size-adjust: 100%

しかし、これは私の知る限りのiOSでサポートされるようになりましたので、クロムは、単にそれを無視してと呼ばれるものを使用し続けますfont boosting

解り易いですが、解決策があります。親要素の1つの要素の高さを最大高さに設定すると、この問題が解決されるようです。例えば：

<div class="outer"> 
    <ul>  
     <li>This is a simple list</li> 
     <li>With list items that get scaled</li> 
     <li>How annoying!</li> 
    </ul> 
</div>

CSS：

.outer { 
     max-height: 5000em; 
    }

これは、問題を解決するようです。それは理想的ではないが。

あなたはいつでも画像ですべてのテキストを置き換えることができます。理想的ではありません。

出典

2016-06-01 05:05:09

テキストのサイズを変更したり、CSSを移動しないようにしたい

答えて

関連する問題