利用css实现移动端rem适配

更新日期: 2022-10-21阅读: 315标签: 移动端

rem适配原理

为了让一些不能等比自适应的元素,到达当设备尺寸发生改变的时候,等比例适配当前设备。根据不同设备按比例设置html的字体大小,然后页面元素使用rem做尺寸单位,当html字体变化元素尺寸也会发生变化,从而达到等比缩放的适配。

rem是相对长度单位。相对于根元素(即html元素)font-size计算值的倍数的一个css单位,也就是前端常说的适配单位rem。因为rem的特性相对长度单位,常被用来做移动适配,pc端页面不推荐使用rem。


rem.js的实现

一直以为rem的实现是靠JS实现,网上的rem.js五花八门,少的10多行代码,多的甚至上百行,其中一个在使用过程中在安卓和苹果中的大小居然不一样,苹果被缩小了二倍。比如:

(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
// 这里的750 取决于设计稿的宽度
if (clientWidth >= 750) {
docEl.style.fontSize = '100px';
} else {
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('domContentLoaded', recalc, false);
})(document, window);

这里的1rem=100px。个人觉得利用css就能实现rem.js一样的效果,相比更简单使用,下面就介绍几种css的实现方法。


方案一:利用css的vw单位

在css中定义html的font-size为:calc(100vw/3.75),calc、vw能兼容ios8+和android4.4+,可放心使用,如下:

html {
font-size: calc(100vw/3.75);
}

然后在css中,就可以将所有的px单位除以100,得到rem单位了。如果不使用calc属性,可以直接写成:

html {  font-size: 26.66667vw; }

屏幕标准宽375px,全部宽度是100vw,即:

100vw / 375px = 0.2666667 vw/px

也就是每像素0.2666667vw。为调试时便于换算,我们设定1rem = 100px, 即 1rem = 26.66667vw。这个值也可根据自己需要调整数值。

当然如果你还想再方便点,也可以在css代码里直接用px做单位,然后使用postcss-pxtorem这个工具webpack构建时将px转为rem单位。这样写代码时照着UI图的标注直接写像素值就行了。配置如下:

{
loader: 'postcss-loader',
options: {
plugins: [
require('postcss-pxtorem')({rootValue: 100, propList: ['*']})
]
}
}

大家也可以使用px2rem这个插件完成,webpack、vscode都能支持,同样设置时将rootFontSize 设为100即可。


方案二:使用meta标签

在html的head中插入下面的meta标签:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=375, user-scalable=no">

没错,是两个viewport标签。width=device-width写在上面,width=375写在下面,375就是以哪个设备宽度为基准,现在大部分设计稿都是以iphone6的375宽度为基准做2倍图。加了上面两个mata标签,后面的css就可以完全使用px为单位直接使用,整个页面会自动按设备宽度进行等比例缩放。


方案三:利用媒体查询

通过媒体查询,我们让css检测到浏览器视窗的展示尺寸,然后根据不同的浏览器视窗尺寸设置不同的样式,进而实现了同一套代码适应不同设备的功能。

@media screen and (min-width: 320px) {
html {
font-size: 21.33333333px;
}
}
@media screen and (min-width: 360px) {
html {
font-size: 24px;
}
}
@media screen and (min-width: 375px) {
html {
font-size: 25px;
}
}
@media screen and (min-width: 384px) {
html {
font-size: 25.6px;
}
}
@media screen and (min-width: 400px) {
html {
font-size: 26.66666667px;
}
}
@media screen and (min-width: 414px) {
html {
font-size: 27.6px;
}
}
@media screen and (min-width: 424px) {
html {
font-size: 28.26666667px;
}
}
@media screen and (min-width: 480px) {
html {
font-size: 32px;
}
}
@media screen and (min-width: 540px) {
html {
font-size: 36px;
}
}
@media screen and (min-width: 720px) {
html {
font-size: 48px;
}
}
@media screen and (min-width: 750px) {
html {
font-size: 50px;
}
}

由于目前的手机有好几种尺寸,也就说明做适配需要每个尺寸都设置一个媒体查询。


链接: https://www.fly63.com/article/detial/12208

移动端如何强制页面横屏

有些机型有些app不能横屏:比如Android的微信就没有横屏模式,而ios的微信能开启横屏模式。解决办法就是在竖屏模式下,写一个横屏的div,然后设置rotate正(负)90度,把他旋转过来;而且如果用户切到横屏时,需要把rotate复原,要求也能正常展现。

ios移动端,js时间操作getTime(),getFullYear()等返回显示NaN的解决办法及原因

在做移动端时间转化为时间戳时,遇到了一个问题,安卓手机上访问时,能拿到时间戳,从而正确转换时间,而在iOS上缺不能正常显示,显示的时间为:NaN-NaN-NaN ,例如getTime()在ios上拿不到时间戳显示NaN

再聊移动端页面的适配

因为对于一枚前端而言,天天和页面打交道(H5页面),那么布局的活总是少不了,这也将面临不同终端的适配问题。不知道你是否和我一样,页面布局总是或多或少会有一些蛋疼的事情发生。

解决移动端点击穿透问题_h5实现移动端点击事件穿透的多种解决方案

移动端点透现象的解决办法:解决方案一:来得很直接github上有个fastclick可以完美解决;解决方案二:用touchend代替tap事件并阻止掉时A元素touchend的默认行为preventDefault(),从而阻止click事件的产生;解决方案三:延迟一定的时间(300ms+)来处理事件...

移动端开发注意问题

这篇文章主要总结移动端页面开发时需要注意的一些问题。比如:防止手机中网页放大和缩小、format-detection设置、上下拉动滚动条时卡顿慢 、禁止复制选中文本...

js实现移动端微信禁止字体被放大或缩小,防止排版错乱

由于微信webvie内置了调整字体大小的功能,如果用户调整了这一设置,就会导致了网页中的字体比原本的尺寸偏大或偏小,使得网页可能出现排版错乱,或者字体太小看不清的情况发生

阻止移动端浏览器点击图片会预览的几种方法

在移动端部分浏览器中点击了图片,变成了查看图片的效果,怎么防止img的图片被手机浏览器的图片查看器打开呢?下面整理了一些方法来实现:在img元素上添加 onclick=return false、背景图的方式插入、使用js事件阻止默认行为的方式

移动端300ms延迟的解决方法

移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟。也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应,而是会等上一小会儿才会出现点击的效果。

移动web开发之视口viewport_浅谈移动端中的视口

在 PC 端,视口指的是浏览器的可视区域,其宽度和浏览器窗口的宽度保持一致。在 CSS 标准文档中,视口也被称为初始包含块,它是所有 CSS 百分比宽度推算的根源,给 CSS 布局限制了一个最大宽度。而移动端则较为复杂,它涉及到三个视口:布局视口(Layout Viewport)、视觉视口(Visual Viewport)和理想视口(Ideal Viewport)

手淘H5移动端适配方案flexible源码分析

随着技术的飞速发展,当前lib-flexible适配方案也在逐渐被更新的适配方案所替代,但是截止目前为止,还没有发现哪种方案能完全满足适配各种机型的需要,也会有一些小的问题。lib-flexible是目前用到的比较成熟的适配方案

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!