PC 端使用 rem 适配屏幕尺寸大小(自适应方案)
rem是指相对于根元素字体大小的单位,可以做到随着根元素的字体大小随之变化,达到自适应屏幕的效果。这里以PC常见的分辨率 1920px 为例说明。
# 在 head 中加上 meta 标签
代表宽度是设备宽度,同时不允许缩放:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
1
# 设置根元素字体大小
相对于根元素 html
html {font-size: 100px;} /*100px方便计算,实际值需要自己确定*/
1
# 使用 css 计算不同屏幕时根元素
html {font-size: calc(100vw/1920);} /*100vw:屏幕宽度 1920:设计稿宽度*/
1
# 使用 js 计算不同屏幕时根元素
setHtmlFontSize()
if (window.addEventListener) {
window.addEventListener('resize', function () {
setHtmlFontSize()
}, false)
}
function setHtmlFontSize () {
// 1366是设计稿的宽度,当大于1366时采用1366宽度,比例也是除以13.66
let deviceWidth = document.documentElement.clientWidth > 1920 ? 1920 : document.documentElement.clientWidth;
document.getElementsByTagName('html')[0].style.cssText = 'font-size:' + deviceWidth / 19.2 + 'px !important';
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
或者
function resize(){
let w=document.body.clientWidth;
document.querySelector("html").style.fontSize=w*20/1920+'px';
//rem与px没有实际的关系,根据情况不同比例不同的,这里说的根据情况,实际上就是自己设定比例
//假设1rem=20px;那么关系就是(屏幕宽度*20/设计稿宽度),设计稿的字体大小是16px,那么就等于16/20rem;
//假设1rem=16px;那么关系就是(屏幕宽度*16/设计稿宽度),设计稿的字体大小是16px,那么就等于16/16rem;
//注意,谷歌浏览器最小字体为12px,定义关系的时候,不要小于12px;极限是1rem=12px;
};
document.body.onresize=resize;
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 使用 sass 语法转换px rem
/* PX 转 rem */
@function px2Rem($px, $base-font-size: 19.2px) {
@if (unitless($px)) {
@return ($px / 19.2) * 1rem;
} @else if (unit($px) == em) {
@return $px;
}
@return ($px / $base-font-size) * 1rem;
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
上次更新: 2024/01/30, 00:35:17
- 01
- Node与GLIBC_2.27不兼容解决方案08-19
- 02
- Git清空本地文件跟踪缓存08-13