一些常见的移动端适配方案,你了解吗?
前言
移动端设备的尺寸很多,而 UI 设计稿一般只会基于一个尺寸(一般是 375px 或 750px )进行设计。
目前移动端适配方案有多种,本文将介绍一些具有代表性的适配方案。
媒体查询 @media
CSS3 中的媒体查询属性 @media
分别为不同屏幕尺寸的移动设备编写不同尺寸的 css 属性,示例如下所示:
/* <375px */
@media screen and (max-width:375px) { .box {width: 100%;}
}
/* >=375px and <450px */
@media screen and (min-width:375px) and (max-width:450px) {.box {width: 90%;}
}
/* >=450px */
@media screen and (min-width:450px) {.col{width: 80%;}
}
复制代码
缺点:
页面上所有的元素都得在不同的
@media
中定义一遍不同的尺寸,代价有点高。如果再多一种屏幕尺寸,就得多写一个
@media
查询块。
rem 适配方案
rem
是 CSS3
新增的一个相对单位,它是一个相对于页面根元素 html
的 font-size
的一个单位。
假如设置了根元素 html
的 font-size
为 18px
,那么 1rem
等于 18px
,rem
的大小会随着根元素 html
的 font-size
的改变而改变。rem
方案就是利用了这一点,根据不同的屏幕尺寸,来设置不同的根元素 html
的 font-size
的大小,以此来达到适配不同屏幕尺寸的目的。
目前,除了 IE8 及更早版本外,所有浏览器均已支持 rem
。
1. 使用 flexible
flexible
方案是阿里早期开源的一个移动端适配解决方案,引用 flexible
后,我们在页面上统一使用 rem
来布局。我们创建一个 rem.js
文件:
// 封装一个根据屏幕尺寸自动改变 html 的 font-size 大小的函数
const init = function () {let clientWidth =document.documentElement.clientWidth || document.body.clientWidth;// 设计图尺寸是 750px,这样 *20 之后,1rem 就等于 20px;const fontSize = (clientWidth / 750 * 20);document.documentElement.style.fontSize = fontSize + "px";
};init();window.addEventListener("resize", init);
export default init;
复制代码
在 mian.js
中引入就能够使用了,需要自己手动将 px
转换为 rem
2. postcss-pxtorem 插件
参考:通过插件postcss-pxtorem轻松实现px到rem转换,完成移动端适配[2]
viewport 适配方案
viewport
是指视窗、视口,即浏览器用来显示网页的那部分区域。
viewport
方案使用 vw/vh 作为样式单位。vw/vh 将 viewport
分成了一百等份,1vw
等于视口 1%
的宽度,1vh
等于视口 1%
的高度。当我们的设计稿宽度是 750px 时,1vw
就等于 7.5px
。
1. 设置 meta 标签
对于手机浏览器浏览页面,常对 viewport
进行如下设置即可:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
复制代码
initial-scale
:初始缩放比例,即当浏览器第一次加载页面时的缩放比例。maximum-scale
:允许浏览者缩放到的最大比例,一般设为1.0。user-scalable
:浏览者是否可以手动缩放,yes或no。
2. px 自动转换为 vw
使用插件 postcss-px-to-viewport[3] 进行相关配置,就可以帮助我们将 px
自动转化为 vw
,提高开发效率。
使用 npm 或 yarn 安装:
npm install postcss-px-to-viewport --save-dev
复制代码
或者
yarn add -D postcss-px-to-viewport
复制代码
webpack 配置:
module.exports = {plugins: {// ...'postcss-px-to-viewport': {// optionsunitToConvert: 'px', // 需要转换的单位,默认为"px"viewportWidth: 750, // 设计稿的视窗宽度unitPrecision: 4, // 单位转换后保留的精度propList: ['*', '!font-size'], // 能转化为 vw 的属性列表viewportUnit: 'vw', // 希望使用的视窗单位fontViewportUnit: 'vw', // 字体使用的视窗单位selectorBlackList: [], // 需要忽略的 CSS 选择器,不会转为视窗单位,使用原有的 px 等单位minPixelValue: 1, // 设置最小的转换数值,如果为 1 的话,只有大于 1 的值会被转换mediaQuery: false, // 媒体查询里的单位是否需要转换单位replace: true, // 是否直接更换属性值,而不添加备用属性exclude: undefined, // 忽略某些文件夹下的文件或特定文件,例如 'node_modules' 下的文件include: /\/src\//, // 如果设置了include,那将只有匹配到的文件才会被转换landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件landscapeUnit: 'vw', // 横屏时使用的单位landscapeWidth: 1125, // 横屏时使用的视窗宽度},},
};
复制代码
3. 标注不需要转换的属性
在项目中,如果设计师要求某一场景不做适配,需为固定的宽高或大小,这时我们就需要利用 postcss-px-to-viewport
插件的 ignoring
特性,对不需要转换的属性进行标注,如下所示:
/* example input: */
.box {/* px-to-viewport-ignore-next */width: 100px;padding: 20px;height: 100px; /* px-to-viewport-ignore */
}/* example output: */
.box {width: 100px; padding: 2.6667vw;height: 100px;
}
复制代码
当然,viewport 适配方案也有一定的缺陷:px
转换成 vw
不一定能完全整除,因此有一定的像素差。
最后
目前比较推荐的移动适配方案是 rem&vw,了解其中的适配原理对于前端而言是非常重要的,相关问题也经常出现在面试题中。熟练使用插件也能给我们的工作带来很大的帮助。
以上就是笔者对移动端适配方案的一些见解,以及在使用移动端适配时遇到的一些坑,如有不足欢迎大家指正~,谢谢!
关于本文
作者:codinglin
https://juejin.cn/post/7172952008029110285
最后
欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿
回复「算法」,加入前端编程源码算法群,每日一道面试题(工作日),第二天瓶子君都会很认真的解答哟!
回复「交流」,吹吹水、聊聊技术、吐吐槽!
回复「阅读」,每日刷刷高质量好文!
如果这篇文章对你有帮助,「在看」是最大的支持
》》面试官也在看的算法资料《《
“在看和转发”就是最大的支持
一些常见的移动端适配方案,你了解吗?相关推荐
- 浏览器兼容和移动端适配方案
1.浏览器兼容: 一.css兼容: 不同浏览器的标签默认的margin和padding不同 问题症状: 随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大. 碰到频率: ...
- 小小Mac:Web移动端适配方案
一.前言 在过去的几年时间里,移动端web野蛮生长,智能机的Android阵营和IOS阵营分庭抗礼,随之产生了多个系统版本(系统版本多样);五花八门的屏幕尺寸.屏幕展示技术(如大名鼎鼎的Retina技 ...
- flex 移动开发 html5,[ html5 ] 移动端适配方案 flex布局+rem布局
viewport视口 viewport是严格的等于浏览器的窗口.viewport与跟viewport有关的meta标签的关系,详细建议读一读这篇文章:移动前端开发之viewport的深刻理解,view ...
- H5移动端适配方案rem/vw
前言 在讲解适配方案之前,我们聊聊为什么要做适配? 因为视口.逻辑像素.分辨率这些变量的不同,在每个设备展示都不一样,需要一种方案来统一. 物理像素:也就是分辨率,一个物理像素是显示器上的最小的物理显 ...
- h5响应式布局、PC和移动端适配方案
前言 春招真的是太卷了,让我怀疑春招到底在招谁(是我太菜惹qaq).总之还是不能松懈下来,总结一下在实习期间遇到的h5的响应式布局.PC和移动端适配方案的选择以及一些问题.本文部分文案由chat-gp ...
- 移动端适配方案px2rem
移动端的适配方案 React 暴露webpack配置,即 react-scripts 包 npm run eject ⚠️ 在运行该命令的时候,要先将已经修改的文件提交到本地仓库中,否则会报错! 安装 ...
- CSS移动端适配方案
文章目录 移动端适配 移动端适配介绍 视口的介绍 布局视口和视觉视口 理想视口 移动端适配方案 rem适配方案 基本介绍 单位换算 vw适配方案 移动端适配 移动端适配介绍 移动互联网的快速发展,让人 ...
- 移动端适配方案有哪几种?
虽然我们课程明确的区分各种移动端适配方案,但依然有很多同学搞不清楚移动端等比适配和响应式,这里对移动端主流适配方案给大家做一个分析. 移动端适配是指同一个页面可以在不同的移动端设备上都有合理的布局.主 ...
- 移动端适配方案(rem和vw vh适配)(css预处理器-less)
适配方案: 目前移动端适配方案有两种: 1.flex+rem单位 当前市面上用的比较多 相对主流(比如小米和淘宝移动端) 2.flex+viewport width/viewport height(v ...
最新文章
- 【Qt】错误处理:error: undefined reference to `qMain(int, char**)‘
- EncryptionHelper.cs(20170223)
- 水平集与图割算法浅析
- lnmp 虚拟主机的配置
- 《互联网运营智慧》随书视频
- 一台mysql数据库服务器_在一台服务器安装多个MySQL数据库
- 掘金小册大众评审团流程
- 5S现场管理之车间现场标准化管理的六大执行要点
- 使用SurfaceView完成地图无缝拼接
- instant-ngp
- 基于 Creator 3.0 的 3D 换装
- 第十四章 ESP32 新建一个WIFI热点
- 从三点共线到四点共面
- 外贸企业邮箱那个好用,哪个企业邮箱最好用?
- ts定义数组类型_ts基本类型
- NPDP产品经理证书在中国有用吗?
- 从永远到永远-Navicat将MySQL数据库复制到另一个Mysql数据库
- 微信小程序——开发介绍
- sqlplus连接数据库的几种方法
- cd28v2虚拟服务器,科技知识:华为荣耀CD28v2路由器初始密码
热门文章
- STM32 C语言编写环形存储区
- 70天的JQUERY学习: 选择器+事件+效果。总结篇
- 学计算机高考英语听力考试,2016年高考英语听力真题全国卷Ⅰ(附原文和答案)...
- Autosar NM : 网络是如何被唤醒的<一>
- 11.【CSS精灵图background-position、字体图标@font-face{}、画小三角形、cursor、outline、resize、vertical-align、溢出省略号】
- Spring.NET 1.3.0公布平添新特征
- 解释性语言和翻译性语言的区别
- python绘制六角形
- 腾讯叮当首次系统性展示AI能力开放日展示实战型解决方案
- 【转】为何有的职业后期不给力?