浅析rem和em和px vh vw和% 移动端长度单位

   2016-06-20 0
核心提示:下面小编就为大家带来一篇浅析rem和em和px vh vw和% 移动端长度单位。小编觉得挺不错的,现在分享给大家,也给大家做个参考,一起跟随小编过来看看吧

1.rem和em、px

首先来说说em和px的关系 em是指字体高度 浏览器默认1em=16px,所以0.75em=12px;我们经常会在页面上看到根元素写的font-size:65%; 这样em就成了16px*62.5=10em;这是显示在页面的字体大小是10px;

这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了,

em的特点

em是个相对值 他会根据父级元素的大小而变化


但是如果嵌套了多个元素 要计算它的大小,是件很头疼的事情

这样的情况下,就出现了rem

rem的区别在于它是相对于根基元素的,因此不会被它的父类影响到

结论:之所以前端行业做移动端会普遍默认用rem或em,是因为可以通过js控制根元素(或者用@media)来达到适配各种分辨率的字体大小的效果

1.vh、vw和%

vh vw全称为Viewport Height和Viewport Width 意思就是视窗

很多情况下它们都是重叠的 各有优缺点 概括一下 就是

当处理宽度的时候,%单位更合适。处理高度的时候,vh单位更好。

(ps:比如你需要定位一屏内的一段文字,如果你用% 它计算的是你整个dom的高度,而vh计算的当前一屏的高度)

以上这篇浅析rem和em和px vh vw和% 移动端长度单位就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持乐学网(lexue001.com)。

原文地址:http://www.cnblogs.com/shilie/p/5441125.html

 
标签: rem vh vw px em
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • react 运行报错 Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.
    react 运行报错 Error: PostCSS plugin postcss
    postcss-pxtorem使用方法:https://www.cnblogs.com/liangziaha/p/13636936.html 这里报错 postcss-pxtorem 需要 8. 我以为要使用postcss-pxtorem 8.以上的版本就去看了一下postcss-pxtorem版本最高才6.0  这里降低  postcss-pxtorem@5.1.1npm i postcs
    03-08
  • 当react 项目使用px2rem
    参考资料:http://easywork.xin/2018/09/02/react-2/ 我拿到的设计图 是  375px //配置px2rempx2rem({remUnit: 37.5}) 在index.html 加以下的scriptscriptdocument.getElementsByTagName('html')[0].style.fontSize = (document.documentElement.clientWi
    03-08
  • CSS3中的px,em,rem,vh,vw辨析 css3 vw
    1、px:像素,精确显示2、em:继承父类字体的大小,相当于“倍”,如:浏览器默认字体大小为16px=1em,始终按照div继承来的字体大小显示,进场用于移动端          em换算工具:http://www.runoob.com/tags/ref-pxtoemconversion.html3、rem:与em类似,
    03-08
  • CSS——px、pt、em、rem、%、vw、vh、vm的用法
    CSS——px、pt、em、rem、%、vw、vh、vm的用法
    序言  平时在布局中较多使用px和%设置大小或者尺寸,但是在有些场景仅使用这两个显然不行,虽然平时使用时仅仅调理出差强人意的效果,没有细细把控各个属性的具体内涵。CSS中的尺寸(长度)单位有px、em、rem、%、vw、vh、vm,其中rem、vw、vh、vm(兼容性太差
    03-08
  • webpack4 使用CommonsChunkPlugin遇到 webpack.optimize.CommonsChunkPlugin has been removed, please use con
    webpack4 使用CommonsChunkPlugin遇到 webpack.
    再webpack.config.js 文件中optimization: { //抽取公共的dm splitChunks: { cacheGroups: { commons: {name: "commons",chunks: "initial", minChunks: 2 } } } },  
    03-08
  • Bootstrap 模态对话框只加载一次 remote 数据的
    原文: https://my.oschina.net/qczhang/blog/190215?p=1
    03-08
  • 手把手教你如何在vue项目中使用rem布局
    手把手教你如何在vue项目中使用rem布局
    目录如何在vue项目中使用rem布局方法一:使用lib-flexible1. 安装包2. 引入文件3. 根据需要设置rem4.使用rem方法二:使用postcss-pxtorem1. 安装包2. 创建rem.js文件3. 新建 .postcssrc.js4. 在main.js中引入5. 设置body的font-size6. 可参照流程图总结如何在
    03-08
  • 通过vue如何设置header vue设置rem
    通过vue如何设置header vue设置rem
    目录vue设置header后端交互对vue中contentType,和ajax的contentType区别对待当服务器端需要设置contentType:“application/json”:全局设置请求头1.使得请求头中存在token如何获取真实的token,扩展:vue 配置公共头部(header)vue设置header使用vue-resource
    03-08
  • .scss写法及如何转化为.css scss px转rem
    scss可视化工具:http://koala-app.com/index-zh.htmlscss讲解地址:http://www.cnblogs.com/adine/archive/2012/12/18/2823669.html官网:http://sass-lang.com/ less,scss区别:http://www.kuqin.com/language/20120325/319416.html 1.  安装rubyinstalle
    03-08
  • CSS-自适应网页使用@media和rem css 自适应
    @media 查询@media 媒体查询选择性加载css,意思是自动探测屏幕宽度,然后加载相应的CSS文件。可以针对不同的屏幕尺寸设置不同的样式,特别是需要设置设计响应式的页面,@media 是个不错的选择用法: @media 设备类型 and (设备特性-宽度) {   // css 样
    03-08
点击排行