유동적 인 웹 사이트가 있고 메뉴는 너비의 20 %입니다. 메뉴의 글꼴 크기를 적절하게 측정하여 항상 상자 너비에 맞고 다음 줄로 줄 바꿈하지 않기를 바랍니다. "em"을 단위로 사용하려고 생각했지만 브라우저의 글꼴 크기에 상대적이므로 해상도를 변경할 때 글꼴 크기는 동일하게 유지됩니다.
점수와 백분율도 시도했습니다. 필요한만큼 작동하지 않습니다 ...
진행 방법에 대한 힌트를주세요.
답변:
@media screen and (max-width : 320px)
{
body or yourdiv element
{
font:<size>px/em/rm;
}
}
@media screen and (max-width : 1204px)
{
body or yourdiv element
{
font:<size>px/em/rm;
}
}
화면의 화면 크기에 따라 수동으로 부여 할 수 있으며 화면 크기를 다르게보고 글꼴 크기를 직접 추가하면됩니다.
당신이 사용할 수있는 em, %, px. 그러나 media-queries See this Link 와 함께 사용 하면 미디어 쿼리에 대해 알아볼 수 있습니다. 또한, CSS3는 현재 뷰포트의 크기를 기준으로 물건을 크기에 대한 새로운 값이 : vw, vh,와 vmin. 그것에 대한 링크 를 참조하십시오 .
vw, vh, vmin이 답변을 바위.
vmax
이를 달성하는 방법에는 여러 가지가 있습니다.
CSS3 는 뷰포트와 관련된 새로운 차원을 지원합니다. 그러나 이것은 안드로이드에서 작동하지 않습니다.
3.2vmax = 3.2vw 또는 3.2vh 중 더 큼
body
{
font-size: 3.2vw;
}
css-tricks.com / .... 참조 및 caniuse.com / .... 참조
미디어 쿼리를 사용 하지만 여러 중단 점에 글꼴 크기가 필요합니다.
body
{
font-size: 22px;
}
h1
{
font-size:44px;
}
@media (min-width: 768px)
{
body
{
font-size: 17px;
}
h1
{
font-size:24px;
}
}
% 또는 rem의 차원을 사용하십시오 . 기본 글꼴 크기 만 변경하면 모든 것이 변경됩니다. 이전 버전과 달리 매번 h1이 아닌 본문 글꼴을 변경하거나 기본 글꼴 크기를 장치의 기본값으로 설정하고 모두 em에 둘 수 있습니다.
"Root Ems"(rem) : "rem"은 확장 가능한 단위입니다. 1rem은 body / html의 글꼴 크기와 같습니다. 예를 들어 문서의 글꼴 크기가 12pt이면 1em은 12pt와 같습니다. 루트 Em은 본질적으로 확장 가능하므로 2em은 24pt, .5em은 6pt 등입니다.
백분율 (%) : 백분율 단위는 몇 가지 근본적인 차이점을 제외하면 "em"단위와 매우 유사합니다. 무엇보다도 현재 글꼴 크기는 100 %입니다 (즉, 12pt = 100 %). 백분율 단위를 사용하는 동안 텍스트는 모바일 장치 및 접근성을 위해 완전히 확장 가능합니다.
em는 컨테이너의 글꼴 크기에 상대적입니다. 컨테이너에 글꼴 크기가 em...로 설정되어있을 때 예기치 않은 동작이 발생할 수 있습니다 rem. 문서 글꼴에 상대적인 크기를 가져 오려면을 사용하십시오 .
전적으로 반응하는 HTML (예 : 백분율로 작성된 HTML)에 적합한 멋진 JS 솔루션을 개발했습니다.
글꼴 크기를 정의하기 위해 "em"만 사용합니다.
html 글꼴 크기는 10 픽셀로 설정됩니다.
html {
font-size: 100%;
font-size: 62.5%;
}
문서 준비에서 글꼴 크기 조정 함수를 호출합니다.
// JQuery가 필요합니다.
function doResize() {
// FONT SIZE
var ww = $('body').width();
var maxW = [your design max-width here];
ww = Math.min(ww, maxW);
var fw = ww*(10/maxW);
var fpc = fw*100/16;
var fpc = Math.round(fpc*100)/100;
$('html').css('font-size',fpc+'%');
}
이 도구를 사용해 볼 수 있습니다 : http://fittextjs.com/
이 두 번째 도구를 사용하지 않았지만 비슷해 보입니다 : https://github.com/zachleat/BigText
왜 이것이 복잡한 지 잘 모르겠습니다. 이 기본 자바 스크립트를 할 것입니다
<body onresize='document.getElementsByTagName("body")[0].style[ "font-size" ] = document.body.clientWidth*(12/1280) + "px";'>
12는 1280 해상도에서 12px를 의미합니다. 여기서 원하는 값을 결정합니다.
이것은 나를 위해 일했습니다.
body {
font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum
viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}
여기에 자세히 설명되어 있습니다 : https://css-tricks.com/books/volume-i/scale-typography-screen-size/
https://stackoverflow.com/a/17845473/189411 의 변형을 만들었습니다.
여기서 "확인"크기를 원하는 상자의 최소 및 최대 크기와 관련하여 최소 및 최대 텍스트 크기를 설정할 수 있습니다. 또한 텍스트 크기를 적용하려는 상자와 다른 dom 요소의 크기를 확인할 수 있습니다.
# size-2 요소의 500px 및 960px 너비를 기준으로 # size-2 요소에서 19px에서 25px 사이의 텍스트 크기를 조정합니다.
resizeTextInRange(500,960,19,25,'#size-2');
본문 요소의 500px 및 960px 너비를 기준으로 # size-1 요소에서 13px에서 20px 사이의 텍스트 크기를 조정합니다.
resizeTextInRange(500,960,13,20,'#size-1','body');
완전한 코드가 있습니다 https://github.com/kiuz/sandbox-html-js-css/tree/gh-pages/text-resize-in-range-of-text-and-screen/src
function inRange (x,min,max) {
return Math.min(Math.max(x, min), max);
}
function resizeTextInRange(minW,maxW,textMinS,textMaxS, elementApply, elementCheck=0) {
if(elementCheck==0){elementCheck=elementApply;}
var ww = $(elementCheck).width();
var difW = maxW-minW;
var difT = textMaxS- textMinS;
var rapW = (ww-minW);
var out=(difT/100)*(rapW/(difW/100))+textMinS;
var normalizedOut = inRange(out, textMinS, textMaxS);
$(elementApply).css('font-size',normalizedOut+'px');
console.log(normalizedOut);
}
$(function () {
resizeTextInRange(500,960,19,25,'#size-2');
resizeTextInRange(500,960,13,20,'#size-1','body');
$(window).resize(function () {
resizeTextInRange(500,960,19,25,'#size-2');
resizeTextInRange(500,960,13,20,'#size-1','body');
});
});
미디어 쿼리를 사용 하지 않는 것은 글꼴 크기를 점차적으로 조정할 수 있기 때문에 좋습니다.
vw단위를 사용 하면보기 포트 크기에 비례하여 글꼴 크기가 조정됩니다.
vw단위를 글꼴 크기 로 직접 변환 하면 모바일 해상도와 데스크톱 모두에서 최적의 위치에 도달하기 어렵습니다.
다음과 같은 것을 시도하는 것이 좋습니다.
body {
font-size: calc(0.5em + 1vw);
}
크레딧 : CSS In Depth
<script>
function getFontsByScreenWidth(actuallFontSize, maxScreenWidth){
return (actualFontSize / maxScreenWidth) * window.innerWidth;
}
// Example:
fontSize = 18;
maxScreenWidth = 1080;
fontSize = getFontsByScreenWidth(fontSize, maxScreenWidth)
</script>
도움이 되길 바랍니다. 이 공식을 Phase 게임에 사용하고 있습니다.
<meta name="viewport" content="width=device-width" />또한 더 '반응 형'느낌max-width대신 사용할 수 있습니다max-device-width.