rem | 易学教程

解决vue移动端适配问题

阅读更多关于解决vue移动端适配问题

1，先看看网上关于移动端适配讲解再聊移动端页面适配，rem和vw适配方案！基础点：rem相对根节点字体的大小。所以不用px; 根字体：字体的大小px; px ：你就当成cm(厘米)这样的东西吧；基准：750设计稿；这是方案的基础理论，在这个基础上，我们还要搞明白，到底要干一件什么事情！目标一、手机适配：就是页面上的尺寸，无论高度，还是宽度，还有字体，随屏幕的宽度变化！这里是屏幕宽度！是不是想到了vw，对，就是这个意思；——最大程度在各个尺寸屏幕上还原设计稿目标二、px转换成rem：一般UI给的设计稿宽度大小是750，所以，我们想直接写上面UI标记的尺寸；——最大程度减少工作为什么选择rem? 很久之前没有vw，怕vw的兼容问题，就用了rem；也就是：rem的兼容性>vw的兼容性；还有一种就是自己写百分比很不优雅一、理论基础！实现目标一用rem就可以了吧！因为rem就可以随根字体大小改变而改变，从而实现了自适应的功能。但是，但是，重点来，如果，根字体的大小默认是16px；那么，我们的1rem；就永远是16px，懂么？也就是如果设计稿是750（放大了一倍，iphone是375pt),我们想要个50%的大小: 50%*357px/16=11.718rem 如果我们写一个11.718rem的宽度，然而这只能在能iphone6还原设计稿

【开发记录】H5移动端适配rem

阅读更多关于【开发记录】H5移动端适配rem

关于移动端的页面，使用rem解决适配问题，按比例与设计稿保持一致。前言设计稿为750px，开发标准为iphone6/7/8/X，实际开发宽度为375px；开发中除跟节点外所有size皆使用rem单位。编辑器：【VScode】前端开发常用插件：【cssrem】这个插件可以在写px时自动计算rem值，在首选项中搜索cssrem，设置Root Font Size；跟节点大小我这里设为12px；设计稿：【蓝湖】在蓝湖中选择自定义开发平台=>设计稿一般是750px，这里开发过程中减半指定宽度375px与开发宽度一致；选择元素后可看到计算后的px 在APP中计算跟节点的font-size，这里可以根据宽度计算出跟节点的大小，按比例缩放 app.vue export default { name: 'app', created () { this.recalc() window.addEventListener(this.resizeEvt, this.recalc, false) }, computed: { resizeEvt() { return 'orientationchange' in window ? 'orientationchange' : 'resize' } }, methods: { // 计算HTML的fontsize recalc() { let

[原创]JQuery的Validation插件中Remote验证的中文问题

阅读更多关于 [原创]JQuery的Validation插件中Remote验证的中文问题

前段时间，再次出现AJAX中文编码问题，导致会员名重复检测失败，不过这次出现问题的是Validation插件的remote验证。根据上次的经验，我将 1. contentType: "application/x-www-form-urlencoded; charset=utf-8" , 加入到ajax请求的参数中，结果这次居然不起作用了。多次观察Fiddler结果，发现无效后，只好打开JQuery.Validation.js寻求答案了。在remote的代码中，我发现： 01. ... 02. var data = {}; 03. data[element.name] = value; 04. $.ajax($.extend( true , { 05. url: param, 06. mode: "abort" , 07. port: "validate" + element.name, 08. dataType: "json" , 09. data: data, 10. ... 原来插件自己定义了提交的数据，直接将要验证的数据以json格式传给服务器了。难怪针对form的编码定义无效。马上将value进行强制的编码encodeURIComponent(value)，果然就好了！后记：这种方法在服务器代码处理的时候，必须显式地解码数据，通用性很差。于是

移动端rem的使用

阅读更多关于移动端rem的使用

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  <script> window.onload = function(){ getRem(750,100) }; window.onresize = function(){ getRem(750,100) }; function getRem(pwidth,prem){ var html = document.getElementsByTagName("html")[0]; var oWidth = document.body.clientWidth || document.documentElement.clientWidth; html.style.fontSize = oWidth/pwidth*prem + "px"; } /* //小米官网的写法

rem自适应布局的回顾总结

阅读更多关于 rem自适应布局的回顾总结

使用 rem 实现自适应布局，应该算是当前移动前端的一大趋势，有些人对此还有点迷惑，搞不懂 rem 是如何实现自适应布局，如何根据设计稿来调整 rem 的值？rem布局如何用雪碧背景图片？rem一定要加载 JS 吗？rem的根 html font-size设置为多少合适？看看这篇文章，也许能帮到你。这些问题整理来自之前发表过的文章，细心的读者也可以自己翻翻之前的内容找到答案，本文统一给个回复，如果对你有用，还请点个赞，谢谢! rem自适应原理 rem是根据html的font-size大小来变化，正是基于这个出发，我们可以在每一个设备下根据设备的宽度设置对应的html字号，从而实现了自适应布局。更多介绍请看这篇文章： rem是如何实现自适应布局的。 rem的值目前有两种，一种是根据 js 来调整html的字号，另一种则是通过媒体查询来调整字号。使用js ;(function(designWidth, maxWidth) { var doc = document, win = window; var docEl = doc.documentElement; var tid; var rootItem,rootStyle; function refreshRem() { var width = docEl.getBoundingClientRect().width; if

rem布局原理深度理解（以及em/vw/vh）

阅读更多关于 rem布局原理深度理解（以及em/vw/vh）

一、前言　　我们h5项目终端适配采用的是淘宝那套《Flexible实现手淘H5页面的终端适配》方案。主要原理是rem布局。最近和别人谈弹性布局原理，发现虽然已经使用了那套方案很久，但是自己对rem的理解很含糊，包括vw、vh等。所以打算写博客总结一下，以加深理解。二、几个概念　　这里就不讲那些，物理像素、设备像素比了，可以自己查阅。要去理解rem/em/vm/vh等，首先要直观的去理解他们到底是什么？理解好了，后面就好办了。其实这几个都是css单位，就像我们常用的px一样，只不过他们都是相对单位。我平时使用的百分比单位如：width:100%;就是相对单位。　　2.1、em 　　 em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小——MDN 　　比如父元素font-size:12px; 　　自身元素如果写成：font-sise:2em;则自身元素用px表示就是24px（相对父元素字体大小）; 　　但是自身元素设置：width:2rem,那么自身元素用px表示就是48px（相对自身字体大小）； 2.2、rem 　　 rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小——MDN 　　比如根元素（html）设置font-size=12px; 非根元素设置width:2rem

Rem自适应js---flexible.min.js

阅读更多关于 Rem自适应js---flexible.min.js

网上看到很多移动端适配的各种方法，由于原来工作中对rem的疏忽，所以决定重新学习rem~ 由于移动端特殊性，本文讲的是如何使用 rem 实现自适应，或叫 rem 响应式布局，通过使用一个脚本就可以rem 自适应，不用再为各种设备宽度不同而烦恼如何实现自适应的问题。 rem 是相对于根元素 < html > ，这样就意味着，我们只需要在根元素确定一个px字号，则可以来算出元素的宽高。1rem=16px(浏览器html的像素，可以设定这个基准值），假如浏览器的html设为64px，则下面的元素则 1rem=64px来运算。阿里团队开源的一个库。使用 flexible.js 轻松搞定各种不同的移动端设备兼容自适应问题。在这里找到了一个精简版的flexible.min.js,可以适配所有的移动端: 代码如下: //designWidth:设计稿的实际宽度值，需要根据实际设置 //maxWidth:制作稿的最大宽度值，需要根据实际设置 //这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750) ;(function(designWidth, maxWidth) { var doc = document, win = window, docEl = doc.documentElement,

启用Oracle中的scott用户

阅读更多关于启用Oracle中的scott用户

启用 Oracle 中的 scott 用户在 Linux 系统上安装 Oracle 服务器，有的不含有 scott 用户，有的 scott 用户被锁。下面是添加 scott 用户或解锁 scott 。一、验证 scott 用户是否存在用 oracle 用户登录 su – oracle ，之后用 SYS 用户连接数据库： $ sqlplus / as sysdba SQL>conn scott/tiger ERROR: ORA-28000: the account is locked 说明 scott 用户被锁或不存在，先解锁试试 $ sqlplus / as sysdba SQL> alter user "scott" account unlock; alter user "scott" account unlock * ERROR at line 1: ORA-01918: user 'scott' does not exist SQL> 因此说明 scott 用户不存在二、添加 scott 用户 1. 把下面内容复制到一个新建的名字为 scott.sql 的文件里 Rem Copyright (c) 1990 by Oracle Corporation Rem NAME REM UTLSAMPL.SQL Rem FUNCTION Rem NOTES Rem

最简单的方式实现rem布局

阅读更多关于最简单的方式实现rem布局

加上如下js，px转换成rem需要手动，计算方式：量的大小除以100，就等于rem，例如：量的设计稿元素宽度是120，那么就写成{width: 1.2rem}，这样写有什么问题，待研究，也欢迎补充 <!DOCTYPE html> <html lang="en" style="font-size:100px"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> function resetFontSize() { var baseFontSize = 100 var designWidth = 750 var width = window.innerWidth var currentFontSize = (width / designWidth) * baseFontSize document.getElementsByTagName('html')[0

移动端布局方案—vw+rem

阅读更多关于移动端布局方案—vw+rem

　　前言　　　　首先你要知道 vw 和 rem 是什么？怎么使用？　　　　①：简单来说 vw 是视口单位，相当于把视口等分成了 100 ， 1vw = 1 ; 　　　　 ②：rem 是相对单位，设置根元素 html 的 font-size ，比如给 html 设置字体大小为 100px ， 1rem = 100px ; 　　　　注：我之前针对 vw 和 rem 分别写过一篇博客，详见如下　　　　　　 vw： https://www.cnblogs.com/tu-0718/p/9906692.html 　　　　　　 rem： https://www.cnblogs.com/tu-0718/p/9146631.html 　　　　正文　　　还记得第一次知道 rem 时，我的心情如沐春风，感觉找到了新大陆　　　那时常为移动端写自适应页面而苦恼，传统的百分比布局和媒体查询早已让我心力交瘁　　　百分比布局的缺点：宽度虽然能随屏幕自适应，但高度固定不变，当设备屏幕越来越大，会有一种被强行拉伸的既视感，用户体验差　　　媒体查询的缺点：CSS 代码量增多，体积增大，要为每一个不同分辨率的设备单独写一套样式来自适应，这样的话我宁愿狗带　　　　在这种情况下， rem 的出现无异于黑暗中的一道曙光，不过它也有一个缺点　　　 rem的缺点：需要引入一段 JS

订阅 rem