适用于APP端内容器的H5页面,以及一些移动浏览器的页面适配
参考文章列表:
老版适配方法,可见文章
juejin.cn/post/684490… juejin.cn/post/684490…
以下内容部分复制来自上述文章。
目前端内适配,最常用的便是REM,方便且效果好。
REM
首先了解下rem:
单位 | 解释 | 具体 |
---|---|---|
rem | font size of the root element | 以根元素字体大小为基准 |
em | font size of the element | 以父元素字体大小为基准 |
rem以html元素为基础,来进行其下子元素的自适应,例如:
html {
font-size: 12px;
}
h1 {
font-size: 2rem;
}
/* 2 × 12px = 24px */
p {
font-size: 1.5rem;
}
/* 1.5 × 12px = 18px */
实际应用
第1步:确定html的font-size设置
移动端的视觉通常根据以Iphone6/7/8的宽度375px为基础,来进行视觉稿的设计。
如此,可以定义:
$baseWidth: 3.75
html {
-webkit-text-size-adjust: none //默认即是none,可不写
font-size: 100vw / $baseWidth
// 针对宽屏的手机,可以通过@media进行特殊调整
@media only screen and (min-width: xxxpx) {
font-size: xxx / $baseWidth
}
或是js计算
const oHtml = document.getElementsByTagName('html')[0]
const width = oHtml.clientWidth;
// 375px的屏幕基准像素为12px
oHtml.style.fontSize = 12 * (width / 375) + "px";
更加详细的实现,感兴趣的同学可以看这篇文章:Rem自适应js-优化flexible.js。
第2步:使用
以html元素的字号为基础。 根据UI稿做对应的改变。
.wrap {
width: 3.51rem; // UI宽度为351px;
font-size: 0.14rem; // UI字号为14px;
}
同理进行页面的设计。
注意0.01rem的使用,在部分机型不显示,可使用1px来替代或者自定义的include(利用transform,scale进行缩放)来实现1px的效果
有大量的构建插件来帮助我们自动完成px单位到rem单位的转换过程:(
-
gulp stylus-px2rem
-
webpack px-to-rem-loader
更多插件
附一个rem转px的函数:
function rem2Px(rem) {
let width=375 //根据实际情况处理
if (window) {
width = window.innerWidth;
} else if (document && document.body) {
width = document.body.offsetWidth;
}
return (Math.min(width, xx)/ 375) * rem * 100; // xx根据具体你的设计方案
}
rem的缺点:
作为一种简单粗暴解决不同屏幕下视图的区别的一种方案,它可以解决本文出现的问题以及绝大多数移动端适配屏幕尺寸的问题。但是既然它并不是一个完美的解决方案,那就有其局限性所在。
举个例子: 作者有一大爱好是看小说,大屏智能机时代确实几乎完全替代了我十年前纸质化阅读的习惯。从2011年至今,手上的手机屏幕宽度一直在提升,但是使用的看小说软件的显示字号几乎是不变的。 用rem会在一定程度上打破用户的文字内容阅读习惯,特别是在大篇幅的内容时。
iOS与Android平台的适配方式背后隐藏的设计哲学是这样的:阅读文字时,可读性较好的文字字号行距等绝对尺寸数值组合与文字所在媒介的绝对尺寸关系不大。(可以这样简单理解:A4大小的报纸和A3大小甚至更大的报纸,舒适的阅读字号绝对尺寸是一样的,因为他们都需要拿在手里阅读,在手机也是上同理);在看图片视频时,图片、视频的比例应该是固定的,不应该出现拉伸变形的情况。而rem用在字号时,使字号在不同屏幕上的绝对尺寸不一致,违背了设计哲学。
大家感兴趣还可以移步结一老师的文章:rem不是神农草,治不了移动端百病。