CSS에서 반응형 텍스트 크기 변경을 구현하는 방법에 대한 자세한 설명

간단히 말하면, 반응성은 웹 페이지가 다양한 디스플레이 장치에서 좋은 브라우징 경험을 갖도록 만드는 것입니다.

@media 래핑 요소이든, 백그라운드의 userAgent가 다른 페이지로 돌아가도록 하고, 뷰포트를 사용하여 보기를 제한하고, 또는 루트 요소 html 속성을 사용하여 크기 등을 계산합니다.

그들은 모두 자체 프로그래밍 특성으로 반응형 레이아웃을 구현할 수 있습니다. 어느 것이 가장 좋은지 말하기는 여전히 필요에 따라 다릅니다.

다음으로 이러한 레이아웃 메서드를 구현하는 방법을 간략하게 나열하겠습니다.

잘 알려진 부트스트랩의 펜스 레이아웃은 미디어 쿼리를 대표하며, 이는 화면 너비에 따라 요소가 완전히 래핑되고 표시되는지 여부를 결정합니다.

<style><br>.col-xs-2 {width: 50%}
@media (min-width: 768px) {
  .col-sm-3 {width: 33.333333%}
}
@media (min-width: 992px) {
  .col-md-4 {width: 25%}
}
@media (min-width: 1200px) {
  .col-lg-5 {width: 20%}
}
</style>
 <p class="col-xs-2 col-sm-3 col-md-4 col-lg-5"></p>

디스플레이 장치는 너비에 따라 4개의 간격으로 나누어지며, 울타리의 비율에 따라 각 간격에 너비가 부여됩니다.

그러나 모바일 인터넷의 급속한 발전과 WebApp의 사용으로 인해 휴대폰의 해상도와 크기는 제조업체에서 지속적으로 업데이트되기 때문에 아래의 디자인 요구 사항

768px도 그에 따라 증가했으며 사람들은 반응형 요구 사항이 있습니다.

예를 들어 iPhone4의 텍스트 크기가 iPhone6에 여전히 적합한지, Retina 화면의 1px 문제, devicePixelRate 및 화면 크기 조정 문제 등...

그래서 이러한 문제를 해결하기 위해 매우 풍부한 솔루션이 제작되었습니다. , 하나씩 살펴보겠습니다.

우선 화면이 커질수록 글자 크기도 점점 커지는데 좋은 방법인 것 같습니다.

html { font-size: 10px;}
@media (min-width: 376px) and (max-width: 414px) {
  html{font-size: 11px;}
}
@media (min-width: 415px) and (max-width: 639px) {
  html{font-size: 13px;}
}
@media (min-width: 640px) and (max-width: 719px) {
  html{font-size: 14px;}
}
@media (min-width: 720px) and (max-width: 749px) {
  html{font-size: 15px;}
}
@media (min-width: 750px) and (max-width: 799px) {
  html{font-size: 16px;}
}
@media (min-width: 800px) and (max-width: 992px) {
  html{font-size: 20px;}
}
body {
  margin: 0;
  font-size: 1.6rem;
}

연습을 통해 iPhone6 ​​​​plus의 큰 글꼴 경험이 실제로 나쁘지 않다는 것을 알 수 있습니다.

하지만 글꼴이 클수록 보기에 좋은 것 같지는 않습니다. 예를 들어 iPad에서 큰 글꼴은 확실히 좋은 시각적 경험이 아닙니다.

그래서 루트 요소의 글꼴 크기를 너비와 devicePixelRate로 계산하는 또 다른 방법이 있습니다. 또한 위의 방법보다 dpr을 더 고려합니다.

<style>
body {font-size: .12rem}
</style>
<script>
!function() {
  function e() {
    r.innerText = "html{font-size:" + (a.style.fontSize = a.getBoundingClientRect().width / o * d + "px") + " !important;}"
  }
  var t = navigator.userAgent,
    n = (t.match(/(iPhone|iPad|iPod)/), t.match(/Android/i), window),
    i = document,
    a = i.documentElement,
    o = (n.devicePixelRatio, 375),
    d = 100,
    r = (i.head.querySelector(&#39;[name="viewport"]&#39;), i.createElement("style"));
  r.innerText = "html{font-size:100px !important}", i.head.appendChild(r), e(), n.addEventListener("resize", e, !1);
  a.className += t.match(/ucbrowser/i) ? " app-uc " : ""
}();
</script>

설정 시 글꼴 크기에 0.12를 직접 곱하지 않는 이유는 너비를 계산하기가 더 쉽기 때문일 수 있습니다. 예를 들어 3.75rem은 화면 너비입니다.

물론 백분율 대신 rem을 사용하여 너비를 설정하면 몇 가지 장점이 있습니다.

예를 들어 2열 백분율 레이아웃의 간격은 백분율만 가능하므로(계산은 또 다른 문제임) 왼쪽과 오른쪽, 위쪽과 아래쪽 간격이 동일하지 않습니다.

요소의 가로 세로 비율을 직접 완성할 수 있습니다. 현재 rem은 자동이므로 페이지를 변경하지 않고 유지하기 위해 PC 측에서 브라우저 크기를 조정하는 기능도 있다는 것을 발견했습니다.

이 외에도 Taobao의 접근 방식인 lib-flexible.js가 있습니다.

!function(a,b){
function c(){
var b=f.getBoundingClientRect().width;b/i>540&&(b=540*i);var c=b/10;f.style.fontSize=c+"px",k.rem=a.rem=c
}
var d,e=a.document,f=e.documentElement,g=e.querySelector('meta[name="viewport"]'),h=e.querySelector('meta[name="flexible"]'),i=0,j=0,k=b.flexible||(b.flexible={});
if(g){
console.warn("将根据已有的meta标签来设置缩放比例");
var l=g.getAttribute("content").match(/initial\-scale=([\d\.]+)/);
l&&(j=parseFloat(l[1]),i=parseInt(1/j))}else if(h){var m=h.getAttribute("content");
if(m){var n=m.match(/initial\-dpr=([\d\.]+)/),o=m.match(/maximum\-dpr=([\d\.]+)/);
n&&(i=parseFloat(n[1]),j=parseFloat((1/i).toFixed(2))),o&&(i=parseFloat(o[1]),j=parseFloat((1/i).toFixed(2)))
}
}
if(!i&&!j){
var p=(a.navigator.appVersion.match(/android/gi),a.navigator.appVersion.match(/iphone/gi)),q=a.devicePixelRatio;i=p?q>=3&&(!i||i>=3)?3:q>=2&&(!i||i>=2)?2:1:1,j=1/i
}
if(f.setAttribute("data-dpr",i),!g)
if(g=e.createElement("meta"),g.setAttribute("name","viewport"),g.setAttribute("content","initial-scale="+j+", maximum-scale="+j+", minimum-scale="+j+", user-scalable=no"),f.firstElementChild)f.firstElementChild.appendChild(g);
else{
var r=e.createElement("p");r.appendChild(g),e.write(r.innerHTML)
}
a.addEventListener("resize",function(){clearTimeout(d),d=setTimeout(c,300)},!1),a.addEventListener("pageshow",function(a){
a.persisted&&(clearTimeout(d),d=setTimeout(c,300))},!1),"complete"===e.readyState?e.body.style.fontSize=12*i+"px":e.addEventListener("DOMContentLoaded",function(){
e.body.style.fontSize=12*i+"px"},!1),c(),k.dpr=a.dpr=i,k.refreshRem=c,k.rem2px=function(a){
var b=parseFloat(a)*this.rem;return"string"==typeof a&&a.match(/rem$/)&&(b+="px"),b},k.px2rem=function(a){var b=parseFloat(a)/this.rem;return"string"==typeof a&&a.match(/px$/)&&(b+="rem"),b
}}(window,window.lib||(window.lib={}));

타오바오의 터치스크린 버전에서는 글꼴 크기를 더 크게 만들고 싶지 않습니다. 그리고 더 크지만 항상 12px 또는 24px이지만,

하지만 결과로 볼 때 작은 단어와 그림을 위한 큰 공간을 남겨두는 것이 더 세련된 느낌을 주는 것 같고 PC 버전의 글꼴이 너무 커지는 문제도 해결됩니다. 위의 방법.

또한 이 방법을 사용하면 @media는 Taobao에서 사용하는 10rem과 같이 화면 너비 노드를 나누기 위해 rem에 의존해야 합니다.

마지막으로 이상하지만 매우 효과적인 반응 방법에 대해 이야기해 보겠습니다.

<meta name="viewport" content="width=750,user-scalable=no" />
 
<style>
html, body {
  width: 750px;
  margin: 0 auto;
  overflow: hidden;
}
</style>

375px는 화면의 절반입니다. 이는 H5 응용 시나리오를 작업하는 사람들에게 좋은 소식입니다. 스프라이트 이미지를 만들 때 px 위치 지정을 사용하는 것이 가장 즐겁지만

단점도 있습니다. 장치 높이 비율은 가변적입니다. 예를 들어 iPhone4와 iPhone5는 너비는 동일하지만 높이가 더 짧으므로 위에서 아래로 중앙에 솔루션을 추가하는 것이 가장 좋습니다.

위 내용은 CSS에서 반응형 텍스트 크기 변경을 구현하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!