-
前置概念:
- rem: 相对于根元素(html)的字体大小的单位, 例如html font-size: 14px 则 1rem = 14px。
- vw: 当前视窗(指浏览器的可视区域)的宽度为100vw, 1vw指当前视窗宽度的百分之一。
- 物理像素: 一个物理像素是显示器(手机屏幕)上最小的物理显示单元。
- 设备独立像素: 设备独立像素(也叫密度无关像素),可以认为是计算机坐标系统中得一个点,这个点代表一个可以由程序使用的虚拟像素 (前端中可理解为 => css像素)。
- 设备像素比(dpr): 设备像素比 = 物理像素 / css像素, 例如 iphone6 dpr: 2。
-
rem布局: (以iphone6为例: 设备宽高为375×667);
-
设计稿使用的是物理像素 (假设使用x1设计稿);
-
资源图片使用2x图 (iphone6 dpr: 2. 保证清晰可用x3, 保证性能可判断dpr 选择性加载) ;
-
js获取dpr
const dpr = window.devicePixelRatio || 1;
-
js获取屏幕宽度 (css像素):
const clientWidth = document.documentElement.clientWidth
-
js设置meta:
// 进行缩放 按照物理像素显示; const scale = 1 / dpr; const metaEl = doc.createElement('meta'); metaEl.setAttribute('name', 'viewport'); metaEl.setAttribute('content', `width=device-width,user-scalable=no,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale}`); document.head.appendChild(metaEl);
-
js设置html元素的font-size:
// 浏览器支持的最小字体是11px 这里取屏幕宽度的十分之一 防止算出的字体小于11px 导致html font-size 设置失败. document.getElementsByTagName('html')[0].style.fontSize = clientWidth / 10;
-
设定变量
// $el_desing: 设计稿中元素的宽度 // $client_design: 设计稿中设备的屏幕宽度 375px为例 // $el: 真实设备的元素宽度 // $client: 真实设备的屏幕宽度
-
设置scss:
// $el_desing / $client_design = $el / $client; // $el = $el_desing / $client_design * $client; // 1rem = 1 / 10 * $client; // $el = $el_desing / 375px * 10rem; @function rem($pixels) { @return ($pixels / 375) * 10rem; }
-
区分pc端和电脑端: (如果是两套代码 这步省略)
// 移动端 (使用rem function) @mixin respond($breakpoint) { @if $breakpoint == "mobile" { @media (max-width: 767px) { @content; } } // pc端 (使用px) @else if $breakpoint == "pc" { @media (min-width: 768px) { @content; } } }
-
使用示例:
// 假设设计稿测出元素100px 则: div { width: rem(100); }
-
优缺点:
优点 缺点 可以解决屏幕等比适配 前置知识点多,门槛高 可以解决图片高清问题 需要借助js 可以解决border: 1px问题
-
-
vw+rem 布局:
-
设计稿使用的是物理像素**(假设使用x1设计稿)**;
-
设置html元素的font-size:
// 浏览器支持的最小字体是11px 这里取屏幕宽度的十分之一 防止算出的字体小于11px 导致html font-size 设置失败. html { font-size: 10vw }
-
设定变量: (同上)
-
设置scss:
// $el_desing / $client_design = $el / $client; // $el = $el_desing / $client_design * $client; // 1rem = 10vw; // $el = $el_desing / 375px * 10rem; @function rem($pixels) { @return ($pixels / 375) * 10rem; } // 不设置html font-size 直接用vw换算: // $el = $el_desing / $client_design * $client; @function vw($pixels) { @return ($pixels / 375) * 100vw; }
-
区分pc端和电脑端: (同上)
-
使用示例: (同上)
-
优缺点:
优点 缺点 使用vw 进行屏幕等比适配, 不需要js 兼容性略差 可解决图片高清, border: 1px问题 前置知识少, 门槛低
-
移动端适配之vw+rem
最新推荐文章于 2024-04-08 10:45:25 发布
本文详细介绍了REM和VW单位在实现响应式设计中的运用,包括设置HTML字体大小、计算元素尺寸、处理图片高清及边框问题。通过JS获取设备像素比和屏幕宽度,动态调整REM布局,确保不同设备的适配性。同时,提到了VW布局的简单性,但可能存在的兼容性问题。两者各有优缺点,REM需要更多前置知识,而VW布局则更简洁。
摘要由CSDN通过智能技术生成