通过rem自适应屏幕尺寸
通过rem自适应屏幕尺寸
常用的前端单位
-
px
px就是pixel的缩写，设备分辨率，物理像素
-
pt
pt就是point的缩写，逻辑分辨率，逻辑像素
-
em
参考物是父元素的font-size，具有继承的特点
如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值
-
rem
css3新单位，相对于根元素html（网页）的font-size
-
vw
css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%
浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。
-
vh
css3新单位，viewpoint height的缩写，视窗高度，1vh等于视窗高度的1%
浏览器高度900px, 1 vh = 900px/100 = 9 px
iPhone的屏幕尺寸规格
| 设备 | 逻辑分辨率（pt） | 设备分辨率（px） |
|---|---|---|
| 4(S) | 320x480 | 640x960 |
| 5(S) | 320x568 | 640x1136 |
| 6 | 375x667 | 750x1334 |
rem的使用
设置header内的<meta>标签
<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
设置header内的<script>标签
<script type="text/javascript">
// designSize 设计稿宽度,一般为 640(px) 或 750(px)
document.documentElement.style.fontSize = document.documentElement.clientWidth / designSize *100 + 'px';
</script>
设计稿640px，以iPhone4尺寸为例
页面内有一个红色盒子宽高都是320px，里面的文字是32px
对应的逻辑分辨率为宽高160px,文字16px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css适配</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1">
<style type="text/css">
body{
margin: 0 ;padding: 0;font-size: 0.32rem;
/*
0.32rem = 0.32 * 50px = 16px (320屏幕宽度下html的font-size: 50px)
0.32rem = 0.32 * 64.68px = 20px (414屏幕宽度下html的font-size: 64.68px)
0.32rem = 0.32 * 120px = 38px (768屏幕宽度下html的font-size: 120px)
*/
}
div{
width: 3.2rem;height: 3.2rem ;background: red;
/*
3.2rem = 3.2 * 50px = 160px
*/
}
</style>
<script type="text/javascript">
document.documentElement.style.fontSize = document.documentElement.clientWidth / 640 * 100 + 'px';
console.log(document.documentElement.clientWidth); // 320
</script>
</head>
<body>
<div class="box">
<span class="demo">测试</span>
</div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var font=$(".demo").css('font-size');
console.log("字体大小:",font); // 字体大小: 16px
var boxw=$(".box").css('width');
console.log("宽度:",boxw); // 宽度：160px
});
$(function(){
var font=$("html").css('font-size');
console.log("html字体大小:",font); // html字体大小: 50px
});
</script>
</html>
设计稿750px，以iPhone6尺寸为例
页面内有一个红色盒子宽高都是375px，里面的文字是37.5px
对应的逻辑分辨率为宽高187.5px,文字18.75px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css适配</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1">
<style type="text/css">
body{
margin: 0 ;padding: 0;font-size: 0.375rem;
/*
0.375rem = 0.375 * 50px = 18.75px (375屏幕宽度下html的font-size: 50px)
0.375rem = 0.375 * 42.67px = 16px (320屏幕宽度下html的font-size: 42.67px)
0.375rem = 0.375 * 55.2px = 20px (414屏幕宽度下html的font-size: 55.2px)
*/
}
div{
width: 3.75rem;height: 3.75rem ;background: red;
/*
3.75rem = 3.75 * 50px = 187.5px
*/
}
</style>
<script type="text/javascript">
document.documentElement.style.fontSize = document.documentElement.clientWidth / 640 * 100 + 'px';
console.log(document.documentElement.clientWidth); // 375
</script>
</head>
<body>
<div class="box">
<span class="demo">测试</span>
</div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var font=$(".demo").css('font-size');
console.log("字体大小:",font); // 字体大小: 18.75px
var boxw=$(".box").css('width');
console.log("宽度:",boxw); // 宽度：187.5px
});
$(function(){
var font=$("html").css('font-size');
console.log("html字体大小:",font); // html字体大小: 50px
});
</script>
</html>
本文作者：伏月廿柒
本文链接：https://www.cnblogs.com/by0627/p/16061477.html
版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步