rem | 易学教程

px2rem-loader将px转化为rem，适配移动端vant-UI等框架

阅读更多关于 px2rem-loader将px转化为rem，适配移动端vant-UI等框架

简单描述最近尝试了几个移动端的ui框架，发现vant-ui还不错；但是有个问题，就是vant-ui单位是px，使用时需要我们自己去转换为rem；具体实现方法 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.安装px2rem-loader npm install px2rem - loader 5.配置px2rem-loader 这里是重要的一步~~ 在build文件中找到util.js，将px2rem-loader添加到cssLoaders中，如： const px2remLoader = { loader : 'px2rem-loader' , options : { remUnit : 75 //

移动端页面rem布局出现横向滚动条的修复

阅读更多关于移动端页面rem布局出现横向滚动条的修复

移动端页面rem布局出现横向滚动条的修复，解决方法如下： html,body{ overflow:hidden; overflow-y:auto; } 注意：如果解决不了，页面主题的高度自适应部分的css样式中也需要添加：｛overflow:hidden; overflow-y:auto;｝来源： https://www.cnblogs.com/wangbingblog/p/11348224.html

响应式布局

阅读更多关于响应式布局

rem是什么？　　rem是一个长度单位　　 * px: 绝对长度单位，最常用　　* em: 相对长对单位，相对于父元素，不常用　　* rem: 相对长度单位，相对于根元素，常用于响应式布局响应式布局的常用方案来源： https://www.cnblogs.com/yangkangkang/p/11347730.html

h5手机端自适应解决方案

阅读更多关于 h5手机端自适应解决方案

　　现在手机端的项目比较多，自适应不用说那是必备技能了，目前应用的单位最多还是rem, 然而每次在制作过程中需要自己计算rem值比较繁琐，现在分享下postcss-pxtorem的使用可以把px直接转换为rem，省下了计算的体力了首先安装依赖 npm install postcss-pxtorem -D其次设置规则在package.json里面配置下，配置如下 "postcss": { "plugins": { "autoprefixer": {}, "postcss-pxtorem": { "rootValue": "72",//设计稿十比一比例换算，我这里得设计稿720 "propList": [ //可以设置全部属性转换为rem propList ['*'] 　　　　"padding", ..... ] } }},最后配合flexrem.js使用就解决了移动端适配问题 (function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', //改变窗口大小重新设置rem recalc = function() { var clientWidth = docEl.clientWidth

跟我一起创建栈

阅读更多关于跟我一起创建栈

创建栈的方法如下 function Stack(){ var items = [] // push添加元素到栈顶 this.push = function(element){ items.push(element) } // 移除栈中的元素 this.pop = function(){ return items.pop() } // 返回栈顶元素 this.peek = function(){ return items[items.length-1] } // 栈为空 this.isEmpty = function(){ return items.length == 0 } // 栈的长度 this.size = function(){ return items.length } // 移除栈里所有元素 this.clear = function(){ items = [] } // 将栈中的元素输出到控制台 this.print = function(){ console.log(items.toString) } } var Stack = new Stack() Stack.push(5) console.log(Stack.peek()) console.log(Stack.size()) Stack.pop() console.log(Stack.size())

unit —— em / rem / vh / vw

阅读更多关于 unit —— em / rem / vh / vw

html,body{margin:0; padding:0; font-size:14px; } /*em 继承父元素的字体大小，来变大或变小，多层嵌套字体变化*/ .em, .em > .em-son, .em > .em-son > .em-grandson {font-size: 1.2em;} /*rem 继承根节点元素的字体大小，来变大或变小，多层嵌套字体不变化*/ .rem, .rem > .rem-son, .rem > .rem-son > .rem-grandson {font-size: 1.2rem;} /*rem 也可作为固定长度单位设置宽高等*/ .rem-box { width:10rem; height: 10rem; line-height:5rem; text-align: center; color: #fff; background: #d60b3b; } /*vh,vw 屏幕可见区域的高度，宽度的1%*/ .vhvw-box { width:50vw; height: 100vh; line-height:25vh; text-align: center; color: #fff; background: #d60b3b; } <body> <h1>em 继承父元素的字体大小，来变大或变小，多层嵌套字体变化</h1> <div class=

NoGCString

阅读更多关于 NoGCString

网上有大佬发过代码,如下: using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; public class NoGcString { static readonly char[] number = new char[] { '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' }; char[] int_parser = new char[20]; int m_capacity; int count; string str; public int Length { get; private set; } public NoGcString(int capacity) { m_capacity = capacity; str = new string((char)0, m_capacity); } public override string ToString() { return GetString(); } public void Clear() { Length = 0; } public void ApplyForText(Text t) { t.text = GetString();

css 单位之px , em , rem

阅读更多关于 css 单位之px , em , rem

px : Pixel像素单位。像素是相对显示器分辨率而言。em : 相对长度单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px）。rem : 相对单位，可理解为 "root em" ,相对于根节点html的字体大小来计算，css3新加属性。如果没有重置，html默认font-size:16px。也就是说，em是以自身父容器为参考对象的，而rem直接以HTML为参考对象的，所以rem更适合移动式开发。em ： em是一个相对长度单位，是相当于当前对象内文本的字体尺寸，如果我们未设置当前文本的字体尺寸，那么em就会相当于浏览器的默认字体尺寸。在浏览器中默认字体尺寸为16px，换句话说1em = 16pxrem : 除了rem是相对于根节点html，其他和em一样。rem适配移动端原理： var offWidth = window.screen.width / 25; document.getElementsByTagName("html")[0].style.fontSize = offWidth + 'px'; 这样一来，25rem 等于移动设备的最大宽度来源： https://www.cnblogs.com/cl94/p/11333797.html

hdu2430Beans（单调队列）

阅读更多关于 hdu2430Beans（单调队列）

Mr. Pote's shop sells beans now. He has N bags of beans in his warehouse, and he has numbered them with 1, 2, …, N according to their expired dates. The i-th bag contains Wi units of beans. For selling at retail makes only a little profit, Mr. Pote want to pack beans in small packets with certain size and sell them in packets. Here comes his packing way: Suppose the size of the packet is P units. Firstly, Mr. Pote selects some bags (at least one) of beans with consecutive number in his warehouse. Then he takes out the beans from all selected bags, and puts them together on the desktop. To pack

移动端rem适应布局

阅读更多关于移动端rem适应布局

移动端rem适应布局 rem rem（root em）是一个相对单位，类似于em，em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。比如，根元素（html）设置font-size=12px；非根元素设置width：2rem；则换成px表示24px 媒体查询使用@media查询，可以针对不同的媒体类型定义不同的样式 @media可以针对不同的屏幕尺寸设置不同的样式当你重置浏览器大小的过程，页面也会根据浏览器的宽度和高度重新渲染页面目前针对很多苹果手机，Android，平板等设备都用得到多媒体查询语法规范 @media mediatype and|not|only(media feature) { CSS-Code } 媒体类型值解释说明 all 用于所有设备 print 用于打印机和打印预览 scree 用于电脑屏幕，平板电脑，智能手机关键字 and：可以将多个媒体特性连接到一起，相当于“且”的意思 not：排除某个媒体类型，相当于“非”的意思，可以省略 only：指定某个特定媒体类型，可以省略媒体特性【注意】要用小括号进行包含值解释说明 width 定义输出设备中页面可见区域的宽度 min-width 定义输出设备中页面最小可见区域宽度 max-width 定义输出设备中页面最大可见区域宽度 less介绍

订阅 rem