min-font-size 및 max-font-size와 같은 것이 있습니까?
브라우저 창에 반응하는 div에서 글꼴을 만들려고합니다. 지금까지, 그것은 완벽하게 작동하고 있지만 부모 DIV는이 max-width의 525px. 브라우저 크기를 더 조정해도 글꼴 크기 조정이 중지되지는 않습니다. 이 날이 그런 일 같은 경우 궁금해했다 min-font-size거나 max-font-size, 비슷한 무언가를 달성 할 수있는 방법이 있는지, 존재하지 그런 일이없는 경우.
백분율을 사용하면 효과가 있다고 생각 font-size했지만 일부 텍스트는 부모 div에 따라 크기가 조정되지 않습니다. 내가 가진 것은 다음과 같습니다.
상위 div의 CSS :
.textField{
background-color:rgba(88, 88, 88, 0.33);
width:40%;
height:450px;
min-width:200px;
max-width:525px;
z-index:2;
}
문제의 텍스트에 대한 CSS :
.subText{
position:relative;
top:-55px;
left:15px;
font-family:"news_gothic";
font-size:1.3vw;
font-size-adjust:auto;
width:90%;
color:white;
z-index:1;
}
나는 인터넷에서 꽤 오랫동안 검색했지만 아무 소용이 없습니다.
아니요, 최소 또는 최대 글꼴 크기에 대한 CSS 속성이 없습니다. 브라우저에는 종종 최소 글꼴 크기에 대한 설정이 있지만 이는 작성자가 아닌 사용자가 제어합니다.
@media쿼리 를 사용 하여 화면 또는 창 너비와 같은 항목에 따라 일부 CSS 설정을 지정할 수 있습니다 . 이러한 설정에서 창이 매우 좁은 경우 글꼴 크기를 특정 작은 값으로 설정할 수 있습니다.
수식을 사용하고 뷰포트 너비를 포함하여이를 수행 할 수 있습니다.
font-size: calc(7px + .5vw);
이것은 최소 글꼴 크기를 7px로 설정하고 뷰포트 너비에 따라 .5vw로 증폭합니다.
행운을 빕니다!
CSS와 잘 작동합니다.
나는 같은 문제를 겪었고 다음과 같이 수정했습니다.
특정 너비 이상에서 최대 크기로 고정 된 "px"크기를 사용합니다. 그런 다음 다른 더 작은 너비의 경우 상대적인 "vw"를 화면의 백분율로 사용합니다.
아래 결과는 960px 미만의 화면에서 자체 조정되지만 위의 고정 크기를 유지한다는 것입니다. 헤더의 html 문서에 추가하는 것을 잊지 마세요.
<meta name="viewport" content="width=device-width">
CSS의 예 :
@media all and (min-width: 960px) {
h1{
font-size: 50px;
}
}
@media all and (max-width: 959px) and (min-width: 600px) {
h1{
font-size: 5vw;
}
}
@media all and (max-width: 599px) and (min-width: 50px) {
h1{
font-size: 6vw;
}
}
도움이 되길 바랍니다!
나는 여기에 조금 늦게오고 있습니다. 나는 그것에 대해 그다지 신용을 얻지 못합니다. 프로젝트를 위해 그렇게해야했기 때문에 아래 답변을 혼합하고 있습니다.
따라서 질문에 답하기 위해 : 이 CSS 속성과 같은 것은 없습니다 . 이유는 모르겠지만이 속성의 오용을 두려워하기 때문이라고 생각하지만 심각한 문제가 될 수있는 사용 사례를 찾지 못했습니다.
어쨌든 해결책은 무엇입니까?
: 두 개의 도구는 우리가 할 수 있도록 미디어 쿼리 ANS 폭스 바겐 속성을
1) CSS에서 수행하는 모든 단계에 대한 미디어 쿼리를 작성하여 글꼴을 고정 된 양에서 다른 고정 된 양으로 변경하는 "어리석은"솔루션이 있습니다. 작동하지만 매우 지루하고 매끄러운 선형 측면이 없습니다.
2) AlmostPitt가 설명했듯이 최소값에 대한 훌륭한 솔루션이 있습니다.
font-size: calc(7px + .5vw);
여기에서 최소값은보기 너비의 0.5 %에 추가하여 7px입니다. 그것은 이미 정말 멋지고 대부분의 경우에 작동 합니다. 미디어 쿼리가 필요하지 않으며 적절한 매개 변수를 찾는 데 시간을 투자하면됩니다.
선형 함수라는 것을 알았을 때 기본 수학은 두 점이 이미 매개 변수를 찾았다는 것을 학습합니다. 그런 다음 매우 큰 화면과 모바일 버전에 대해 원하는 글꼴 크기를 px로 수정 한 다음 과학적 방법을 원하는지 계산하십시오. 생각, 그것은 절대적으로 필요하지 않으며 시도하여 갈 수 있습니다.
3) 제목이 한 줄로 된 것을 절대적으로 원하지 않는 매우 지루한 클라이언트 (나와 같은)가 있다고 가정 해 봅시다. AlmostPitt 솔루션을 사용한 경우 글꼴이 계속 커지고 너비가 고정 된 컨테이너 (예 : 1140px에서 중지되는 부트 스트랩 또는 큰 창에 있음)가 있기 때문에 문제가 발생합니다. 여기에서는 미디어 쿼리도 사용하는 것이 좋습니다. 사실 애스펙트가 원치 않게되기 전에 컨테이너에서 처리 할 수있는 최대 픽셀 크기 (pxMax)를 찾을 수 있습니다. 이것이 당신의 최대 값이 될 것입니다. 그런 다음 중지해야하는 정확한 화면 너비 (wMax)를 찾아야합니다. (나는 당신이 직접 선형 함수를 역전시킬 수 있습니다).
그 후에 그냥
@media (min-width: [wMax]px) {
h2{
font-size: [pxMax]px;
}
}
Then it is perfectly linear and your font-size stop growing ! Notice that you don't need to put your previous css property (calc...) in a media query under wMax because media query are considered as more imnportant and it will overwrite the previous property.
I don't think it is useful to make a snippet for this, as you would have trouble to make it to whole screen and it is not rocket science afterall.
Hope this could help others, and don't forget to thank AlmostPitt for his solution.
Rucksack is brilliant, but you don't necessarily have to resort to build tools like Gulp or Grunt etc.
I made a demo using CSS Custom Properties (CSS Variables) to easily control the min and max font sizes.
Like so:
* {
/* 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);
}
I got some smooth results with these. It flows smoothly between the 3 width ranges, like a continuous piecewise function.
@media screen and (min-width: 581px) and (max-width: 1760px){
#expandingHeader {
line-height:5.2vw;
font-size: 5.99vw;
}
#tagLine {
letter-spacing: .15vw;
font-size: 1.7vw;
line-height:1.0vw;
}
}
@media screen and (min-width: 1761px){
#expandingHeader {
line-height:.9em;
font-size: 7.03em;
}
#tagLine {
letter-spacing: .15vw;
font-size: 1.7vw;
line-height:1.0vw;
}
}
@media screen and (max-width: 580px){
#expandingHeader {
line-height:.9em;
font-size: 2.3em;
}
#tagLine {
letter-spacing: .1em;
font-size: .65em;
line-height: .10em;
}
}
You can use Sass to control min and max font sizes. Here is a brilliant solution by Eduardo Boucas.
@mixin responsive-font($responsive, $min, $max: false, $fallback: false) {
$responsive-unitless: $responsive / ($responsive - $responsive + 1);
$dimension: if(unit($responsive) == 'vh', 'height', 'width');
$min-breakpoint: $min / $responsive-unitless * 100;
@media (max-#{$dimension}: #{$min-breakpoint}) {
font-size: $min;
}
@if $max {
$max-breakpoint: $max / $responsive-unitless * 100;
@media (min-#{$dimension}: #{$max-breakpoint}) {
font-size: $max;
}
}
@if $fallback {
font-size: $fallback;
}
font-size: $responsive;
}
.limit-min {
@include responsive-font(3vw, 20px);
}
.limit-min-max {
@include responsive-font(3vw, 20px, 50px);
}
This is actually being proposed in CSS4
Quote:
These two properties allow a website or user to require an element’s font size to be clamped within the range supplied with these two properties. If the computed value font-size is outside the bounds created by font-min-size and font-max-size, the use value of font-size is clamped to the values specified in these two properties.
This would actually work as following:
.element {
font-min-size: 10px;
font-max-size: 18px;
font-size: 5vw; // viewport-relative units are responsive.
}
This would literally mean, the font size will be 5% of the viewport's width, but never smaller than 10 pixels, and never larger than 18 pixels.
Unfortunately, this feature isn't implemented anywhere yet, (not even on caniuse.com).
Yes, there seems some restrictions by some browser in SVG. The developertool restrict it to 8000px; The following dynamically generated Chart fails for example in Chrome.
Try http://www.xn--dddelei-n2a.de/2018/test-von-svt/
<svg id="diagrammChart"
width="100%"
height="100%"
viewBox="-400000 0 1000000 550000"
font-size="27559"
overflow="hidden"
preserveAspectRatio="xMidYMid meet"
>
<g class="hover-check">
<text class="hover-toggle" x="-16800" y="36857.506818182" opacity="1" height="24390.997159091" width="953959" font-size="27559">
<set attributeName="opacity" to="1" begin="ExampShow56TestBarRect1.touchstart"
end="ExampShow56TestBarRect1.touchend">
</set>
<set attributeName="opacity" to="1" begin="ExampShow56TestBarRect1.mouseover"
end="ExampShow56TestBarRect1.mouseout">
</set>
Heinz: -16800
</text>
<rect class="hover-rect" x="-16800" y="12466.509659091" width="16800" height="24390.997159091" fill="darkred">
<set attributeName="opacity" to="0.1" begin="ExampShow56TestBarRect1.mouseover"
end="ExampShow56TestBarRect1.mouseout">
</set>
<set attributeName="opacity" to="0.1" begin="ExampShow56TestBarRect1.touchstart"
end="ExampShow56TestBarRect1.touchend">
</set>
</rect>
<rect id="ExampShow56TestBarRect1" x="-384261" y="0" width="953959" height="48781.994318182"
opacity="0">
</rect>
</g>
</svg>
'IT story' 카테고리의 다른 글
| MySQL 테이블에 기본 키를 추가하는 방법은 무엇입니까? (0) | 2020.09.06 |
|---|---|
| Scala (Test)로 instanceof 검사를 수행하는 방법 (0) | 2020.09.06 |
| Webrick은 응답 속도가 매우 느립니다. (0) | 2020.09.06 |
| 스크롤 위치 설정 (0) | 2020.09.06 |
| LocationManager에 대한 Android 확인 권한 (0) | 2020.09.06 |