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. javap -c 字节码含义

    aconst_null         将null对象引用压入栈 iconst_m1         将int类型常量-1压入栈 iconst_0         将int类型常量0压入栈 icons ...

  2. 程设刷题 | 程序设计实践II-2017(部分)

    目录 1165-算术题 题目描述 代码实现 1184-Tourist 1 题目描述 代码实现 1186-Tourist 2 题目描述 代码实现 1224-LOVE 题目描述 代码实现 1256-湘潭大 ...

  3. sql server 存储过程中使用变量表,临时表的分析(续)

    最近,我有一朋友,对我说他的数据库中的很多存储过程,执行都是超时.让我替他看看是什么原因.我一看,原来他的存储过程中用了很多的临时表与变量表.于是我跟他说过犹不及. 在存储过程中使用临时表或变量表,使 ...

  4. NSPredicate谓词查询

    Cocoa提供了一个类NSPredicate类,该类主要用于指定过滤器的条件,该对象可以准确的描述所需条件,对每个对象通过谓词进行筛选,判断是否与条件相匹配.谓词表示计算真值或假值的函数. NSPre ...

  5. win10 创建安卓模拟器及启动的方法

    一打开 安卓 studio 然后点击AVD manager 创建一个模拟器 二 通过命令行快速启动模拟器 D:\Android\sdk\tools\emulator.exe -netdelay non ...

  6. python良好的编程习惯

    良好的编程习惯 2.1 在程序中是用丰富的注释,注释有助于其他程序员理解程序,有助于程序调试(发现和排除程序中的错误),并列出有用的信息.以后修改或更新代码时,注释还有助于理解当初自己编写的程序 2. ...

  7. log4j教程 11、日志记录到文件

    要写日志信息到一个文件中,必须使用org.apache.log4j.FileAppender.有以下FileAppender的配置参数: FileAppender配置: 属性 描述 immediate ...

  8. ElasticSearch refresh和flush的理解

    在索引数据的时候,要保证被索引的文档能够立即被搜索到,就要涉及到_refresh 和_flush这两个方法. 1.fresh 当索引一个文档,文档先是被存储在内存里面,默认1秒后,会进入文件系统缓存, ...

  9. [GraphQL] Reuse Query Fields with GraphQL Fragments

    A GraphQL fragment encapsulates a collection of fields that can be included in queries. In this vide ...

  10. PL-SQL 包的创建和应用

     PL-SQL 包的创建和应用 ①简单介绍     包是一组相关过程.函数.变量.常量和游标等PL/SQL程序设计元素的组合,它具有面向对象程序设计语言的特点.是对这些PL/SQL 程序设计元素的 ...