Using Bootstrap, but Text not Responsive

问题:

I am working on a school project : http://lauralynn87.github.io/WSP/Project/index.html

and I am using the framework Bootstrap 3.0 - and almost everything is responsive, but the text.

I've tried using percentages and ems for font sizes..but nothing is working. I know I'm missing something, but can't figure it out.

Any help is appreciated.

Thanks.

回答1:

Fonts are not responsive if you use % or em etc.

If you want to change the size of your font on different screen/window sizes, you have to use media queries in CSS.

For example:

@media all and (max-width: 1200px) { /* screen size until 1200px */     body {         font-size: 1.5em; /* 1.5x default size */     } } @media all and (max-width: 1000px) { /* screen size until 1000px */     body {         font-size: 1.2em; /* 1.2x default size */         }     } @media all and (max-width: 500px) { /* screen size until 500px */     body {         font-size: 0.8em; /* 0.8x default size */         }     } 

The numbers are of course only examples.

回答2:

Here is a mobile first css snippet for screen only using Bootstrap device sizes. Comments:

• Bootstrap does not scale typography in response to display size changes.
• Do you really want the same font size on a 27" monitor as a smart phone? I see several good designs where different font sizes for different screens make sense. Testing will prove your design right or wrong.
• Do you really want screen and print font sizes to be the same? Screen and print are different beasts. If you care about printing, you should test it separately.
• The font scaling I use below is arbitrary - no magic there.

.

/* xs < 768 */ @media screen and (max-width: 767px) {     body {         font-size: 0.9em;     } }  /* sm */ @media screen and (min-width: 768px) {     body {         font-size: 1em;     } }  /* md */ @media screen and (min-width: 992px) {     body {         font-size: 1.2em;     } }  /* lg */ @media screen and (min-width: 1200px) {     body {         font-size: 1.3em;     } } 

A jsfiddle that shows the effects: https://jsfiddle.net/stevetarver/9a8ym3hL/embedded/result/. Note that the media queries are only changing th, td font sizes, not body as shown above.

回答3:

I would suggest Fittext jQuery plugin to make all the text responsive by default. It requires only 2 js files and a single line of jQuery code.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="jquery.fittext.js"></script> <script type="text/javascript">   $(document).ready(function(){           $("body").fitText();   }); </script> 

Refer Fittext

回答4:

you can use Viewport Sized Typography.

h1 {   font-size: 5.9vw; } h2 {   font-size: 3.0vh; } p {   font-size: 2vmin; } 

the text size changes according to the view port (browser's width and height).

more details https://css-tricks.com/viewport-sized-typography

Demo : https://css-tricks.com/examples/ViewportTypography/

回答5:

add your own media queries to change the font size depending on the screen size. see here

文章来源: Using Bootstrap, but Text not Responsive