可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
I've created a site using the Zurb Foundation 3 grid. Each page has a large h1.
CSS
body {font-size:100%} /* Headers */ h1 { font-size:6.2em;font-weight:500; }
HTML
<div class="row"> <div class="twelve columns text-center"> <h1> LARGE HEADER TAGLINE </h1> </div><!-- End Tagline --> </div><!-- End Row -->
When I resize the browser to mobile size the large font doesn't adjust and causes the browser to include a horizontal scroll to accomodate for the large text.
I've noticed that on the Zurb Foundation 3 Typography example page, the headers adapt to the browser as it is compressed and expanded.
Am I missing something really obvious? How do I achieve this?
回答1:
The font-size won't respond like this when resizing the browser window. Instead they respond to the browser zoom/type size settings, such as if you press ctrl and + together on the keyboard while in the browser.
Media Queries
You would have to look at using media queries to reduce the font-size at certain intervals where it starts breaking your design and creating scrollbars.
For example, try adding this inside your CSS at the bottom, changing the 320px width for wherever your design starts breaking:
@media only screen and (max-width: 320px) { body { font-size: 2em; } }
Viewport percentage lengths
You can also use viewport percentage lengths such as vw, vh, vmin and vmax. The official W3C document for this states:
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.
Again, from the same W3C document each individual unit can be defined as below:
vw unit - Equal to 1% of the width of the initial containing block.
vh unit - Equal to 1% of the height of the initial containing block.
vmin unit - Equal to the smaller of vw or vh.
vmax unit - Equal to the larger of vw or vh.
And they are used in exactly the same way as any other CSS value:
.text { font-size: 3vw; } .other-text { font-size: 5vh; }
Compatibility is relatively good as can be seen here. However, some versions of IE and Edge don’t support vmax. Also, iOS 6 and 7 have an issue with the vh unit, which was fixed in iOS 8.
回答2:
You can use viewport value instead of ems, pxs or pts.
1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger
h1 { font-size: 5.9vw; } h2 { font-size: 3.0vh; } p { font-size: 2vmin; }
from Css-tricks: http://css-tricks.com/viewport-sized-typography/
回答3:
Use CSS media specifiers (that's what they [zurb] use) for responsive styling:
@media only screen and (max-width: 767px) { h1 { font-size: 3em; } h2 { font-size: 2em; } }
回答4:
If you don't mind to use a jQuery solution you can try TextFill plugin
jQuery TextFill resizes text to fit into a container and makes font size as big as possible.
https://github.com/jquery-textfill/jquery-textfill
回答5:
I've been playing around with ways to overcome this issue, and believe I have found a solution:
If you can write your app for IE9+ and all other modern browsers that support CSS calc(), rem units, and vmin units, you can use this to achieve scaleable text without Media Queries:
body { font-size: calc(0.75em + 1vmin); }
Here is it in action: http://codepen.io/csuwldcat/pen/qOqVNO
回答6:
There are several ways to achieve this
Use media query but requires font sizes for several breakpoints
body { font-size: 22px; } h1 { font-size:44px; } @media (min-width: 768) { body { font-size: 17px; } h1 { font-size:24px; } }
Use dimensions in % or em. Just change the base font size everything will change. Unlike previous one you could just change the body font and not h1 everytime or let base font size to default of the device and rest all in em
- “Ems” (em): The “em” is a scalable unit. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc..
- Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.
see kyleschaeffer.com/....
CSS3 supports new dimensions that are relative to view port. But this doesn't work in android
- 3.2vw = 3.2% of width of viewport
- 3.2vh = 3.2% of height of viewport
- 3.2vmin = Smaller of 3.2vw or 3.2vh
3.2vmax = Bigger of 3.2vw or 3.2vh
body { font-size: 3.2vw; }
see css-tricks.com/.... and also look at caniuse.com/....
回答7:
This is partly implemented in foundation 5.
in _type.scss they have two set of header variable
// We use these to control header font sizes //for medium screens and above $h1-font-size: rem-calc(44) !default; $h2-font-size: rem-calc(37) !default; $h3-font-size: rem-calc(27) !default; $h4-font-size: rem-calc(23) !default; $h5-font-size: rem-calc(18) !default; $h6-font-size: 1rem !default; // We use these to control header size reduction on small screens $h1-font-reduction: rem-calc(10) !default; $h2-font-reduction: rem-calc(10) !default; $h3-font-reduction: rem-calc(5) !default; $h4-font-reduction: rem-calc(5) !default; $h5-font-reduction: 0 !default; $h6-font-reduction: 0 !default;
For medium up they generates sizes based on the first set of variables.
@media #{$medium-up} { h1,h2,h3,h4,h5,h6 { line-height: $header-line-height; } h1 { font-size: $h1-font-size; } h2 { font-size: $h2-font-size; } h3 { font-size: $h3-font-size; } h4 { font-size: $h4-font-size; } h5 { font-size: $h5-font-size; } h6 { font-size: $h6-font-size; } }
And for default-i.e small screens they use second set of variables to generates css.
h1 { font-size: $h1-font-size - $h1-font-reduction; } h2 { font-size: $h2-font-size - $h2-font-reduction; } h3 { font-size: $h3-font-size - $h3-font-reduction; } h4 { font-size: $h4-font-size - $h4-font-reduction; } h5 { font-size: $h5-font-size - $h5-font-reduction; } h6 { font-size: $h6-font-size - $h6-font-reduction; }
you can use these variables and override in your custom scss file to set font sizes for respective screen sizes
回答8:
There's another approach to responsive font sizes - using rem units.
html { /* base font size */ font-size: 16px; } h1 { font-size: 1.5rem; } h2 { font-size: 1.2rem; }
Later in media queries, you can adjust all fonts sizes by changing base font size:
@media screen and (max-width: 767px) { html { /* reducing base font size will reduce all rem sizes */ font-size: 13px; } /* you can reduce font sizes manually as well*/ h1 { font-size: 1.2rem; } h2 { font-size: 1.0rem; } }
To make this work in IE7-8 you will have to add a fallback with px units:
h1 { font-size: 18px; font-size: 1.125rem; }
If you're developing with LESS, you can create a mixin that will do the math for you.
Rem units support - http://caniuse.com/#feat=rem
回答9:
"vw" solution has a problem when going to very small screens. You can set base size and go up from there with calc():
font-size: calc(16px + 0.4vw);
回答10:
Responsive font size can also be done with this javascript called FlowType:
FlowType - Responsive web typography at its finest: font-size based on element width.
Or this javascript called FitText:
FitText - Makes font-sizes flexible. Use this plugin on your responsive design for ratio-based resizing of your headlines.
回答11:
If you are using a build tool then try Rucksack.
Otherwise, you can use CSS Variables (Custom Properties) to easily control the min and max font sizes like so (demo):
* { /* Calculation */ --diff: calc(var(--max-size) - var(--min-size)); --responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */ } h1 { --max-size: 50; --min-size: 25; font-size: var(--responsive); } h2 { --max-size: 40; --min-size: 20; font-size: var(--responsive); }
回答12:
jQuery "FitText" is probably the best responsive header solution. Check it out at Github: https://github.com/davatron5000/FitText.js
回答13:
As with many frameworks, once you "go off the grid" and override the framework's default CSS, things will start to break left and right. Frameworks are inherently rigid. If you were to use Zurb's default H1 style along with their default grid classes, then the web page should display properly on mobile (i.e., responsive).
However, it appears you want very large 6.2em headings, which means the text will have to shrink in order to fit inside a mobile display in portrait mode. Your best bet is to use a responsive text jQuery plugin such as FlowType and FitText. If you want something light-weight, then you can check out my Scalable Text jQuery plugin:
http://thdoan.github.io/scalable-text/
Sample usage:
<script> $(document).ready(function() { $('.row .twelve h1').scaleText(); } </script>
回答14:
You can make font size responsive if define it in vw (viewport width). However not all browser support it. Solution is to use JS to change base font size depending on browser width and set all font sizes in %. Here is article describing how to make responsive fontsizes: http://wpsalt.com/responsive-font-size-in-wordpress-theme/
回答15:
h1 { font-size: 2.25em; } h2 { font-size: 1.875em; } h3 { font-size: 1.5em; } h4 { font-size: 1.125em; } h5 { font-size: 0.875em; } h6 { font-size: 0.75em; }
回答16:
In actual original sass not scss you could use below mixins to automatically set paragraph and all headings font-size.
I like it because it much more compact. And quicker to type. Other than that it provides same functionality. Anyway if you still want to stick to new syntax - scss then feel free to convert my sass to scss here: [CONVERT SASS TO SCSS HERE]
Below I give you four sass mixins. You will have to tweak their settings to your needs.
=font-h1p-style-generator-manual() // you dont need use this one those are only styles to make it pretty =media-query-base-font-size-change-generator-manual() // this mixin sets base body size that will be used by h1-h6 tags to recalculate their size in media query =h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6) // here you will set the size of h1 and size jumps between h tags =config-and-run-font-generator() // this one only calls the other ones
After you finish playing with settings just make a call on one mixin - which is: +config-and-run-font-generator(). See code below and comments for more info.
I guess you could do it automatically for media query like it is done for header tags but we all use different media query so it would not be appropriate for everyone. I use mobile first design approach so this is how I would do that. Feel free to copy and use this code.
COPY AND PASTE THOSE MIXINS TO YOUR FILE
=font-h1p-style-generator-manual() body font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif // google fonts font-size: 100% line-height: 1.3em %headers line-height: 1em font-weight: 700 p line-height: 1.3em font-weight: 300 @for $i from 1 through 6 h#{$i} @extend %headers =media-query-base-font-size-change-generator-manual() body font-size: 1.2em @media screen and (min-width: 680px) body font-size: 1.4em @media screen and (min-width: 1224px) body font-size: 1.6em @media screen and (min-width: 1400px) body font-size: 1.8em =h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6) $h1-fs: $h1-fs // set first header element to this size $h1-step-down: $h1-step-down // decrement each time by 0.3 $p-same-as-hx: $p-same-as-hx // set p font-sieze same as h(6) $h1-fs: $h1-fs + $h1-step-down // looping correction @for $i from 1 through 6 h#{$i} font-size: $h1-fs - ($h1-step-down * $i) @if $i == $p-same-as-hx p font-size: $h1-fs - ($h1-step-down * $i) // RUN ONLY THIS MIXIN IT WILL TRIGGER THE REST =config-and-run-font-generator() +font-h1p-style-generator-manual() // just a place holder for our font style +media-query-base-font-size-change-generator-manual() // just a place holder for our media query font size +h1p-font-size-generator-auto($h1-fs: 2em, $h1-step-down: 0.2, $p-same-as-hx: 5) // set all parameters here
CONFIGURE ALL MIXINS TO YOUR NEEDS - PLAY WITH IT! :) AND THEN CALL IT ON THE TOP OF YOUR ACTUAL SASS CODE WITH:
+config-and-run-font-generator()
This would generate this output. You can customize parameters to generate different sets of results, however because we all use different media query some mixins you will have to edit manually (style and media).
GENERATED CSS:
body { font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.3em; word-wrap: break-word; } h1, h2, h3, h4, h5, h6 { line-height: 1em; font-weight: 700; } p { line-height: 1.3em; font-weight: 300; } body { font-size: 1.2em; } @media screen and (min-width: 680px) { body { font-size: 1.4em; } } @media screen and (min-width: 1224px) { body { font-size: 1.6em; } } @media screen and (min-width: 1400px) { body { font-size: 1.8em; } } h1 { font-size: 2em; } h2 { font-size: 1.8em; } h3 { font-size: 1.6em; } h4 { font-size: 1.4em; } h5 { font-size: 1.2em; } p { font-size: 1.2em; } h6 { font-size: 1em; }
回答17:
After much conclusions I ended up with this combination
@media only screen and (max-width: 730px) { h2{ font-size: 4.3vw; } }
回答18:
There are the following ways by which you can achieve this:
- Use rem for e.g. 2.3 rem
- Use em for e.g. 2.3em
- Use % for e.g. 2.3% Moreover, you can use : vh, vw, vmax and vmin.
These units will autoresize depending upon the width and height of the screen.
回答19:
I am afraid there is no easy solution with regards to font resizing. You can change font-size using media query, but technically it will not resize smoothly. For an example, if you use:
@media only screen and (max-width: 320px){font-size: 3em;}
Your font size will be 3em both for 300px and 200px width. But you need lower font-size for 200px width to make perfect responsive.
So, what is the real solution? There is only one way. You have to create a png (with transparent background) image containing your text. After that you can easily make your image responsive (ex: width:35%; height:28px). By this way your text will be fully responsive with all devices.
回答20:
Here is something that worked for me. I only tested it on an iPhone.
Whether you have h1, h2, or p tags put this around your text:
<h1><font size="5">The Text you want to make responsive</font></h1>
This renders a 22pt text on a desktop and it is still readable on the iPhone.
<font size="5"></font>
