rem | 易学教程

CSS 单位em和rem的区别

阅读更多关于 CSS 单位em和rem的区别

在css中单位长度用的最多的是px、em、rem，这三个的区别是：　　px是固定的像素，一旦设置了就无法因为适应页面大小而改变。　　em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。对于em和rem的区别一句话概括： em相对于父元素，rem相对于根元素。 rem中的r意思是root（根源），这也就不难理解了。 em 子元素字体大小的em是相对于父元素字体大小元素的width/height/padding/margin用em的话是相对于该元素的font-size 上代码： <div> 我是父元素div <p> 我是子元素p <span>我是孙元素span</span> </p> </div> div { font-size: 40px; width: 10em; /* 400px */ height: 10em; border: solid 1px black; } p { font-size: 0.5em; /* 20px */ width: 10em; /* 200px */ height: 10em; border: solid 1px red; } span { font-size: 0.5em; width: 10em; height: 10em; border: solid 1px blue; display:

MODIS MRT安装、影像批处理投影及拼接

阅读更多关于 MODIS MRT安装、影像批处理投影及拼接

注：本文是作者上学期间科研工作需要所总结，原文发表在QQ个人空间，因工作若干年后还有同学需要做类似工作，公开至此处，便于更多人检索到。作者：Sinsonglew 出处： http://www.cnblogs.com/sinsonglew 欢迎转载，也请保留这段声明。thanks :) 1 MRT工具的安装检查自己的电脑上是否已安装 java.exe （搜索 java.exe 即可，当然也可不检查，重新安装一份），在 WINDOWS 平台下， JAVA. 虚拟机的安装路径及 MRT 的安装路径不宜包含空格。在 WINDOWS 平台下的安装过程中，输入路径名注意斜杠“ \ ”应改为“ / ”，比如 c:\Modis must be entered as c:/Modis . 安装 MRT 之前需要先安装 JAVA 虚拟机，因为安装 MRT 的过程中会提示输入 java.exe 的路径。 2 MRT工具的使用及批处理操作 2.1 界面操作安装完毕之后，打开 MRT 的安装路径文件夹，打开 bin 文件夹，找到 ModisTool.bat ，创建该文件的快捷方式到桌面，双击快捷方式便进入 MRT 的 GUI 界面（见 Fig.1 ）。 Fig.1 中，对 MODIS MYD13Q1 数据，选择输出 EVI 、 NDVI 两个数据，指定输出路径输出文件格式为 GEOTIFF

css3单位em，rem，px，vw，vh等

阅读更多关于 css3单位em，rem，px，vw，vh等

昨天发现了个好用的方法去设置手机端的rem单位，在这里记录下。 html{ 　　font-size:calc(100vw/7.5); } 这是按照750的设计稿（也就是iphone6的设计稿）。 100vw是设备的宽度，除以7.5可以让1rem的大小在iPhone6下等于50px。替换页面中的单位，把所有的px单位替换成rem，除以100，比如某字体大小在设计稿上是36px，就是0.36rem。在iPhone6下，所有元素的尺寸还是和视觉稿的尺寸一样，而iphone5/iphone6plus中，因为设备的宽度变小/变大了，100vw/7.5得到的值，会相应的变小、变大，即rem的单位值会变，页面中所有的尺寸会等比例缩放。 so,这样就做到l了针对不同分辨率的设备保持视觉一致了。 but，vw单位，在低版本的设备可能不支持，那就需要用js来处理一下： document.documentElement.style.fontSize = window.innerWidth/3.75 + 'px' ps：之所以让1rem等于50px，而不是1rem等于1px，是因为在chrome下针对中文的最小字体是12px。下面介绍下css的各种单位： css单位 px ：绝对单位，页面按精确像素展示 em ：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算

css单位——vh vw em rem等详解

阅读更多关于 css单位——vh vw em rem等详解

最近看别人写代码，用到了height:100vh;当时感觉很有意思，以前没有见过vh这个单位，于是乎就到CSS3参考手册找答案了。。。自己顺便做了下总结： 1.vh vw:相对于视口的高度，宽度。视口被均分为100单位的vh,vw，神马意思呢？看个demo 1 <!DOCTYPE html> 2 <html lang="Zh-cn"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>css_vh_vw</title> 7 </head> 8 <style type="text/css"> 9 *{ 10 margin: 0; 11 padding: 0; 12 } 13 .a{ 14 height:10vh; 15 width: 10vw; 16 background-color: #3a9; 17 } 18 </style> 19 20 <body> 21 <div class="a"> 22 23 </div> 24 </body> 25 </html> View Code 效果图：先说下我的浏览器窗口大概是1366*662，而代码里宽高分别是10vh 10vw;相当于把浏览器视口分成100份，取10vh 10vw,相当于取其中的10份，1366/100*10约等于136.59 662/100*10约等于66.19。 2.rem em

rem适配布局

阅读更多关于 rem适配布局

rem基础 rem单位 rem（root em）是一个相对单位，类似于em,em是相对于父元素的字体大小，不同的是rem的基准是相对于html元素的字体大小。比如，根元素(html)设置font-size=12px;非根元素设置width:2rem;则换成px,表示就是24px 媒体查询媒体查询（Media Query）是CSS3新语法使用@media查询，可以针对不同的媒体类型定义不同的样式 @media可以针对不同的屏幕尺寸设置不同的样式当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面语法规范 @media mediatype and|not|only (media feature){ css-code; } 用@media开头注意@符号 mediatype 媒体类型值解释说明 all 用于所有设备 print 用于打印机和打印预览 screen 用于电脑屏幕，平板电脑，智能手机等关键字 and not only 1.and:可以将多个媒体特性连接在一起，相当于’且’的意思 2.not:排除某个媒体类型，相当于‘非’的意思，可以省略。 3.only:指定某个特定的类型，可以省略 media feature 媒体特性必须有小括号包含值解释说明 width 定义输出设备中页面可见区域的宽度 min-width

rem 转换成 px

阅读更多关于 rem 转换成 px

/** * rem 转换成 px * @method pxToRem * @param { number } rem 例如 rem = 0.46 时设置的是0.46rem在项目里面对应的值是46px * @return { number } 在iPhone6状态下的rem值转换成对应的px */ export const pxToRem = ( rem = 0.46 ) => { var html = document . documentElement var hWidth = html . getBoundingClientRect ( ) . width hWidth = Math . min ( hWidth , 750 ) return rem * hWidth / 3.75 } 来源： CSDN 作者： sank2017 链接： https://blog.csdn.net/sank2017/article/details/104005970

用rem适配移动端

阅读更多关于用rem适配移动端

常见方式： 1. 固定宽度(320)做法：这样前端倒是爽了，可是大页面两边有留白，小页面图标文字又会缩的很小，用户体验极其不好。 2. 流式布局：其实就是用%，这样宽度倒还差不多，高度怎么搞？所以这种布局一般都是宽度自适应高度写死，显的很不协调，另外对设计也有很大的限制，另外还有兼容性方面的问题。 3. 响应式布局：说白了就是利用CSS3中的Media Query（媒介查询），喊的很火，谁用谁知道，简直累死人不要命。 4. 设置viewport进行缩放：以320 宽度为基准，进行缩放，最大缩放为320*1.3 = 416，基本缩放到416都就可以兼容iphone6 plus的屏幕了。<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no"> 5. 利用vh、vw适配：兼容性太差。 rem是什么 rem是一个相对根元素html字体大小的单位，所以它的大小是由html的fontSize大小决定的，假如我把html的fontSize设置为10px，此时的1rem就等于10px，假如我把html的fontSize设置为100px，此时的1rem就等于100px，这也正是我们能用rem做移动端适配的根本原因，就是通过不同屏幕下改变根元素fontSize的大小

02_css3.0 前端长度单位 px em rem vm vh vm pc pt in 你真的懂了吗？

阅读更多关于 02_css3.0 前端长度单位 px em rem vm vh vm pc pt in 你真的懂了吗？

1：废话不多说，直接看如下图表： 2：px就不过多介绍了，就是像素点的大小，加入您的屏幕分辨率为1920，则每一个相当于每一个有横着的1920个像素点； 3：em 为相对单位，一般以 body 内的 font-size 为基准进行定义，默认值 1em = 16px，假如说我们想使用 “1em” = “10px” 来取代默认值 “1em” = “16px”，应写如下代码： body { font-size: 62.5%; /*10 ÷ 16 × 100% = 62.5%*/ } h1 { font-size: 2.4em; /*2.4em × 10 = 24px */ } ul{ 　　font-size: 125%; /* 基准变成了20px */ } li { 　　font-size: 1.4em; /*1.4 × ? = 14px ? */ } 但是问题来了，由于 “em” 是相对于父级元素讲的，所以加入 ul 不定义基准大小，则下面的 li 将级成原本的默认值 “1em” = “16px”，但是这样换算单位会很麻烦，但是每一个父级元素你都设置基准大小，平白地增加了无穷的代码编辑烦恼，这该怎么办呢？ 4：结合上面种种情况，rem 应运而生！！！在 W3C官网上是这样描述 rem 的—— “font size of the root element” 。即当设置了 html{

em rem vh vw

阅读更多关于 em rem vh vw

em 在做手机端的时候经常会用到的做字体的尺寸单位 em就相当于“倍”，相对于父级比较 rem 这里的r就是root的意思，意思是相对于根节点来进行缩放当有嵌套关系的时候，嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放。 vh 当前屏幕可见高度的百分比 height:100vh == height:100% vw 当前屏幕宽度的百分比 width:100vw == width:100% 来源： https://www.cnblogs.com/awakin/p/10722204.html

rem移动端适配

阅读更多关于 rem移动端适配

rem作为一个低调的长度单位，由于手机端网页的兴起，在屏幕适配中得到重用。使用 rem 前端开发者可以很方便的在各种屏幕尺寸下，通过等比缩放的方式达到设计图要求的效果。 rem 的官方定义『The font size of the root element.』，即以根节点的字体大小作为基准值进行长度计算。一般认为网页中的根节点是 html 元素，所以采用的方式也是通过设置 html 元素的 font-size 来做屏幕适配，但实际情况真有这么简单吗？首先我们来看看使用 rem 实现手机屏幕适配的常用方案。以设计稿的宽度为 640px ，即： designWidth = 640 ，同时设定在640px屏宽下 1rem=100px ; 设置 1rem=100px 的优点不言而喻。前端开发者在切图、重构页面的时候，通过直接位移小数点的方式，就可以将UI图中测量到的 px 值换算成对应的 rem 值，方便快捷。此外，在 head 中我们还设置了：<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" /> 下面给出几个方案： 1. @media screen and (min-width: 320px) {html

订阅 rem