Detailed explanation of how to implement responsive text size changes in css

Simply put, responsiveness is to provide a good browsing experience for web pages on various display devices.

Whether @media wraps elements, gets userAgent in the background and returns Different pages, use viewport to limit the view, or use the root element html attribute to calculate the size, etc.

They can all implement responsive layout with their own programming characteristics. If you have to say which one is the best, I am afraid it still depends on the needs. Depends.

Next, let’s briefly outline how these layout methods are used.

The well-known Bootstrap, its fence layout is the representative of media queries, which determines whether the element is wrapped and displayed entirely based on the screen width.

<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>

It is very convenient to operate and understand. The display device is divided into four intervals according to the width, and the width is given in each interval according to the proportion of the fence.

However, with the rapid development of the mobile Internet and the use of WebApp, and because the resolution and size of mobile phones are constantly updated by manufacturers, the design requirements below

768px have also increased accordingly. People have begun to have some changes in their requirements for responsiveness.

For example, is the text size on iPhone4 still suitable for iPhone6, the 1px problem of Retina screen, devicePixelRate and screen scaling problems, etc...

So in order to solve these problems, a very rich solution has been produced Plans, let’s come one by one.

First of all, as the screen gets larger, the font size becomes larger and larger, which seems to be a good idea.

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;
}

Practice tells us that the experience of large fonts on iPhone6 ​​plus is indeed not bad.

But it doesn’t seem that the bigger the fonts are, the better they look. For example, on the iPad, large fonts are definitely not a good visual experience.

So there is another way to do it. The font size of the root element is calculated by the width and devicePixelRate. It also pays more attention to the consideration of dpr than the above method.

<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>

The reason why the font-size is not directly multiplied by 0.12 may be that it is easier to calculate the width. For example, 3.75rem is a Screen width slightly.

Of course, there are some advantages to using rem instead of percentage to set the width.

For example, the gap in the two-column percentage layout can only be a percentage (calc is another matter), resulting in unequal left and right gaps and top and bottom gaps.

The element aspect ratio can be completed directly with numerical values, because Now rem is as automatic as a percentage.

Later I found out that it also has the function of scaling the browser on the PC side to keep the page unchanged.

In addition, there is Taobao’s approach, 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={}));

It is similar to the above method in terms of rem, 10rem is a screen width, but it is different in terms of text,

Taobao The touch screen version does not want to make the font size larger and larger, but always 12px or 24px.

But from the results, adding large white space to the small text and pictures seems to make it feel a little more refined, which also solves the above method. The PC version has a problem with oversized fonts.

In addition, if this method is used, then @media must rely on rem to divide the screen width nodes, such as 10rem used by Taobao.

Finally, let’s talk about a weird but very effective responsive method.

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

Have you ever felt a stubborn atmosphere that I don’t care if I don’t listen? This method means that no matter what the device is, I only treat the device as a 750px view size equipment.

375px is half the screen, which is good news for those who are doing H5 application scenarios. It is most enjoyable to use px positioning when making sprite images,

but it also has its own advantages. The disadvantage is that the aspect ratio of the device is uncertain. For example, the iPhone 4 is the same width as the iPhone 5 but shorter in height, so it is best to add a top-to-bottom centered solution.

The above is the detailed content of Detailed explanation of how to implement responsive text size changes in css. For more information, please follow other related articles on the PHP Chinese website!