【VUE】常见移动端适配方案
媒体查询 @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 安装:
npm install postcss-px-to-viewport --save-dev
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.
【VUE】常见移动端适配方案相关推荐
- vue实现移动端适配方案
vue实现移动端适配步骤如下: 先安装amfe-flexible和postcss-pxtorem: npm install amfe-flexible --save npm install postc ...
- Vue项目pc端适配方案(scss)
前言:vue项目适配可借助于插件lib-flexible 和postcss-px2rem. lib-flexible插件的作用:根据屏幕尺寸不同设置html根标签的字体大小,1rem即等于根标签的字体 ...
- 一些常见的移动端适配方案,你了解吗?
前言 移动端设备的尺寸很多,而 UI 设计稿一般只会基于一个尺寸(一般是 375px 或 750px )进行设计. 目前移动端适配方案有多种,本文将介绍一些具有代表性的适配方案. 媒体查询 @medi ...
- vue中使用rem适配方案
一.移动端适配常见方案: (1)通过媒体查询的方式即CSS3的meida queries (2)以天猫首页为代表的 flex 弹性布局 (3)以淘宝首页为代表的 rem+viewpor ...
- 小小Mac:Web移动端适配方案
一.前言 在过去的几年时间里,移动端web野蛮生长,智能机的Android阵营和IOS阵营分庭抗礼,随之产生了多个系统版本(系统版本多样);五花八门的屏幕尺寸.屏幕展示技术(如大名鼎鼎的Retina技 ...
- h5响应式布局、PC和移动端适配方案
前言 春招真的是太卷了,让我怀疑春招到底在招谁(是我太菜惹qaq).总之还是不能松懈下来,总结一下在实习期间遇到的h5的响应式布局.PC和移动端适配方案的选择以及一些问题.本文部分文案由chat-gp ...
- 移动端适配方案px2rem
移动端的适配方案 React 暴露webpack配置,即 react-scripts 包 npm run eject ⚠️ 在运行该命令的时候,要先将已经修改的文件提交到本地仓库中,否则会报错! 安装 ...
- 移动端适配方案(rem和vw vh适配)(css预处理器-less)
适配方案: 目前移动端适配方案有两种: 1.flex+rem单位 当前市面上用的比较多 相对主流(比如小米和淘宝移动端) 2.flex+viewport width/viewport height(v ...
- 浏览器兼容和移动端适配方案
1.浏览器兼容: 一.css兼容: 不同浏览器的标签默认的margin和padding不同 问题症状: 随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大. 碰到频率: ...
最新文章
- pandas判断日期是否是闰年(is_leap_year)实战: 数据列转化为日期(时间)格式、判断pandas的日期数据列是否是闰年
- Jvm 系列(三):GC 算法 垃圾收集器
- zabbix安装文档
- 力控报警转储 mysql_力控ODBC转储说明.pdf
- 分享一个ASP.NET 文件压缩解压类 C#
- fiddler抓包 https
- BOOST_VMD_GET_TYPE宏相关的测试程序
- OAuth 2.0: Bearer Token Usage
- python后面空格报错_python中空格和table混用报错原因
- fastjson 添加key value_FastJson迁移至Jackson
- java 数组构造_java – 从数组构造(非二进制)树
- 如何:将项添加到缓存中
- 解决python在pycharm中可以import本地文件,但命令行运行时报错:no model named xxxx本地文件
- 终于迎来大改变!iPhone 14全系标配120Hz高刷屏+6GB内存
- android版本怎么设置,安卓系统手机怎么用
- MFC更改环境目录可执行文件目录下继承的值
- 怎么用EasyRecovery恢复硬盘内被误删的数据
- bzoj3315:[Usaco2013 Nov]Pogo-Cow
- 按照计算机系统结构分类存储器可分为,存储器分类,存储器的分级结构
- 查理芒格推荐的100个思维模型
热门文章
- 【WPS】常见WPS数据处理技巧
- 竞争对手纷推低价5G手机,华为按捺不住将加入千元机战场
- 西电网信院微机原理实验(六)
- Python小白入门- 101 ( 工具篇) Python完成身份证号码校验的算法
- 3DMAX 阵列工具、间隔工具快捷键
- 通过USB镜像iPhone/iPad屏幕到电脑
- linux中的until命令
- 我的世界服务器 血月概率修改,《我的世界》血月事件来袭!据说没人活过这一夜,不信你来试试?...
- 《AutoCAD 2016中文版室内装潢设计从入门到精通》——1.3 室内设计制图的要求和规范...
- 《Python3.6零基础入门与实战》