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. [POI2007]Tourist Attractions

    题目大意: 给你一个$n(n\leq 2\times 10^4)$个点,$m(m\leq 2\times 10^5)$条边的带边权的连通图.其中有$k(k\leq 20)$个关键点.关键点之间有$g$ ...

  2. 阿里云ECS在CentOS 6.9中使用Nginx提示：nginx: [emerg] socket() [::]:80 failed (97: Address family not supported by protocol)的解决方法

    说明: 1.[::]:80这个是IPv6的地址. 2.阿里云截至到今天还不支持IPv6. 解决方式: 1.普通解决方式:开启IPv6的支持,不过这个方法在阿里云行不通. vim /etc/nginx/ ...

  3. debian下QT4编程环境的建立

    转:http://moosewoler.blog.163.com/blog/static/6986605200801013442336/ QT是一款跨平台的C++编程framework.QT的主要特性 ...

  4. JAVA常见算法题(十五)

    package com.xiaowu.demo; /** * * 输入三个整数x,y,z,请把这三个数由小到大输出. * * @author WQ * */ public class Demo15 { ...

  5. UVa1347 Tour

    /*----UVa1347 ---首相两边方向走不方便,可以看做:两个人同时从最左边出发,沿着两条不同路径走到终点,除了起点和中点外 其他点恰好被走过一遍 ---用dp[i][j]表示1-max(i, ...

  6. THINKPHP nginx设置路由为PATHINFO模式

    首先THINKPHP配置文件中设置 //url访问模式为rewrite模式 'URL_MODEL'=>'2', 然后再在nginx.conf文件中,找到这一条语句 #access_log log ...

  7. Hive JDBC——深入浅出学Hive

    第一部分:搭建Hive JDBC开发环境 搭建:Steps •新建工程hiveTest •导入Hive依赖的包 •Hive  命令行启动Thrift服务 •hive --service hiveser ...

  8. BeagleBone Black板第四课：简单LED控制实验

    BBB板第四课:简单LED控制实验 学习BBB板的终于目的是想像单片机一样做控制,但控制思路全然不一样(Linux下控制硬件设备实质就是对相关设备虚拟文件的读写).研究了几天头都大了还是没有进展,网上 ...

  9. Java 学习之网络编程案例

    网络编程案例 一,概念 1,网络编程不等于网站编程 2,编程只和传输层打交道,即TCP和UDP两个协议 二,案例 1,TCP实现点对点的聊天 Server端:两个输入流:读客户端和控制台,一个输出端: ...

  10. Centos 7 联想Y430P无线网卡驱动安装 过程参考

    Centos 7  联想Y430P无线网卡驱动安装 过程参考 ABRT 已检测到 [root@endv ~]# yum install -y rdesktop 已加载插件:fastestmirror, ...