rem

使用rem编写自适应屏幕网页造成div被span撑高的解决办法

阅读更多关于使用rem编写自适应屏幕网页造成div被span撑高的解决办法

原始代码： <html> <head> <meta charset="utf-8"> <meta content="ie=edge" http-equiv="x-ua-compatible"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" /> </head> <style type="text/css"> #content{ width:7.2rem } .price-div{ background-color:yellow; } .price-div span{ background-color:green; } .price-unit{ font-size:0.25rem; } .price-number{ font-size:0.31rem; } </style> <body> <div id="content" style="float:left"> <div class="price-div" > <span class="price-unit">￥</span> <span class="price-number">42</span> </div> </div> <script type="text

在vue 中使用 less

阅读更多关于在vue 中使用 less

在vue 中使用 less ，就可以使用rem了如果项目已经开发的差不多了，没有用到rem 又要使用rem，您用这招。 postcss-pxtorem：转换px为rem的插件 postcss-pxtorem npm install postcss-pxtorem --save 新建 rem.js文件 const baseSize = 32 // 设置 rem 函数 function setRem () { // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。 const scale = document.documentElement.clientWidth / 750 // 设置页面根节点字体大小 document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px' } // 初始化 setRem() // 改变窗口大小时重新设置 rem window.onresize = function () { setRem() } 并引用进main.js文件内 import './rem' .postcssrc.js 在 px "postcss-pxtorem": { "rootValue": 32, "propList": ["*"] } helloworld.vue

学习 | css3实现进度条加载

阅读更多关于学习 | css3实现进度条加载

进度条加载是页面加载时的一种交互效果，这样做的目的是提高用户体验。进度条的的实现分为3大部分：1、页面布局，2、进度条动效，3、何时进度条增加。文件目录加载文件顺序 <link rel="stylesheet/less" href="./index.less"> <script src="./zepto.min.js"></script> <script src="./less.js"></script> <script src="./rem.js"></script> index.less是样式文件 zepto是引入的库 less.js是编译less的 rem.js是移动端屏幕自适应实现效果 1、页面布局页面布局采用position布局，进度条居中，css采用less，布局风格为移动端，采用rem单位。 html <section class = " loadingBox " > <div class = " progress " > <div class = " run " ></div> </div> </section> less html,body { height : 100% ; } .loadingBox { background : #000000 ; height : 100% ; overflow : hidden ; position :

移动端横屏处理

阅读更多关于移动端横屏处理

之前我的处理是：（错误） @media screen and (orientation: landscape) { .update-main-content { padding: 2.18rem 0 2.18rem 0; } } 因为这个项目是老项目，px转rem只是简单地在页面初始化的时候根据document.documentElement.clientWidth这个来算，注意当横屏的时候，它的rem还是之前竖屏的。所以正确的处理应该是先检测现在是横屏还是竖屏，再进行计算rem function initLandscape() { var clientHeight = document.documentElement.clientHeight || window.innerHeight || window.screen.height; var fontSize = clientHeight > 1080 ? 100 : clientHeight / 10.8; fontSize = fontSize > 22 ? fontSize : 22; document.documentElement.style.fontSize = fontSize + 'px'; }; //判断手机横屏状态： window.addEventListener("onorientationchange"

rem简单实现移动端适配

阅读更多关于 rem简单实现移动端适配

rem：移动web开发默认字体大小是16px 在 <html> 中设置字体大小与em的区别： em是在父级设置字体大小受影响移动端适配首先获取屏幕的宽度计算当前屏幕宽度和640的比例计算出font-size的值改变html的font-size的值 <!DOCTYPE html> <html lang= " en " style= " font-size: 100px; " > <head> <meta charset= " UTF-8 " > <title>rem</title> <style> * { margin: 0 ; padding: 0 ; } div { width: 6 .4rem; height: 6 .4rem; background - color: pink; font - size: .14rem; margin: 0 auto; } p { width: 50 % ; height: 50 % ; background - color: skyblue; } </style> </head> <body> <div> <p>这是一个p</p> </div> </body> </html> 第一种： window.onresize = function(){ var html = document.getElementsByTagName(

CSS 单位 px、pt、em、rem

阅读更多关于 CSS 单位 px、pt、em、rem

1. px (pixel，像素)： px即pixel(像素)，是相对长度单位，根据屏幕的像素决定，最能准确还原设计图。px是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI(Dots Per Inch，每英寸像素数)，在扫描打印时一般都有DPI可选。Windows系统默认是96dpi，Apple系统默认是72dpi。 2. pt (point，磅)： pt 是印刷行业常用单位，是一个物理长度单位，指的是72分之一英寸。pt (point，磅)：是一个物理长度单位，指的是72分之一英寸。 3. em em：相对单位(相对于当前对象内文本的字体尺寸)，相对父元素属性的单位，一般用于移动端布局，每个子元素透过「倍数」乘以父元素的px值。最初是指字母M的宽度，故名em。现指的是字符宽度的倍数，用法类似百分比，如：0.8em, 1.2em,2em等。通常1em=16px。相对于当前对象内文本的字体尺寸，如当前对行内文本的字体尺寸未被认为设置，则相对于浏览器的默认字体尺寸。但em值并不固定，它会继承父级元素的字体大小。 EM特点 1. em的值并不是固定的； 2. em会继承父级元素的字体大小。 4. rem rem：是CSS3新增的一个相对单位，每个元素透过「倍数」乘以根元素的px值。结合相对定位和绝对定位的优势，相对根元素html，想要修改字体大小

使用rem布局

阅读更多关于使用rem布局

在前端开发中，如果要对移动端的项目进行适配，可以了解一个插件，叫 hotcss.js，可以解决在不同大小的屏幕上最优显示另外一种适配，也就是rem 与 em 相同的是它们都是使用元素设定字体大小，不同的是 em 是根据父级元素设置大小。而 rem 在根据指定 html 根元素的字符大小而定的，从IE6到Chrome中，默认根元素的 font-size 都是 16px 的。如果想要设置 12px 的字体大小也就是 12px/16px = 0.75rem 。由于 px 是相对固定单位，字号大写直接被定死，无法随着浏览器进行缩放。 em 和 rem 都是相对单位， em 是相对于其父元素的 font-size ，页面层级越深， em 换算越复杂，麻烦。 rem 直接相对于根元素 html ，避开层级关系，移动端新型浏览器对其支持较好。使用 1，在header里设置meta <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0"/> 2.在js中设置跟节点的大小 doument.doumentElement.style.fontSize = doument.doumentElement.clientWidth / 640 * 100

堆内内存与堆外内存

阅读更多关于堆内内存与堆外内存

最近看Spark的 StorageLevel(存储级别) 源码的时候看到有 useOffHeap 这个标签, 觉得有必要挖掘一下堆内内存(on-heap memory) 堆内内存是java程序员在日常工作中解除比较多的, 可以在jvm参数中使用-Xms, -Xmx 等参数来设置堆的大小和最大值堆内内存 = 年轻代 + 老年代 + 持久代年轻代 (Young Generation) 存放的是新生成的对象年轻代的目标是尽可能快速的收集掉那些生命周期短的对象 Eden 大部分对象在Eden区中生成当Eden区满时, 依然存活的对象将被复制到Survivor区, 当一个Survivor 区满时, 此区的存活对象将被复制到另外一个Survivor区 Survivor（通常2个) 当两个 Survivor 区都满时, 从第一个Survivor 区被复制过来且依旧存活的对象会被复制到老年区(Tenured) Survivor 的两个区是对称的, 没有先后关系, 所有同一个区中可能同时存在从Eden复制过来的对象和从前一个 Survivor 复制过来的对象。 Survivor 区可以根据需要配置多个, 从而增加对象在年轻代的存在时间, 减少被放到老年代的可能。老年代 (Old Generation) 存放了在年轻代中经历了N次垃圾回收后仍存活的对象,

阅读更多关于 rem

一、屏幕宽度 / 设计稿宽度 *100 来设置根元素的 font-size 10px = 0.10rem (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if(clientWidth>=640){ docEl.style.fontSize = '100px'; }else{ docEl.style.fontSize = 100 * (clientWidth / 640) + 'px'; } }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); 二、 const MAX_FONT_SIZE = 42; document

高精度模板

阅读更多关于高精度模板

题目是洛谷 p1005 矩阵取数游戏很水的题重要的是高精度的板子太牛皮了 1 #include <iostream> 2 #include <iomanip> 3 #include <vector> 4 #include <cassert> 5 #include <cstring> 6 #include <string> 7 #include <sstream> 8 9 using namespace std; 10 #define N 82 11 typedef long long LL; 12 13 int MyAtoi(const char* s, const char* t) { 14 int ans = 0; 15 for (; s != t; ++s) 16 (ans *= 10) += *s - '0'; 17 return ans; 18 } 19 20 template<typename T, typename MT> 21 MT Add(T x, MT p) { 22 return x >= p ? x - p : x; 23 } 24 25 const LL tens[] = {1LL,10LL,100LL,1000LL,10000LL,100000LL,1000000LL,10000000LL,100000000LL,1000000000LL}; 26

订阅 rem