首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

可爱rem

前端开发,移动端开发可以说是举足轻重了,可是又面临着不同设备尺寸和分辨率尴尬点。今天[2018-09-16]台风山竹登陆广东,来势汹汹,外出是不可能了,那就宅着写写这篇小文章吧......=1.0, user-scalable=0"> 复制代码 嗯,这个知识点还是一丢丢 本博文重点不是这个~ 是的,我们可以使用REM来进行适配啊:可以说是目前最强移动端适配方案... rem是什么...rem和em单位一样,都是一个相对单位,不同是em是相对于父元素font-size进行计算,rem是相对于根元素htmlfont-size进行计算,这样一来rem就完美的绕开了复杂层级关系,实现了类似...默认情况下,浏览器给字体大小是16px,按照转化关系16px = 1rem。 咦,都是固定了根元素是默认16px了,如何设备不同移动设备呢?...见下: rem自适应处理方案 使用rem布局时候,为了兼容不同分辨率,我们应该要动态修正根字体大小,让所有的用rem单位子元素跟着一起缩放,从而达到自适应效果。

90220
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    理解rem实现响应式布局原理及js动态计算rem「建议收藏」

    前言   移动端布局,童鞋们会使用到rem作为css单位进行不同手机屏幕大小上适配。那么来讲讲rem在其中起作用和如何动态设置rem值。...1、什么是rem   rem是相对于根元素(html标签)字体大小单位。 2、rem实现适配原理   核心思想:百分比布局可实现响应式布局,而rem相当于百分比布局。   ...实现手段:动态获取当前视口宽度width,除以一个固定数n,得到rem值。表达式为rem = width / n。   通过此方法,rem大小始终为widthn等分。...device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 5、使用体验:   我在项目中没有使用flexible.js...等此类动态计算rem插件。

    5.6K11

    JS:用rem来做响应式开发

    (我现在知道尚浅)目前我了解有 1.百分比法: 顾名思义,页面的元素margin,padding,width,height,等等都用%来计算,CSS百分比百指是什么,指的是父元素,所有百分比都是这样...2.媒体查询: 这个是css3给出,我们要解决问题是适应手机屏幕,这个媒体查询正是为解决这个问题而生,媒体查询功能就是为不同媒体设置不同css样 式,这里“媒体”包括页面尺寸,设备屏幕尺寸等...(你还可以设置更多节点) 用媒体查询的话要保证每个像素下都有对应适配效果显然你要设置更小宽度范围; 3.还有就是css3单位remrem就是将根节点htmlfont-size值作为整个页面的基准尺寸...那就要用到js在页面加载时获取window宽度(浏览器窗口宽度)$(window).width();在开发手机页面的时候,一般我们设置最大宽度为640px,因为640px可以保证在至今最宽手机上显示时网页两端刚好贴合屏幕...; //我这里设置htmlfont-size:20px;最大 宽为640px,即相当于640/20=32rem;一行有3个div, 所以每个div宽10.6rem 你也可以像论坛里面讲那样设置

    6.1K10

    rem在响应式布局应用

    rem在响应式布局应用 最近做了一些响应式页面,遇到了一些问题,想了些解决方法,在这里总结一下。目前响应式主流实现方式是百分比布局,加上媒体查询@media screen。...1. rem是的啥 rem是css尺寸单位,rem是以根元素htmlfont-size大小为基准,例如2rem就是跟元素font-size两倍大小,一般浏览器默认是16px。...rem不能用在font简写中和伪元素(:before:after),这两点基本上不会影响使用。...同样实现video等比缩放,使用rem方式,只需要引用上面的js代码,然后就可以如下实现了: video{         width: .4rem;         height: .4rem;...环保无污染 rem可以和px、百分比等尺寸方案一起用,互不干扰。rem会在特定场景帮助到你,而不需要你处处使用它。 2.

    1.6K40

    rem+css预处理+媒体查询与rem+flexible.js做网页适配

    320.css当屏幕尺寸大于640px时候引入是640css rem适配方案 一、 css预处理语言 媒体查询 rem 二、 flexible.js rem 动态设置html标签font-size大小...(这里标准是指以哪个尺寸设计稿算出来font-size值) rem配合 flexible.js 使用第一种方式有点麻烦 如下代码 很多媒体查询 /* 设置常见屏幕尺寸,修改html文字大小*/ /...10rem / @baseFont } } 每次设计到高宽都要除下font-size 解决办法是通过flexible.js github 它是手机淘宝团队出简洁高效移动端适配库 我们不需要在写不同屏幕媒体查询...,因为js做了相关处理 它原理是把当前设备划分为10等份,但是在不同设备下比例一致 我们要做就是确定好我们当前设备html文字大小就可以了 比如当前设计稿750px,那么我们只需要把html文字大小设置为...75px(750px/10)就可以 里面页面元素rem值:页面元素px值 / 75 剩下交给flexible.js 如下 html{ font-size: 20px!

    2.1K20

    web开发该用 em 还是 rem 呢?

    简言 em 和 rem这种相对长度单位进行页面排版是web开发最好选择。在页面排版较好应用em 和 rem,根据设备尺寸缩放显示元素大小。...WEB开发最好选择。...什么是rem rem表示 root em,它是相对于根元素长度单位。这里根元素就是定义字体大小。这意味着任何地方1rem总是等于定义字体大小。...而另一些开发人员喜欢rem简单性,使用rem处理所有元素。 其实 em和rem都有各自优势和劣势,在实际项目开发,应该结合使用两者,利用各自优势,从而实现较好代码质量和显示效果。...那么在具体应用如何在两者做选择呢?有两条简单指导原则: 如果属性尺寸要根据元素字体进行缩放,则使用em 其它情况下都使用rem 上述规则太简单了。

    2K20

    vuepx自动转化为rem

    1.创建 rem.js 文件 很多人写这种小工具文件会习惯性加上闭包,这个其实是没有必要。ES6 每个文件都是单独一个模块。.../***1、创建rem.js文件 **很多人写这种小工具文件会习惯性加上闭包,这个其实是没有必要。ES6每个文件都是单独一个模块。...window.onresize = function () { setRem(); }; 2.在main.js引入rem.js rem.js 路径是自己定,在哪就写那个路径。...install postcss-pxtorem -D 2.配置文件 1>vue-cli2.x 修改根目录 postcssrc.js 文件 在根目录找到找到postcssrc.js文件,并在其中找到...暂不支持`style`中使用`@import url();*` \\ 4.vue px 动转化为 rem 插件 1>三种常用插件对比 postcss-plugin-px2rem 官方文档:https

    1.8K20

    rem响应式布局-自动将px转换为rem--px2rem插件使用

    当你在项目中采用rem做响应式页面的时候,如果代码里面写rem单位的话,会不好判断各种距离、宽高具体数值,下面介绍一款插件:px2rem,使用此插件可以在代码里依然写px,启动项目会自动将...),在util文件夹下新建rem.js文件,内容如下: // rem等比适配配置文件 // 基准大小 const baseSize = 16 // 设置 rem 函数 function setRem...window.onresize = function() { setRem() } 第三步 在项目main.js引入此文件import '..../util/rem' 第四步 在项目根目录新建vue.config.js文件(如已有请忽略),并在其中添加如下代码 // 引入等比适配插件 const px2rem = require('postcss-px2rem...') // 配置基本大小 const postcss = px2rem({ // 基准大小 baseSize,需要和rem.js相同 remUnit: 16 }) // 使用等比适配插件

    78510

    在 Visual Studio Code 设置 px 转换 rem

    最近在做了移动端活动页面,遇到了 H5 适配问题,其实也有 pxtorem 来做自动转换,但是组内讨论过后,还是决定自己计算 rem ,其实 rem 已经过时了,目前比较流行是 ViewPort 了...现在遇到问题是在设置了 RootFontSize 后,需要自己计算这个 rem 值,直接找了个插件 cssrem 来做 px 自动转换城 rem,看个作者例子 装好之后可以直接在 vscode...设置对应选项来进行自定义 #在 VSCode 设置 ren 配置 基准 font-size: 16px,但你可以通过以下配置进行修改: 打开 ctrl+, 用户配置界面(或项目配置),只有三个配置项...: cssrem.rootFontSize 基准 font-size (单位:px),默认:16 cssrem.fixedDigits px 转 rem 小数点最大长度,默认:6 cssrem.autoRemovePrefixZero...自动移除 0 开头前缀,默认:true。

    3K20

    Rem布局原理探究

    什么是em 我相信所有接触学习过css布局同学,一定在rem之前先听到过em大名,但是大多数也许跟我一样,只是听过或者最多跟着W3C上教程敲过一下demo,之后工作学习并没有使用em这个单位,...用户浏览器渲染默认字体大小是"16px",换句话说,Web页面“body”文字大小在浏览器下默认渲染是"16px"。当然,如果用户愿意也可以改变这个字体大小。...所以针对这种繁琐运算情况,rem应运而生,我们是这样定义remrem作用于非根元素时,相对于根元素字体大小;rem作用于根元素字体大小时,相对于其出初始字体大小 rem取值有两种情况,就是设置根元素和非根元素时候...p { font-size: 2rem; } 而上面p标签这个例子,我们之前已经知道html字体大小是32px,那么p标签字体大小就是2 * 32px = 64px。...p { width: 50x } //屏幕宽度50% 而理解到这里,其实我们也就知道我们让页面最上面跑js代码到底是什么意思了,我们就是需要让html元素字体大小,恒等于屏幕宽度1/100。

    1.6K30

    不要再用js设置rem了,现代css自适应方案来了

    html上 font-size ,相对进行对应变化 尤其是智能手机出现之后,我们没有办法在去固定我们设备宽高,需要考虑 响应式 设计,根据浏览器窗口大小有不同布局方式 css 单位 绝对单位...很难按照我我们预想来 所以我们有更好用 rem rem 在 html 文档,根节点是所有其它元素祖先,:root 表示根节点伪类选择器,可以用来选中 html ,html 类型选择器和 :root...等等,这样统一字号标准,让页面不论是缩放还是适配都游刃有余,所以当你拿捏不准使用什么方式来设置一些元素时候,就按照上述来,一般是没有什么问题 使用 js 设置根元素 rem 自从有了 rem...这个便捷相对单位,我们就有了一些奇怪操作,比如用 js 设置根元素大小这个操作,就是将网页根元素字号根据屏幕大小动态设置为一个固定值,然后在页面根据 ui 给出图,换算成 rem 值,进行各种适配...,你只需要更改对应组件 font-size 即可 当然 css 相对单位还有常见内容 视口相对单位 vh: 视口高度1/100 vw: 视口宽度1/100 vmin: 视口宽度或者高度较小一方

    6K41

    Rem布局原理解析

    p {width: 50x} /* 屏幕宽度50% */ 如果想要页面元素随着屏幕宽度等比变化,我们需要上面的x单位,不幸是css并没有这样单位,幸运是在css中有rem,通过rem这个桥梁,...可以通过js来设置,一般需要在页面dom ready、resize和屏幕旋转设置 document.documentElement.style.fontSize = document.documentElement.clientWidth...} 其实有了postcss后,这个过程应该放到postcss,源代码如下 p {width: 100px2rem} postcss会对px2rem这个单位进行处理,处理后结果如下,感兴趣的话来写一个...width: 15.625rem} /* vw方案 */ p {width: 15.625vw} vw还可以和rem方案结合,这样计算html字体大小就不需要用js了 html {fons-size:...,并水平居中 body { margin: auto; width: 100rem } 第三,如果用户禁用了js怎么破?

    1.1K20

    jssettimeout()用法详解_jssetattribute

    大家好,又见面了,我是你们朋友全栈君。 setTimeout与setTimeInterval均为window函数,使用顶层window一般都会省去,这两个函数经常稍不留神就使用错了。...setTimeout内函数先不执行,隔一段时间后再执行,函数后面的数字是隔时间,单位是毫秒(千分之一秒) 比如: setTimeout(‘alert(“hello world!”)’..., 400); setInterval() 方法可按照指定周期(以毫秒计)来调用函数或计算表达式,直到clearInterval()被调用或窗口被关闭。 比如: Stop interval setInterval动作作用是在播放动画时...如发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    14.9K20

    jsfind用法_jsfind函数

    今天我们要说是结合ES6新特性谈一下js里面的一个很好用方法-find() 现在前端和过去不一样,过去前端只要会画页面就行了,但是现在仅仅会画页面已经远远不够了,现在前端还需要会处理数据,而且还要会将数据分析分类处理...下面我们讲怎么用前端处理这块逻辑 首先我们拿到了所有的数据这里我直接放到一个测试用js里面存放, 要实现之前说效果,就需要使用我们今天主角find()方法。 find()是用来做什么呢?...find()方法返回数组符合测试函数条件第一个元素。否则返回undefined 在本文章需要注意几个点: ①、第一个元素 ②、测试函数 那么如何使用呢?...table{border: 2px solid black;margin-top: 2rem;} table thead tr td{width: 5rem;height: 3rem;border...: 1px solid #000000;} table tbody tr td{width: 5rem;height: 3rem;border: 1px solid #000000;} </style

    11.6K30

    jsHook

    简单理解:   hook(钩子)就是: 把将要执行函数或者一系列动作注册到一个统一接口下面, 当应用程序调用此接口(即hook)时,就等于调用了这一系列动作。...JS钩子(hook)例子 JS钩子(hook)例子1: 例如我们在向后台进行ajax请求时候,后台经常会返回我们一些常见错误码,如:001代表用户不存在,002代表用户密码输入错误。...这个时候我们要将错误友好提示给用户。这个时候我们该怎样实现呢?...一般写法可能是: $.ajax(option,function(result){ var errCode = result.errCode ;//错误码 if(errCode){...switch case来实现,但是这个两种写法都无法避免一个问题就是如果我错误码特别多,那得写多少个if else和case 啊?

    6.5K31
    领券