PC网页、移动端适配，页面font
1. 首先，在页面引入"viewport"属性,这些属性可根据自己的需要修改
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
2. 在<head></head>标签里引入动态修改font-size的代码，此段需要优先加载，以免页面布局错乱
pc端：
第一种
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=1240){
docEl.style.fontSize = '14px';
}else{
docEl.style.fontSize = 14* (clientWidth / 1920) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
'第二种
(function () {
function setRootFontSize() {
let rem, rootWidth;
let rootHtml = document.documentElement;
rootWidth = rootHtml.clientWidth < 1366 ? 1366 : rootHtml.clientWidth;
rem = rootWidth / 19.2;
rootHtml.style.fontSize = `${rem}px`;
}
setRootFontSize();
window.addEventListener("resize", setRootFontSize, false);
})();
'移动端：
(function () {
function setRootFontSize() {
let dpr, rem, scale, rootWidth;
let rootHtml = document.documentElement;
dpr = window.devicePixelRatio || 1;
rootWidth = rootHtml.clientWidth < 375? 375: rootHtml.clientWidth;
rem = rootWidth * dpr / 3.75;
scale = 1 / dpr;
let vp = document.querySelector('meta[name="viewport"]');
vp.setAttribute('content', 'width=' + dpr * rootHtml.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');
rootHtml.style.fontSize = `${rem}px`;
}
setRootFontSize();
window.addEventListener("resize", setRootFontSize, false);
window.addEventListener("orientationchange", setRootFontSize, false);
})();
' 方法二：移动端开发中，为适应不同屏幕尺寸，需要字体根据屏幕大小改变而改变。
第一种（css解决）：
html{
font-size: calc(100vw/36);
font-size: -webkit-calc(100vw/36);
font-size: -moz-calc(100vm/36);
}
原理：让不同尺寸的屏幕有一个统一的单位来衡量。
csl()是一个函数function，calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的宽度。
vw：视口的最大宽度，1vw=视口宽度的百分之一；
vh：视口得最大高度，1vh=视口高度的百分之一；
vmin/vm：相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin（即vm）。
-moz-代表火狐浏览器的内核
-webkit-代表谷歌浏览器的内核
第二种（js解决）：
<script>
$(function(){
function setRem(){
var clientWidth=$(window).width();
var nowRem=(clientWidth/360*10);
$("html").css("font-size",parseInt(nowRem, 10)+"px");
};
setRem();
});
</script>
'文字（自适应）屏幕宽度
方法：这里的vw是视窗宽度，15是15px绝对尺寸，2240就是自己屏幕的宽度，可以按照需求写。calc：是一个css自带的计算方法，可以自动计算后返回px单位的值。
font-size:calc( 100vw * 20 / 2240);
我们的需求是文字大小是25px,而我们的屏幕是2240*1400，这时就可以将设置25px。
font-size:calc( 100vw * 25 / 2240);
相关知识
移动端
Html+Css+js实现春节倒计时效果（移动端和PC端）
Web 字体 font
移动Web实训DAY
手机移动端快速开发
网站开发网页
不再困惑，响应式网页设计一篇读懂！
网页制作与font color=red网站制作流程font
网站模板自助建站
腾讯与微软联手整大活儿，PC能刷抖音，App能跨终端了？
网址: PC网页、移动端适配，页面font https://m.huajiangbk.com/newsview948642.html
| 上一篇: 解决世纪难题！一篇讲清移动端适配 |
下一篇: Microsoft Edge开发 |
