rem | 易学教程

淘宝手机rem的如何使用

阅读更多关于淘宝手机rem的如何使用

1.主要介绍几个移动端常用的单位rem、vw、vh，配合传统的px、百分比、<viewport>标签，兼容适配移动端的各种分辨率的手机端。　　rm : 这个单位是以父元素为标准来进行计算，例如：父元素 font-size:16px; 子元素： font-size:0.875em ; 则子元素 font-size: 0.875*16 　　rem ：而这个单位是以 root 根元素标准来计算的。　　vw ：屏幕宽度相关，1vw是屏幕宽度的1% 　　vh ：屏幕高度相关，1vh是屏幕高度的1% 2. 用 rem 进行移动端适配　　　　定义html一个标准样式,当宽度为 320px 时候，根font-size 为16 px; 　　html{ 　　　　width:320px; 　　　　font-size : 16px; 　　} 　　　　我们可以得到 1rem = 16px; 　　html{ 　　　　font-size:16px; 　　　　width:20rem 　　} 　　　　那么当屏幕为 400 时候呢？我们的 width 还应该是 20rem; 　　这个时候我们就要计算出 1rem 为多少(也就是 html 的 font-size为多少 )；　　1rem = 400/320*16 , 所以得到　　html{ 　　　　font-size : (400/320

css3中单位rem与.less结合布局

阅读更多关于 css3中单位rem与.less结合布局

rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。通常的，我们把html的font-size设置成0.625%;因为浏览器默认的字体大小是16px,所以font-size:0.625也就相当于16px*0.625=10px;往后我们要设置字体大小的时候,就可以用rem了. 例如font-size:1.2rem; 就相当于 font-size:12px;了但可能有一些浏览器的默认字体不是16px.所以我们可以直接把html的font-size设置成10px;就可以确保万无一失. 然后还有个问题,谷歌浏览器的最小文字大小为12px;假如把rem用到宽高,行高,边距的时候,html设定的10px并不起作用.会默认按照12px来计算.因此最好我们只把rem用到字体大小上. 通常的,我们的wap端页面设计稿的宽度为640px或者750px;我们想要按照设计稿的样子,尽可能不变形地适应各种宽度的显示屏.我们就需要字体大小宽高等全都用rem. 这时候,我们可以使用less来进行计算.在不同的浏览器宽度时,给html赋予不同的默认字体大小,且字体大小与屏幕宽度的比例是一样的.如下: (为了配合谷歌浏览器最小字体为12px

Maven依赖报红的一些解决办法+小工具

阅读更多关于 Maven依赖报红的一些解决办法+小工具

maven经常因为网络或者其他原因导致仓库jar包下载不完整,导致jar包依赖报红,此小工具可以一键删除未下载完成文件 set REPOSITORY_PATH=E:\deplor\apache-maven-3.5.4\resp rem 正在搜索... for /f "delims=" %%i in ('dir /b /s "%REPOSITORY_PATH%\*lastUpdated"') do ( del /s /q %%i ) rem 搜索完毕 pause REPOSITORY_PATH=(后面的是自己的maven本地仓库位置,需要自己设置的)将其保存为bat格式即可使用啦如果还未完全解决的话检查IDE的Maven相关设置打开 C:/用户/.m2.xml 文件,修改相关的仓库位置 <localRepository>E:\deplor\apache-maven-3.5.4\resp</localRepository> 来源： https://www.cnblogs.com/juanxincai/p/12048728.html

flexible.js 移动端自适应方案

阅读更多关于 flexible.js 移动端自适应方案

一，flexible.js 的使用方式： github地址： https://github.com/amfe/lib-flexible 官方文档地址： https://github.com/amfe/article/issues/17 本文中有部分内容引至上面这个文档。（一），引用方式 1，引用cdn地址 <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js" ></script> 当前最新的版本是0.3.2。 2，下载flexible.js 等文件到项目指定目录下，然后在head中引入。建议对于js做内联处理，在所有资源加载之前执行这个js。下面是淘宝的写法： <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <meta content="yes" name="apple-mobile-web-app-capable" /> <meta content="yes" name="apple-touch-fullscreen" /> <meta content="telephone=no,email=no" name="format-detection" /> <meta content="maximum

rem units do not affect DIVs in Chrome - side-effect of minimum font size setting

阅读更多关于 rem units do not affect DIVs in Chrome - side-effect of minimum font size setting

问题 I've stumbled upon a very bizarre case, where rem units were not affecting DIV s (and potentially all other block elements), but were still effective against text (and I suspect all other inline elements). This was happening on one Windows computer only and only in Chrome 74. On all other platforms (Linux, Mac OS X) and other browses (even legacy Safari and in Canary, which is at Chrome 76 at the moment it worked as expected). I had no chance to test it extensively, but I've witnessed it

响应式

阅读更多关于响应式

流式布局百分比布局也叫作流式布局、弹性盒布局。手机网页没有版心，都左右撑满。百分比能够设置的属性是width、height、padding、margin。其他属性比如border、font-size不能用百分比设置的。如果用百分比写width，指的是父元素width的百分比。如果用百分比写height，指的是父元素height的百分比。如果用百分比写padding，那么指的是父元素width的百分比，无论是水平的padding还是竖直的padding。如果用百分比写margin，那么指的是父元素width的百分比，无论是水平的margin还是竖直的margin。不能用百分比写border的宽度接下来我们看一个例子： 1234567891011 div{ width:200px; height:300px; padding:10px;}div p{ width:50%; height:50%; padding:10%; }/*此时p的真实宽度是多少？*/ 此时p的真实宽度是140px*190px 媒体查询（media query） 1.为什么响应式 Web 设计需要媒体查询 CSS3媒体查询可以让我们针对特定的设备能力或条件为网页应用特定的CSS样式。如果没有媒体查询，光用CSS是无法大大修改网页外观的。这个模块让我们可以提前编写出适应很多不可预测因素的CSS规则

应广单片机mini-c 开方

阅读更多关于应广单片机mini-c 开方

应广单片机的mini-c对C的支持有限，好些运算都是通过移位实现，这里附上一个开方的例子。方便大家使用 word dat; word rem ; word root ; word divisor ; void sqrt16(void) { byte i=8; rem = 0; root = 0; divisor = 0; while(i--) { root <<= 1; rem = (rem << 2); rem =(dat>>14)+rem; dat <<= 2; divisor = (root<<1) + 1; if(divisor <= rem) { rem -= divisor; root++; } } } 有啥问题，给我留言了！来源： CSDN 作者： zhongvv 链接： https://blog.csdn.net/zhongvv/article/details/103487736

bat默认以管理员身份运行

阅读更多关于 bat默认以管理员身份运行

在Bat文件内容前插入以下一段代码： @echo off :: BatchGotAdmin :------------------------------------- REM --> Check for permissions >nul 2>&1 "%SYSTEMROOT%\system32\cacls.exe" "%SYSTEMROOT%\system32\config\system" REM --> If error flag set, we do not have admin. if '%errorlevel%' NEQ '0' ( echo Requesting administrative privileges... goto UACPrompt ) else ( goto gotAdmin ) :UACPrompt echo Set UAC = CreateObject^("Shell.Application"^) > "%temp%\getadmin.vbs" echo UAC.ShellExecute "%~s0", "", "", "runas", 1 >> "%temp%\getadmin.vbs" "%temp%\getadmin.vbs" 来源： https://www.cnblogs.com/milesma/p/12021677.html

移动端vant rem适配

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

在使用vant UI时候，由于是在移动端开发所以需要使用rem为单位，而vant里面的组件默认是px单位，就需要用到官网提供的两个插件。具体配置参看这位老哥的： https://www.jianshu.com/p/b0902e3d4aeb 配置完之后在开发中就可以使用px单位了，它会自动转化为rem。来源： https://www.cnblogs.com/jervy/p/12017983.html

vue移动端使用rem适配手机

阅读更多关于 vue移动端使用rem适配手机

比较懒，不喜欢引入，所以直接在main.js里加一些代码定义方法 function setRem ( ) { var whRk = 100 / 750 ; // 表示750的设计图,使用100PX的默认值 var bodyWidth = document . body . clientWidth ; // 当前窗口的宽度 var rem = bodyWidth * whRk ; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值 document . getElementsByTagName ( 'html' ) [ 0 ] . style . fontSize = rem + 'px' ; } window . addEventListener ( 'load' , setRem ) ; window . addEventListener ( 'resize' , setRem ) ; 在mounted里使用方法 new Vue ( { el : '#app' , router , components : { App } , template : '<App/>' , mounted ( ) { setRem ( ) ; } } ) 来源： CSDN 作者：阮生生链接： https://blog.csdn.net/objectking

订阅 rem