兼容pc和移动端
程序员文章站
2022-03-11 15:37:01
能用 CSS 控制的尽量不要用 JavaScript 去实现。所以，不推荐这样：terminalType () { const isMobile = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)...
能用 CSS 控制的尽量不要用 JavaScript 去实现。
所以，不推荐这样：
terminalType () {
const isMobile = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|
BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
return !!isMobile
}上述代码中的 !!isMobile 等价于 isMobile ? true : false。
推荐使用 CSS 的媒体查询
@media标签+rem+viewport+less
为什么375的屏要用750的设计稿？
2倍图岂不是更高清吗。
实现：
// base.less
// 计算rem的基准字体
@base-font-size: 100px;
// UI设计图的分辨率宽度
@psd-width: 750px;
// 需要适配的屏幕宽度
@device-list: 320px, 360px, 375px, 412px, 480px, 640px, 720px, 768px, 1440px;
//设置数组的长度
@len:length(@device-list);
.adapterMixin(@index) when (@index <= @len){
// 根据index获取对应的某个值 extract(数组名, 对应的序号)
@media (min-width: extract(@device-list, @index)) {
html {
font-size: extract(@device-list, @index) / @psd-width * @base-font-size;
}
}
.adapterMixin(@index - 1);
}// index.html
// ...
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximun-scale=1.0, user-scalable=no">
// ...
@media标签+rem+viewport+scss
// base.scss
// 计算rem的基准字体
$rem-base-font-size: 100px;
// UI设计图的分辨率宽度
$UI-width: 750px;
// 需要适配的屏幕宽度
$device-widths: 240px, 320px, 360px, 375px, 384px, 411px, 414px, 424px, 480px, 540px, 640px, 720px, 750px, 768px, 800px, 980px, 1024px, 1080px, 1152px, 1366px, 1440px, 2160px;
//根据不同设备的屏幕宽度，定义<html>的基准font-size
@each $current-width in $device-widths {
@media (min-width: $current-width) {
html {
font-size: $current-width * $rem-base-font-size/$UI-width;
}
}
}// index.html
// ...
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximun-scale=1.0, user-scalable=no">
// ...
本文地址：https://blog.csdn.net/mChales_Liu/article/details/111874736
上一篇： 唐朝将领高仙芝的知名度高不高？为什么他的存在感不高？
下一篇： 红外线额温枪模块硬件结构