了解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
随机推荐
- SpringBoot 2 HTTP转HTTPS
@Bean public TomcatServletWebServerFactory servletContainer() { TomcatServletWebServerFactory tomcat ...
- Java虚拟机学习笔记(二)--- 判断对象是否存活
Java堆中存放着所有的对象实例,垃圾收集器在堆进行回收之前,需要判断对象是“存活”还是“死亡”(即不可能再被任何途径引用的对象). 最常见的一种判断对象是否存活算法是引用计数算法, 给对象加一个引用 ...
- css实现左边高度自适应右边高度
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- requestAnimationFrame 兼容方案
[toc] 编写涉及:css, html, js 在线演示codepen html代码 <div class="roll-box"> <div class=&qu ...
- mybatis的一对多双向映射
连表查询 select id resultType resultMap resultType和resultMap不能同时使用 association 属性 映射到多对一中的“一”方的“复杂类型”属性, ...
- 鲜为人知的maven标签解说
目录 localRepository interactiveMode offline pluginGroups proxies servers mirrors profiles 使用场景 出现位置 激 ...
- fatal: remote origin already exists.解决方法
git remote add origin1 http://github.com/xxx/xxx.git origin名字冲突,换一个名字 遇到这种问题时表示已经有一个origin,冲突了,可能原因是 ...
- React Native 混合开发与实现
关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 随着 React 的盛行,其移动开发框架 React Native 也收到了广大开发者的青睐,以下简 ...
- Prometheus 集成 Node Exporter
文章首发于公众号<程序员果果> 地址:https://mp.weixin.qq.com/s/40ULB9UWbXVA21MxqnjBxw 简介 Prometheus 官方和一些第三方,已经 ...
- 8.14 day32 TCP服务端并发 GIL解释器锁 python多线程是否有用 死锁与递归锁 信号量event事件线程q
TCP服务端支持并发 解决方式:开多线程 服务端 基础版 import socket """ 服务端 1.要有固定的IP和PORT 2.24小时不间断提供服务 3.能够支 ...