rem | 易学教程

如何处理跨平台的自适应三

阅读更多关于如何处理跨平台的自适应三

相信大家在面试的过程中总会被问到如何处理自适应这样的相关问题，自适应其实就是根据视口的大小或者说用户平台的不同呈现出不同或相同的样式，有这么几种方案：使用flexbox弹性布局的方法固定一个某些宽度，使用一个模式，加上少许的媒体查询方案使用 rem ---------------------------分------------割------------------------------------- 淘宝rem的例子看看淘宝在不同分辨率下，呈现的效果：淘宝的效果跟网易的效果其实是类似的，随着分辨率的变化，页面元素的尺寸和间距都相应变化，这是因为淘宝的尺寸也是使用了rem的原因。在介绍它的做法之前，先来了解一点关于viewport的知识，通常我们采用如下代码设置viewport: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 这样整个网页在设备内显示时的页面宽度就会等于设备逻辑像素大小，也就是device-width。这个device-width的计算公式为：设备的物理分辨率/(devicePixelRatio * scale)，在scale为1的情况下，device-width = 设备的物理分辨率

从网易与淘宝的font-size思考前端设计稿与工作流

阅读更多关于从网易与淘宝的font-size思考前端设计稿与工作流

最近翻了一下关于移动端的rem的使用，怎样最方便。在读到流云诸葛的一篇关于《从网易与淘宝的font-size思考前端设计稿与工作流》的文章后，来总结一下。然而根据我以往做移动端web项目的时候，设计稿一般是640或者750的，我一般会在head里面这样写： <meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi"> 做移动端活动的时候结构也一般这样： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="yes" name="apple-mobile-web-app-capable">  <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <title

rem在响应式布局中的应用

阅读更多关于 rem在响应式布局中的应用

rem/em/px/pt的基友关系 px 像素相对长度单位,相对于显示器屏幕分辨率而言 em 相对长度单位,根据其父元素来设置字体大小 pt point，是印刷行业常用单位，等于1/72英寸 rem CSS3新增的一个相对单位,是根据网页的跟元素（html）来设置字体大小 rem应用于适配 rem的特性同样适用于width和height，我们可以根据根元素的font-size值来改变元素的宽高值，由此我们应该可以联想到我们可以根据屏幕大小动态地给html设定不同的值，从而达到我们css样式中的适配效果。 rem的适配规则 1.选择基准虽然我们所写出的页面要在不同的屏幕大小设备上运行，但是我们写页面的时候，必须要选择其中一种屏幕大小作为初始的基准，而这个基准的选择应该根据我们所拿到的视觉稿来决定， 2.rem数值计算正常情况下rem的值默认为16px，这样在整个页面的css计算过程中太过繁琐。比如，现在有个30px宽度的元素，就得写成30/16rem。对于整个页面来说工作量还是挺大的。所以这里提供了俩种方法可以将html的font-size设置成100px 这样设置，在写单位时直接将数值除以100在加上rem的单位就可以了。如果设计稿的字体是16px；我们就可以写成1.6rem。这里为什么不用10？因为google等浏览器对最小字体有限制，即最小为12px

rem与em

阅读更多关于 rem与em

链接:http://caibaojian.com/rem-vs-em.html 你可能已经很熟练使用这两个灵活的单位，但你可能不完全了解何时使用 rem ，何时使用 em。本教程将帮你弄清楚! Em 和 rem都是灵活、可扩展的单位，由浏览器转换为像素值，具体取决于您的设计中的字体大小设置。如果你使用值 1em 或 1rem，它可以被浏览器翻译成从16px到 160px 或其他任意值。 CSS 边距设置为 1em 浏览器翻译成16px CSS padding设为 16px 浏览器翻译成160px 另一方面，浏览器使用 px 值，所以 1px 将始终显示为完全 1px。滑动滑块试试这个 CodePen 例子，你可以看到rem 和 em 单位的值可以转化为不同的像素值，而 px 单位保持固定大小: 最大的问题是使用 em 和 rem 单位可以让我们的设计更加灵活，能够控制元素整体放大缩小，而不是固定大小。我们可以使用这种灵活性，使我们在开发期间，能更加快速灵活的调整，允许浏览器用户调整浏览器大小来达到最佳体验。 Em 和 rem 单位提供的这种灵活性和工作方式都很相似，所以最大的问题是，我们何时应使用 em 值，何时应使用 rem 值呢? 主要区别 Em 和 rem 单位之间的区别是浏览器根据谁来转化成px值理解这种差异是决定何时使用哪个单元的关键。我们要通过复习

【学习】点分治

阅读更多关于【学习】点分治

点分治是一种基于分治的算法整体思想为不断删根把一棵较大的树拆成n个小树再分别求解再合并关于此题我们先随意指定一个根，树上路径就分成了过根的和不过根在一个子树里的这样经过根的路径即为dis[u]+dis[v],dis[i]是i到根的路径长度不经过根的就再找这棵子树的根如此递归显然分治把一个无根树转化为有根树，找重心 void getrt(int u,int fa){//找根 sz[u]=1;maxp[u]=0; for(int i=head[u];i;i=e[i].nxt){ int v=e[i].to; if(v==fa||vis[v])continue; getrt(v,u); sz[u]+=sz[v]; maxp[u]=max(maxp[u],sz[v]); } maxp[u]=max(maxp[u],sum-sz[u]); if(maxp[u]<maxp[rt])rt=u; } 找重心的意义在于每次选取子树的重心为子树的树根进行处理，这样总的递归深度不会超过 l o g N层以保证复杂度预处理 void calc(int u){ int p=0; for(int i=head[u];i;i=e[i].nxt){ int v=e[i].to; if(vis[v])continue; rem[0]=0; dis[v]=e[i].w; getdis(v,u);/

windows cmd 启动解压spring boot

阅读更多关于 windows cmd 启动解压spring boot

windows 没有JDK 环境启动springboot 项目第一步先将springboot 项目解压开然后将解压开的文件放入到bin文件夹下 bin 文件同一级将jre 复制过来第二步在bin目录下创建一个cmd 文件命名为start.cmd @echo off @REM 设置编码为UTF-8 chcp 65001 @REM 开始执行命令 :start @REM 返回上级 cd .. @REM 获取上级文件夹软件目录 set P_HOME = %cd% set CLASS_PASS = "%P_HOME%\lib" set JRE = "%P_HOME%\jre\bin\java.exe" @REM 回到当前目录下 cd %~dp0 @REM 设置启动类入口 set Main_ClASS = org.springframework.boot.loader.JarLauncher @REM 获取启动类的所有参数 set JAVA_ARGS = %* @REM 打印jre环境位置 echo JRE = "%JRE%" @REM 打印启动类入口 echo Main_ClASS = "%Main_ClASS%" @REM 打印传入参数 echo JAVA_ARGS = "%JAVA_ARGS%" @REM 执行命令 %JRE% %Main_ClASS% %JAVA_ARGS%

Vue实现PC端分辨率自适应

阅读更多关于 Vue实现PC端分辨率自适应

方案 lib-flexible + px2remLoader lib-flexible ：阿里可伸缩布局方案 px2rem-loader ： px 转 rem 安装依赖 npm install px2rem-loader -D npm install lib-flexible -S 引入依赖 main.js 引入 lib-flexible import 'lib-flexible' px转换成rem vue-loader 的 options 和其他样式文件 loader 最终是都是由 build/utils.js 里的方法生成的，我们只需在 cssLoader 后再加上一个 px2remLoader 即可， px2rem-loader 的 remUnit 选项意思是 1rem=多少像素，结合 lib-flexible 的方案，我们将 px2remLoader 的 options.remUnit 设置成设计稿宽度的 1/10 ，这里假设设计稿宽为 1920px build/utils.js 中添加 px2remLoader const cssLoader = { loader: 'css-loader', options: { sourceMap: options.sourceMap } } // 增加代码，px转rem配置（需要将px2remloader添加进loaders数组中）

7个你可能不认识的CSS单位:rem vh vw vmin vmax ex ch

阅读更多关于 7个你可能不认识的CSS单位: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一层一层级联得定义嵌套元素的字体大小又会花生什么事情呢？每一个div都从它上一级父元素继承了字体大小，并且逐渐得增加。虽然在某些地方这正是我们想要的，但是通常情况下我们还是希望就依赖单一的相对度量单位就好。这时候嘛，我们就可以使用 rem 了。 ‘r’是“root”的缩写，意思就是1rem等于根元素的字体大小；大部分情况下，根元素就是元素了。适用于网格布局 rem 不仅仅只是在设置字体大小上很方便。你可以用基于html根元素字体大小的rem作为整个网格布局或者UI库的大小单位，然后在其他特定的地方用em单位。这样将会给你带来更多的字体大小和伸缩的可控性， .container { width:

批处理-配置网卡

阅读更多关于批处理-配置网卡

固定IP @echo off REM 声明采用UTF-8编码 chcp 65001 REM netsh interface ip show interfaces REM ipconfig/all set Nic = 以太网 REM set /p Nic = 输入网卡名称: set Addr = 192.168.1.1 set Mask = 255.255.255.0 set Gway = 192.168.1.0 REM set Dns1 = 10.15.0.1 REM set Dns2 = 10.100.1.2 REM set Wins1 = 10.15.0.1 REM set Wins2 = 10.100.1.2 echo ------------------------------------------------------ echo 正在进行IP设置，请稍等 echo. IP地址 = %Addr% echo. 子网掩码 = %Mask% echo. 默认网关 = %Gway% netsh interface ipv4 set address name = %Nic% source = static addr = %Addr% mask = %Mask% gateway = %Gway% gwmetric = 0 rem echo. 首选DNS = %Dns1% rem

在vue项目中的rem适配

阅读更多关于在vue项目中的rem适配

有个朋友问我在vue项目怎么做rem适配，我工作中都是用的dva，但是我感觉道理都是一样的，换汤不换药。配完就顺手写下来吧！需要安装两个插件库 lib-flexible和px2rem-loader yarn add lib-flexible yarn add px2rem-loader flexible.js是淘宝官方H5移动适应解决方案。它做了三件事： 1、动态改写标签 2、给<html>元素添加data-dpr属性，并且动态改写data-dpr的值 3、给<html>元素添加font-size属性，并且动态改写font-size的值我个人理解就是做了一个动态的媒体查询，实时设置根结点的font-size px2rem会在项目编译的过程中根据根结的font-size值将我们项目css中的px单位转成rem。但是有些是我们不需要转成rem的，比如font-size或者是一些固定大小的原素。这个时候我们可以把px写成PX，PX在编译中不会被转成rem。但是格式化代码的时候会把PX格式化成px，这点需要注意一下。另一种避免转成rem的方式就是写成行内样式，哈哈。 px2rem的使用是需要我们简单的配置一下的。px2rem是一个loader，vue中所有的loader都是在一个utils.js文件中配置生成的，所以我们只需要找到cssLoader这个对象

订阅 rem