了解css中px、em、rem的区别并使用Flexible实现vue移动端的适配
本人java菜鸟一名,若有错误,还请见谅。
1、px和em和rem的定义和区别
px:px像素,是相对单位,相对于屏幕的分辨率而言,也就是说,当屏幕的分辨率不同那么px相同,实际看到的大小也会不同。
例如:当一台手机的分辨率为1024*768来说,也就是说,这屏幕由纵向的1024个像素点和横向的768个像素点组成,所以当一个组件的width为200px的时候在这台手机上会占据200个横向的像素点;那么当同样大小的手机只有800*600的分辨率,那么该组件在同样的大小手机中也占据了200个横向像素点,所以看到的组件大小实际上会比分辨率大的要大。
em:是相对长度单位,是相对于当前对象内文本的尺寸,但要注意,em会继承父级元素的字体大小。
例如:任意浏览器的默认字体高度都是16px,所以未经调整的浏览器都符合16px = 1em。那么假设当根元素的大小为1.2em,子元素也要为1.2em,那么子元素大小应该设为1em,因为em会继承父元素的字体大小,若子元素也设计为1.2em那么实际大小会变为1.44em。
注意:当浏览器的默认字体高度改变时,em和px的转换比例也随之改变,比如当font-size = 65%的时候,那么实际的转化率为:16px * 65% = 10px = 1em。
rem:rem是css3新增的一个相对单位,所有的组件相对于的是html根元素的大小,那么可以做到的是,只修改根元素的大小就可以修改所有元素的大小。
例如:当根元素的大小为16px的时候,16px = 1rem ,若有组件大小为2.5rem,则其实际的大小为 2.5 * 16 = 40px。若根元素的字体大小改变,所有组件的大小也随之改变。
2、使用Flexible实现vue移动端的适配
lib-Flexible是一个制作h5的开源库,通过添加这个js文件之后动态的改变mate标签,从而给html标签添加data-dpr和font-size两种属性并动态改写他们的值。而当给font-size添加值之后会以这个值做相应的计算,从而达到屏幕适配的效果。
导入lib-Flexible:
在index.html中添加相应的路径 <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html © w3cplus.com
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html © w3cplus.com
在main.js中添加相应的引用 import 'lib-flexible/flexible.js';
3、使用px2rem 插件方便的将px单位转为rem
引入Flexible之后可以使用rem来编写代码,但是对于已经使用了px来编写的程序来说又该怎么办呢。这里我们引入px2rem插件,来自动转换px单位。
具体步骤:
1、下载插件 npm install px2rem-loader lib-flexible --save
2、在main.js中引入lib-flexible import 'lib-flexible/flexible.js'
3、在build下的 utils.js中,找到generateLoaders 方法,添加以下代码
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75,
}
}
function generateLoaders (loader, loaderOptions) {
var loaders = [cssLoader, px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
使用方法,通过改变remUnit的值来自动按比例转化为rem。
参考文章: https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html
https://www.cnblogs.com/leejersey/p/3662612.html
https://blog.csdn.net/qq_33485463/article/details/80454326
了解css中px、em、rem的区别并使用Flexible实现vue移动端的适配的更多相关文章
- css中px,em,rem,rpx的区别
今天看到一个面试题为 px,em的区别,为了更好地让读者区分css的长度单位,我总结下css中常用的长度单位: px,em,rem,rpx 像素px是我们在定义CSS中经常用到的尺寸大小单位,而em在 ...
- css中px em rem vw vh vmax vmin等单位的区别--转载
px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. rem:相对 ...
- px,em,rem的区别
PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...
- 搞清css的单位 px,em,rem的区别
前言:现在上大街一眼望去,基本上90%的人都拿着手机,走路,逛街,吃东西都不停着,所以对于我们这种前端开发的程序猿来说,让网页适应于移动端可以说是必须要满足的.所以最近也是一直在学习和实践.然后就接触 ...
- css单位px,em,rem区别
在css中单位长度用的最多的是px.em.rem,这三个的区别是: px是固定的像素,一旦设置了就无法因为适应页面大小而改变. em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定 ...
- /px/em/rem/的区别
PX特点: 1 .IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3.Firefox能够调整px和em,rem,但是96%以上 ...
- css里px em rem特点(转)
1.px特点: 1.IE无法调整px作为单位的字体大小: 2.Firefox能够调整px.em和rem. px是像素,是相对长度单位,是相对于显示器屏幕分辨率而言的. 2.em特点: 1.em的值并不 ...
- px,em,rem的区别与用法
别人总结的.个人觉得特别的好: http://www.w3cplus.com/css/when-to-use-em-vs-rem.html
- css 单位 px em rem
http://www.cnblogs.com/leejersey/p/3662612.html
随机推荐
- LR有的JMeter也有之二“检查点”
好吧!接着上一篇文章的内容和思路,继续前进. 检查点:简单的来理解一下,上一章讲到,我们对用户名和密码进行了参数化,那么怎样来判断jmeter有没有正确调用test.dat里面的文件呢.当然,我们可以 ...
- asp.net core系列 69 Amazon S3 资源文件上传示例
一. 上传示例 Install-Package AWSSDK.S3 -Version 3.3.104.10 using Amazon; using Amazon.Runtime; using Ama ...
- PHP版本的区别与用法详解
在我们安装PHP模块时,有时需要注意PHP编译的版本,下面讲解下PHP中VC6.VC9.TS.NTS版本的区别与用法详解,介绍php的两种执行方式. 1. VC6与VC9的区别:VC6版本是使用Vis ...
- XAMPP/LAMPP到底在哪里启用APACHE2的rewrite
XAMPP/LAMPP是一套我们在个人建站过程中非常便捷常用的集成环境.特别是对于学习PHP开发和建站非常便捷. 最近在使用CentOS7环境下的XAMPP过程中,遇到了一个问题,也就是apache2 ...
- vs2013 在按F5调试时,总是提示 “项目已经过期”的解决方案
这个是由于缺少某些文件(如.h,xxx.icon),或者文件时间不对 引起的. 如图在工具选项设置 最小为 “诊断”. 然后编译一下,会提示 xxx过期,确认下即可.
- 实现API管理系统的几个重要关键词
管理API的需求源自于Web API开展业务.从2006年开始,然后逐渐成熟,并在2016年之前进入市场.无论是通过代理现有API的管理网关.本身作为用于部署API本身的网关的一部分,还是作为连接层在 ...
- OSI七层网络模型与TCP/IP四层模型
1.OSI七层结构图: 2.TCP/IP四层结构图: 3.各层对应的协议 4.OSI七层和TCP/IP四层的区别 OSI网络模型和TCP/IP网络模型对应关系: 5.交换机工作在OSI的哪一层 如果有 ...
- net start mysql
net start mysql 解决的方法: 如何以管理员身份打开黑窗口 左下角开始菜单,找到小娜,cmd 回车, 命令提示符右击,以管理员身份打开 依次输入下面两行代码 mysqld -instal ...
- 思科ACS5.8最新搭建教程-亲测可用
1.需要准备的相关软件 ACS5.8安装包:http://ouo.io/MWB0R ACS5.8破解包:http://ouo.io/FaiGgj Centos7:下载地址(破解时需要):http:// ...
- springboot的log4j配置与logback配置
log4j配置的依赖 <!-- 删除pom.xml文件中所有对日志jar包的引用--> <dependency> <groupId>org.springframew ...