rem | 易学教程

Firefox ESR 68 doesn't support rem units in an svg's dimensions. Workarounds?

阅读更多关于 Firefox ESR 68 doesn't support rem units in an svg's dimensions. Workarounds?

问题 Update: This is a missing feature, and is being worked on: https://bugzilla.mozilla.org/show_bug.cgi?id=1287054 I have this svg icon on my web portfolio (the Tor Project icon), which is at https://dougsilva.me/. If you open this page on Firefox ESR 68, it will ignore rem values in the width and height of the svg, making the icon have an inconsistent size compared to the other icons from FontAwesome. Its size will be nearly doubled. <svg id="torproject_icon" width="5.5rem" height="5.5rem"

rem移动端适配

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

关于移动端开发的一些总结

阅读更多关于关于移动端开发的一些总结

1、 piexl 像素知识 640 * 1136的图片能不能在iphone5上完全展示？ iphone5分辨率640*1136 逻辑像素与物理像素的关系 px逻辑像素：浏览器使用的抽象单位 dp，pt物理像素：设备无关像素 dpr：设备像素缩放比计算公式：1px = (dpr)^2 * dp iphone5的 dpr = 2； DPI:打印机每英寸可以喷的墨汁点（印刷行业） PPI:屏幕每英寸的像素数量，即单位英寸内的像素密度目前，在计算机显示设备参数描述上，二者意思一致计算公式：以iphone5为例：ppi = √（1136^2 + 640^2）/4 = 326ppi（视网膜retina屏）注意：单位为硬件像素（物理像素），非px PPI越高，像素数越高，图像越清晰。但可视度月低（小），系统默认缩放比越大。 retina屏（高清屏）：dpr都是>=2。 2、 viewport 手机浏览器默认为我们做了两件事情： ① 页面渲染在一个980px（ios）的viewport ② 缩放为什么要有viewport？一个300多像素的屏幕，放一个1000多像素的页面，会混乱，所以要先虚拟一个980像素的页面，然后进行缩放。度量|视口 visual viewport ==== 窗口缩放scale 布局 layout viewport 设计移动web

windows环境测试IP地址是否通

阅读更多关于 windows环境测试IP地址是否通

windows环境测试IP地址是否通脚本 @echo off rem 循环ping IP地址，并打印出IP对应的名称 FOR /F "eol=; tokens=1,2* delims=, " %%i in (ip.txt) do (ping -w 30 -n 1 %%i && echo %%i %%j >> ok.txt || echo %%i %%j >> no.txt) rem eol=c - 指一个行注释字符的结尾(就一个) rem skip=n - 指在文件开始时忽略的行数。 rem delims=xxx - 指分隔符集。这个替换了空格和制表符的默认分隔符集。 rem tokens=x,y,m-n - 指每行的哪一个符号被传递到每个迭代的 for 本身。 pause 参考： https://www.cnblogs.com/micro-chen/p/5694423.html 来源： 51CTO 作者： 520的罗链接： https://blog.51cto.com/gt520/2447793

rem vh vw vmin vmax ex ch

阅读更多关于 rem vh vw vmin vmax ex ch

rem 我们首先介绍下和我们熟悉的很相似的货。 em 被定义为相对于当前对象内文本的字体大小。如果你给body小哥设置了font-size字体大小，那么body小哥的任何子元素的1em就是等于body设置的font-size。 body { font-size: 14px; } div { font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px } 你看，这里div的字体大小是1.2em。解释来说，就是他从body那里继承的字体大小（这里是14px）的1.2倍，结果就是16.8px。但是，如果你用em一层一层级联得定义嵌套元素的字体大小又会花生什么事情呢？在下面这一小段代码里我们应用了和上面一样一样的CSS，每一个div都从它上一级父元素继承了字体大小，并且逐渐得增加。例子虽然在某些地方这正是我们想要的，但是通常情况下我们还是希望就依赖单一的相对度量单位就好。这时候嘛，我们就可以使用 rem 了。‘r’是“root”的缩写，意思就是1rem等于根元素的字体大小；大部分情况下，根元素就是元素了。 html { font-size: 14px; } div { font-size: 1.2rem; } 这样在上面的那三个嵌套的div的字体大小都是 1.2*14px = 16.8px 了。适用于网格布局 Rems

vue项目使用Vant框架Rem适配（postcss-pxtorem、lib-flexible ）的安装使用

阅读更多关于 vue项目使用Vant框架Rem适配（postcss-pxtorem、lib-flexible ）的安装使用

1.下载lib-flexible 使用的是vue-cli+webpack，通过npm来安装的 npm i lib-flexible --save 2.引入lib-flexible 在main.js中引入lib-flexible import 'lib-flexible/flexible' 3.设置meta标签通过meta标签，设置设备宽度以及缩放比例 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 4.安装postcss-pxtorem 一款 postcss 插件，用于将单位转化为 rem npm install postcss-pxtorem -D 5.配置postcss-pxtorem 在安装postcss-pxtorem的时候会生成一个文件.postcssrc.js 在根目录找到.postcssrc.js文件，可以在此配置的基础上根据项目需求进行修改，如： module.exports = { plugins: { //... 'autoprefixer': { browsers: ['Android >= 4.0', 'iOS >= 7'] }, 'postcss-pxtorem'

CSS单位解释.

阅读更多关于 CSS单位解释.

长度单位主要有以下几种em ex ch rem vw vh vm cm mm in pt pc px %，大概可以分为几种“绝对单位”和“相对单位”和“百分比单位”。绝对单位：px in cm mm 相对单位：em rem pt pc ex ch 百分比单位：vw vh vm % 下面主要说几个常用的单位 px：绝对单位，页面按精确像素展示 em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。 rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。　　　rem在移动端应用可参考淘宝的页面http://m.taobao.com vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。 vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。 vmin：vw和vh中较小的那个。 vmax：vw和vh中较大的那个。　　　　vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，ios safari 8+支持，android browser4.4+支持，chrome for android39支持

移动端常用单位（%和rem）

阅读更多关于移动端常用单位（%和rem）

px % em （ font-size的值就是 1em，如果自身没有设置font-size，则去找父元素的；常用于 text-indent:2em 来缩进两个字符） rem（html的font-size的大小，就是1rem ；rem是相对于根元素<html>，即rem继承的是html的font-size，不是body！！！） vw （100vw表示视口宽度的1%）由于兼容性的问题，vw vh 这种视口单位用的不是很多在PC端的开发工具中，模拟移动端最小字体规定是12px，小于12px的统一按照12px来目前在移动端，rem是主流案例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1"> <title>Document</title> <link rel="stylesheet" href="font/iconfont.css"> <style> *{margin:0;padding:0;box-sizing:border-box;} body{background

web app变革之rem

阅读更多关于 web app变革之rem

rem这是个低调的css单位，近一两年开始崭露头角，有许多同学对rem的评价不一，有的在尝试使用，有的在使用过程中遇到坑就弃用了。但是我对rem综合评价是用来做web app它绝对是最合适的人选之一。 rem是什么？ rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。为什么web app要使用rem？这里我特别强调web app，web page就不能使用rem吗，其实也当然可以，不过出于兼容性的考虑在web app下使用更加能突显这个单位的价值和能力，接下来我们来看看目前一些企业的web app是怎么做屏幕适配的。 1、实现强大的屏幕适配布局：最近iphone6一下出了两款尺寸的手机，导致的移动端的屏幕种类更加的混乱，记得一两年前做web app有一种做法是以320宽度为标准去做适配，超过320的大小还是以320的规格去展示，这种实现方式以淘宝 web app为代表作，但是近期手机淘宝首页进行了改版，采用了rem这个单位，首页以内依旧是和以前一样各种混乱，有定死宽度的页面，也有那种流式布

rem布局2

阅读更多关于 rem布局2

平时我使用的都是阿里的布局方案，所以在这里简单梳理一下该方法的大概实现 ;(function(win, lib) { var doc = win.document; var docEl = doc.documentElement; var metaEl = doc.querySelector('meta[name="viewport"]'); var flexibleEl = doc.querySelector('meta[name="flexible"]'); var dpr = 0; var scale = 0; var tid; //写法不错 var flexible = lib.flexible || (lib.flexible = {}); if (metaEl) { console.warn('将根据已有的meta标签来设置缩放比例'); //获取初始缩放比例 var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/); if (match) { scale = parseFloat(match[1]); //取整 dpr = parseInt(1 / scale); //1 } } else if (flexibleEl) { var content = flexibleEl

订阅 rem