1.px 使用具体像素点为单位,好处是比较稳定和精确,但在浏览器放大缩小会出现问题

2.rem 参考根元素的值
  例如设置根元素字体大小是20像素
  

  在h1中设置字体大小

  

  那么H1的大小就是40px

  p的像素是20*0.8就是16像素

3.vw是针对于可是窗口的大小,就是窗口的大小,或者手机屏幕的大小

  个人觉得这个不错

  

意思就是字体占整个可视窗口的百分之四,是根据可视窗口来变化的。
 
 
第一次玩博客,以后会经常分享一些在前端中遇到的问题,和解决办法。

px与与rem vw的区别的更多相关文章

  1. 网页常见单位: px em pt % rem vw、vh、vmin、vmax , rem 使用

    1.网页常见单位:  px  em  pt    vw\vh   rem 1.1 px单位名称为像素,相对长度单位,像素(px)是相对于显示器屏幕分辨率而言  (最终解析单位) em单位名称为相对长度 ...

  2. px em 和rem之间的区别

    背景: px:像素是相对于显示器屏幕分辨率而言的相对长度单位.pc端使用px倒也无所谓,可是在移动端,因为手机分辨率种类颇多,不可能一个个去适配,这时px就显得非常无力,所以就要考虑em和rem. e ...

  3. 彻底弄懂px,em和rem的区别

    国内的设计大师都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px特点: 1.IE无法调整那些使用px作为单位的字体大小: 2.国外大部分网站能够调整的原因 ...

  4. css中字体常用单位px、em、rem和%的区别及用法总结

    一.px.em.rem和%的定义 1.px(像素) px单位的名称为像素,它是一个固定大小的单元,像素的计算是针对(电脑/手机)屏幕的,一个像素(1px)就是(电脑/手机)屏幕上的一个点,即屏幕分辨率 ...

  5. css单位介绍em ex ch rem vw vh vm cm mm in pt pc px

    长度单位主要有以下几种em ex ch rem vw vh vm cm mm in pt pc px %,大概可以分为几种"绝对单位"和"相对单位"和" ...

  6. css中content-box和border-box当宽度为百分比时的位置区别,vw和%区别

    盒模型 参考代码 // CSS 部分 <style> .box1,.box2{ width: 200px; height: 200px; padding: 20px; margin: 20 ...

  7. px,pt,em,rem

    一直对px,pt,em,rem的认识有误区,现整理一下,供参考.之后还得整理下关于dpi相关的知识. px(pixe,像素l):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物 ...

  8. 小tips:使用rem+vw实现简单的移动端适配

    首先设置meta属性,如下代码: <meta name="viewport" content="width=device-width, initial-scale= ...

  9. Vue将px转化为rem适配移动端

    Vue将px转化为rem适配移动端 1.下载lib-flexible我使用的是vue-cli+webpack,所以是通过npm来安装的npm i lib-flexible --save 2.引入lib ...

随机推荐

  1. iOS KVC/KVO 线程(GCP)

    最近比较忙,把学习知识点的帖子的地址记一下,有时间再好好整理. KVC/KVO1 KVC/KVO2 线程(GCP)

  2. Android UI 常用图标尺寸规范

    1. 程序启动图标: LDPI (Low Density Screen,120 DPI),其图标大小为 36 x 36 px. MDPI (Medium Density Screen, 160 DPI ...

  3. 彻底理解Java中的hashcode方法(转)

    本文转自http://www.importnew.com/18851.html 哈希表这个数据结构想必大多数人都不陌生,而且在很多地方都会利用到hash表来提高查找效率.在Java的Object类中有 ...

  4. 论坛中不同类型的贴的排序问题(涉及数据库的:CASE... END)

    在论坛中,会有不同类型的帖子,比如说:普通贴.精华帖.置顶帖: 论坛的这些贴子会根据不同的类型进行排序,当然不仅仅只是看帖子类型,还有贴子的动态情况来进行排序. 在这里演示一下简单的帖子排序,我们只关 ...

  5. ArcGIS Viewer for Flex中引入google map作底图 (转)

    在ArcGIS Viewer for Flex开发中,经常需要用到google map作为底图,我们不能通过ArcGIS Viewer for Flex - Application Builder轻易 ...

  6. ES6里关于函数的拓展(二)

    一.构造函数 Function构造函数是JS语法中很少被用到的一部分,通常我们用它来动态创建新的函数.这种构造函数接受字符串形式的参数,分别为函数参数及函数体 var add = new Functi ...

  7. CKEditor+SWFUpload实现功能较为强大的编辑器(三)---后台接收图片流程

    在前台配置完CKEditor和SWFUpload之后就可以满足基本的需求了 在这里,我配置的接收异步上传的图片的页面为upload.ashx 在这个ashx中对上传的图片处理的流程如下: contex ...

  8. iOS小技巧 - 为按钮设置不同状态下的背景色

    我们知道直接在Storyboard中设置按钮的背景色是不能根据不同状态来更改的,那问题来了,如果我们需要在不同的状态下(比如按钮没有被按下或者被按下),使得按钮呈现不同的背景色怎么办? 比如上图左边是 ...

  9. 系统重装 U盘安装XP操作系统开机出现提示txtsetup.sif怎么办

    你的这个问题 是安装xp时把xp做成u盘出现的 原因是xp没有在根本上支持这种安装 到win7后才支持的 解决方法有以下几种 1,刻录成cd 2重新下载xp ghost版的不会出现这个问题 3证实Ul ...

  10. django book学习问题记录

    —————————————————————————————————— 位置:第五章<模型> 问题描述(已解决): >>> p1 = Publisher.objects.c ...