2017-01-26 8 views
0

私はスライドショーにテキストを入力してフォントのサイズを反応させようとしています。私が達成しようとしているものにかなり類似しているレスポンシブなフォントサイズを作成するには

How to create responsive text on top of an image?

:私はこの質問を見つけました。私はそれに取り組んでいて、フォントサイズとラインの高さのパーセンテージを利用していますが、何もしていないようです。これまでのところ私のコードは次のようになります。

HTML:

<div> 
<div> 
    <div class="ec_slideshow"> 
    <ul class="bxslider"> <!--slideshow that I found on the interwebz--> 
    <li><div class="ec_slidecontainer"> 
    <img src="http://enviroptics.com/Matt/Transparent%20photos%20in%20progress/Vision_System_Flow_Cell_1200x400.png" alt=""/> 

    <!--This is the text that I want to be responsive--> 
    <h2 class="ec_slidecontent"><span>Bubble Analysis<br/>Possible Subtext</span></h2> 
    <!--End of text that I want to be responsive--> 

    </div></li> 
    </ul> 

CSS:このページで起こって他のHTML要素とCSSやJSのものがあります

.ec_slideshow { 
    width: auto; 
    max-width: 1200px; 
    height: auto; 
    border: 2px solid black; 
    /*background-color: cyan;*/ 
    text-align: center; 
    font-size: 20px; 
    margin: 20px auto 0px auto; 
    padding-bottom: 0px; 
    z-index: 1 !important; 
    } 

    .ec_slidecontent span { 
    position: absolute !important; 
    top:   0px; 
    left:  30%; 
    font-family: 'roboto' !important; 
    font-size: 100% !important; 
    color:  #fff !important; 
    padding:  3px 10px !important; 
    width:  40% !important; 
    line-height: 100% !important; 
    background: rgb(0, 0, 0); 
    background: rgba(0, 0, 0, 0.7); 
    } 

    .ec_slidecontent { 
    margin: 0px !important; 
    padding: 0px !important; 


    .ec_slidecontainer img { 
    position: relative; 
    width: 100%; /* for IE 6 */ 
    } 

ので、おそらく何かのフォント関連が他の場所から継承されているか、あるいは私が何をしているのか分かりません。いずれにしても、このページhttp://www.enviroptics.com/envirocam.htmlを見て、ウィンドウのサイズを変更して何が起こっているのかを知ることが一番簡単です。

+0

JavaScriptを使用してjQueryを使用することはできますか? – minorcase

+0

ツールを見て、正しい要素を実際にターゲティングしているわけではありません。開発ツールを使用すると、 'font-size'がこの' #rot#rot_ctr1_bod_ctr3_bod_wrp1 h2' – zik

+0

@minorcaseによって上書きされていることがわかります。私はjavascriptを使うことができ、私はjQueryを最大1.11まで使えると信じています –

答えて

0

フォントサイズにピクセルを使用しないでください。ピクセルではなく、em、remまたは%ベースの値を試してください。あなたもここでhttps://www.sitepoint.com/understanding-responsive-web-design-how-to-manage-fonts/

+0

さて、ピクセルのフォントサイズを避けようとしている。私がec_slideshowクラスからfont-sizeを取り除いても、上記の@Kizに記載されているidからフォントサイズを取り除いても、それはまだ何かによって書かれているようです。 –

0

このリンクを参照することができ

は、私がこのような状況のために過去に使用しているヘルパー関数です。 jQueryが動作させるために必要な番号を取得できることを願っています!これにより、rems(htmlフォントサイズに基づいていることを意味する)のフォントサイズを設定し、html要素フォントを変更して画面のサイズを変更することができます。 ScreenWidthは、ブラウザウィンドウの幅またはコンテンツを含む要素の幅のいずれかになります。

function getFontSize(screenWidth) { 
    "use strict"; 
    var fontSize = 10, // this is the base font size. All other sizes are computed based on this number 
     maxWidth = 1024, // max size of content on a page 
     minSize = 5;  // smallest base font size allowed 

    if (screenWidth < maxWidth) { 
     // font size is computed by the ratio of screenWidth to maxWidth 
     fontSize = Math.max((screenWidth/maxWidth) * fontSize, minSize); 
    } 

    return fontSize; //font-size is then applied to the html element of your page 
} 
+0

これは良いことです。私はJquery/Javascriptであまりよく知られていません。私は入力(ScreenWidth)と出力(fontSize)で何をするのか正確に教えていただけますか?つまり、ブラウザの幅や要素の幅をHTMLの入力値 'ScreenWidth'に設定するにはどうすればよいですか? –

+0

'screenWidth = window.innerWidth' ' $( "html")。css( "font-size"、getFontSize(screenWidth)) ' 要素を取得する必要がある場合は、http:// apiを参照してください。 jquery.com/width/ 基本的にscreenWidth = '$(" <要素セレクタ> ")のようになります。width()' 次に、上記のように関数を再度呼び出します。 – minorcase

+0

ありがとう、私はそれを追加しましたが、私は使用しているものと互換性があるとは思わない:(しかし、 –

関連する問題