vue屏幕分辨率适配实战解析
作为前端人员,为了适配各种型号的电脑、手机,我们往往离不开屏幕分辨率的适配;
那么如何做好屏幕分辩率的适配呢,我总结了以下几点:
1.使用amfe-flexible,将px转换为rem,用于适配不同宽度的屏幕
首先安装amfe-flexible
和postcss-px2rem
依赖
npm install amfe-flexible -S
npm install postcss-px2rem -S
然后在main.js
中引入
import "amfe-flexible/index.js";
最后在vue.config.js
中进行配置
module.exports = {css: {loaderOptions: {plugins: [require("postcss-px2rem")({//这里75表示你的设计图的宽度为750px,如果你设计图的宽度为1920px,那么改为192即可。remUnit: 75 })]}}}
}
通过控制看到px被转换为rem后则说明flexible生效了
其中有一个坑的地方:
<el-form ref="form" :model="form" label-width="80px"><el-form-item label="活动名称"><el-input v-model="form.name"></el-input></el-form-item>
</el-form>
类似于label-width
这种定义的样式,并不会被计算成rem,如果要想其也被计算成rem,可以通过样式穿透的方式修改其样式。
::v-deep(.el-form-item__label){width: 80px !important;
}
2.多用百分比,viewpoint 视口,flex布局,栅格布局等
利用宽度和高度的继承属性,通过百分比可以让页面视图成等比例放大和缩小;
利用视口的高度(vh)和宽度(vw)可以让页面的内容填满整个可视区域;
利用flex布局,栅格布局可以做到元素的居中显示,等比例分布等。
3.媒体查询
运用完以上两种方法后,基本上大部分的屏幕都可以被适配到,
如果有个别特殊页面或分辨率未适配到的,可以使用媒体查询进行特殊适配,例如:
//适配屏幕宽度在1400px以下的屏幕
@media screen and (max-width: 1400px) {width: 200px
}
4.如何验证
对于开发人员来说,找各种分辨率去一个个验证调试是很麻烦的一件事
以谷歌为例,可以点开控制台,点开移动端调试按钮,在顶部输入你要调试的分辨率即可选择你需要调整的分辨率了,
以上就是我进行屏幕分辨率的适配心得了,欢迎关注我的微信公众号与我沟通交流,我会及时回复哦!
vue屏幕分辨率适配实战解析相关推荐
- Unity 利用NGUI做屏幕分辨率适配+学习UIDraggablePanel的使用
2019独角兽企业重金招聘Python工程师标准>>> 大家使用unity,一定有看中其跨平台的强大功能,因此也难免会遇到不同屏幕分辨率适配的问题. 先说说UIRoot.在新版本的n ...
- 大屏项目屏幕分辨率适配
一.大屏项目屏幕分辨率适配:1366*768 和 1920*1080 和 2560*1440 和 4096×2160 二.css方案选择:css的宽高以什么为单位? 1.字体大小以 "相对单 ...
- Android Studio 屏幕分辨率适配
android studio进行android 应用屏幕分辨率适配使用建立不同dimens.xml方法,刚开始建立的文件夹都叫 values-1280x720 values-800x400之类的,发现 ...
- android屏幕分辨率适配总结
不同分辨率下容易出现的问题 欢迎加入QQ交流3群:317874559 由于目前android设备的分辨率种类很多,在开发的时候不注意进行屏幕适配的话会出现很多问题.比如高分辨率和低分辨率 ...
- android屏幕分辨率适配
分辨率 高度 宽度 宽高比(宽/高) 1920x1080 1920 1080 0.5625 2094x1080 2094 1080 0.5157593123 2220x1080 2220 1080 0 ...
- Unity UGUI背景图屏幕分辨率适配
文章目录 一.前言 二.背景图分辨率适配 方法1.全屏铺满 方法2.等宽高比缩放 方法3.背景图分层 一.前言 游戏中,必不可少会有需要显示背景图的地方,比如登录界面.Loading界面等. 二.背景 ...
- 关于屏幕分辨率适配的教程
这篇文章不是扫盲文,而是工具文. 关于屏幕适配,大概就是,能够让一个控件在不同分辨率下显示的效果一致(或者差不多) ,适配就OK了 举个栗子 一个button 在1080p分辨率下设置的宽度占屏幕一半 ...
- Mac Catalina(10.15.2) 2K外接屏幕分辨率适配
工具 1.SCALED RESOLUTIONS 2.SwitchResX,下载地址如下,也可从官网下载最新版 链接:SwitchResX 密码:af0z 步骤 1.下载安装SwitchResX 2.重 ...
- html自动适应屏幕分辨率,关于HTML的屏幕分辨率适配的方法,求主流HTML自适应方法。...
两种方式,一种是直接在link中判断设备的尺寸,然后引用不同的css文件: < link rel ="stylesheet" type ="text/css&quo ...
最新文章
- VC2019消息框编程总结
- 又是一个程序员粗心的代码引起频繁FullGC的案例
- 如何在html页面遍历对象,Python:如何使用LXML/Requests遍历HTML元素对象?
- appcon 图标打包
- Misc string test
- Myecplise Tomcat 启动很慢
- python的empty函数_python中numpy.empty()函数的用法
- linux usb不识别,求助:USB无法识别
- SVN的搭建(入门篇)
- Canvas drawImage
- Remove_if 删除vector数据
- sparksql 保存点_Spark SQL笔记整理(三):加载保存功能与Spark SQL函数
- 计算机的标准输入法,ALKATIP输入法电脑版
- html前端验证代码,前端js+html实现简单验证码
- 工信部《物联网的十三五规划(2016-2020年)》
- 常见的两种解空间 全排列与幂集
- win8 查看和更换密钥方法
- [技术讨论]从ERP免费开始到做人做事的讨论
- 语音转换成文字要怎么做呢?
- 深度信念网络_深度学习如何感知跟踪位置变化