您现在的位置是：网站首页>前端技术>HTML5教程HTML5教程

在电脑端浏览器上如何实现小于12PX像素字体呢？

神夜2019-12-05 16:43:26【HTML5教程】4368人已围观文章来源：神夜个人博客

简介在电脑端浏览器上如何实现小于12PX像素字体，以往小于12PX 在浏览器上是无法实现的，不能直观看到效果, 那怎样才能实现呢。

在电脑端浏览器上如何实现小于12PX像素字体，以往小于12PX 在浏览器上是无法实现的，不能直观看到效果, 那怎样才能实现呢。

其实通过查看饿了吗移动端就会发现原来他是将

这里面代码maximum-scale=1 改为了 0.5 ,那么以往的12px 应该写成 22px

那如果用rem 就是 0.22rem;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页实现12字体像素大小解决方案</title>
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no, viewport-fit=cover">
<script>
//网页字体自适应大小
!(function(win, doc){
    function setFontSize() {
        var winWidth =  window.innerWidth;
        var size = (winWidth / 640) * 100;
        doc.documentElement.style.fontSize = (size < 100 ? size : 100) + 'px' ;
    }
    var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
    var timer = null;
    win.addEventListener(evt, function () {
        clearTimeout(timer);
        timer = setTimeout(setFontSize, 300);
    }, false);
    win.addEventListener("pageshow", function(e) {
        if (e.persisted) {
            clearTimeout(timer);
            timer = setTimeout(setFontSize, 300);
        }
    }, false);
    setFontSize();
}(window, document));
</script>

<style type="text/css">

html,body{ font-size:100%;}
* { margin: 0px; padding: 0px; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); box-sizing:border-box; -webkit-box-sizing:border-box; }
body { margin: 0px; padding: 0px; font-size:20px; font-family: 'Microsoft YaHei',Arial,'PingFang SC',sans-serif; color: #333;position: relative; -webkit-text-size-adjust: none; max-width:750px; margin:0 auto;}
html,body,#app,.pages{ width:100%; height:100%;  background:#fff; overflow: hidden; }
ul, li, p, span, h1, h2, h3, h4, dl, dt, dd, form, input, textarea, select { margin: 0px; padding: 0px; font-weight:normal; }
input, textarea, select { color: #666; font-family: 'Microsoft YaHei',Arial,'PingFang SC',sans-serif; -webkit-appearance: none; font-size:0.25rem; }
i,em { display: inline-block; font-style:normal; }
</style>
</head>
<body>

主要是将<!--meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no, viewport-fit=cover"--> 这里修改成了0.5

那么这里的 12px 就应该是22px 一倍大小， 用rem 就是 0.22rem

<div style="font-size:0.22rem">我们的世界</div>
<div style="font-size:22px;">我们的世界</div>

</body>
</html>

上一篇：VUE移动端使用富文本编辑器 wangEditor 样式修改自适应

下一篇：uniapp H5端实现地图定位，拖动定点，搜索选址