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. 每天一个linux命令9之crontab 定时任务

    crond 是linux用来定期执行程序的命令.当安装完成操作系统之后,默认便会启动此  任务调度命令.crond命令每分锺会定期检查是否有要执行的工作,如果有要执行的工作便会自动执行该工作. 1语法 ...

  2. Android Developer -- Bluetooth篇 概述

    Bluetooth 安卓平台支持蓝牙网络协议栈,它允许设备与其他蓝牙设备进行无线交换数据.应用程序框架通过安卓蓝牙APIs提供访问蓝牙功能.这些APIs使应用程序通过无线连接到其他蓝牙设备,使点对点和 ...

  3. 理解内存----优化SQL Server内存配置

    http://blog.csdn.net/burgess_liu/article/details/17757655

  4. mybatis-mysql小优化

    原文:http://blog.csdn.net/jinzhencs/article/details/51656548 1.查询某条记录是否存在 <!-- 查询s是否被创建过:Uuid,name, ...

  5. VUE -- Mac上解决Chrome浏览器跨域问题

    最近做前端开发总是遇到一个很奇怪的现象,同一个AJAX请求,在Chrome里调试的时候就会提示跨域,但是在手机模拟器或者真机上调试的时候就不会,于是百度了一下,发现是Chrome的安全策略导致的,需要 ...

  6. JAVA常见算法题(十九)

    package com.xiaowu.demo; /** * * 有一分数序列:2/1,3/2,5/3,8/5,13/8,21/13...求出这个数列的前20项之和. * * * @author WQ ...

  7. JAVA常见算法题(九)

    package com.xiaowu.demo; /** * * 一个数如果恰好等于它的因子之和,这个数就称为"完数".例如6=1+2+3.编程找出1000以内的所有完数. * * ...

  8. MessageFormat.format 字符串的模板替换

    项目目前在消息的模版,模版中需要替换很多参数,比方说“用户名”,“日期”等等.不过目前没有想到更好的替换参数的方法,所以目前只能使用一个比较简单的方式来实现.这个方式太死板,参数对应必须要在代码中写死 ...

  9. python多线程,守护线程

    https://www.cnblogs.com/liuyang1987/p/6292321.html

  10. Java:网络编程之登陆服务器

    1. 客服端:浏览器(telnet) 服务端:自定义 2. 客服端:浏览器 服务端:TomCat服务器 3. 客服端:自定义 服务端:TomCat服务器   //例子如下: import java.n ...